PDA

View Full Version : [CLOSED] ImageCommandColumn



cwolcott
Jun 14, 2012, 6:46 PM
1) I have added an ImageCommandColumn and added the property ButtonAlign="Center" to center the ImageCommands, but it doesn't seem to work.

2) I have added a <PrepareCommand> to disable certain images, but what is the method to disable an image. I can hide it, but how to disable it.



<script type="text/javascript">
var prepareCommand = function (grid, command, record, row) {

if (command.command == "ReleaseMemo" && record.data.ReleaseMemo == "") {
command.hidden(true);
}
};
</script>

<ext:ImageCommandColumn runat="server" Header="Documents" Width="80" ButtonAlign="Center" Resizable="false" >
<Commands>
<ext:ImageCommand Icon="PageWhiteAcrobat" CommandName="ReleaseMemo">
<tooltip text="Release Memo" />
</ext:ImageCommand>
</Commands>

<PrepareCommand Fn="prepareCommand">
</ext:ImageCommandColumn>

Daniil
Jun 14, 2012, 10:51 PM
Hi,


1) I have added an ImageCommandColumn and added the property ButtonAlign="Center" to center the ImageCommands, but it doesn't seem to work.

The ImageCommandColumn has no ButtonAlign property.

You could try to align it via CSS setting

TdCls="my-align"
for the ImageCommandColumn and respective CSS rules.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.column.Column-cfg-tdCls


2) I have added a <PrepareCommand> to disable certain images, but what is the method to disable an image. I can hide it, but how to disable it.

Well, an ImageCommand is just an icon (CSS background-image).

I would set up a respective disabled icon.

command.iconCls = "some-disabled-view-icon";

cwolcott
Jun 15, 2012, 5:58 PM
Sorry about that I originally was using the CommandColumn, then switched to ImageCommandColumn.

I have switched back to CommandColumn and was able to disable the icon for the GridCommand using the <PrepareToolbar>.

The CommandColumn does have a ButtonAlign property, but when I set it to Center or Right nothing happens.



<script type="text/javascript">
var prepareToolbar = function (grid, toolbar, rowIndex, record) {
if (toolbar.items.getAt(0).command == "ReleaseMemo" && record.data.ReleaseMemo == "") {
command.items.getAt(0).setDisabled(true);
}
};
</script>
...
<ext:CommandColumn runat="server" Text="Documents" Resizable="false" ButtonAlign="Center">
<Commands>
<ext:GridCommand icon="PageWhiteAcrobat" CommandName="ReleaseMemo" >
<ToolTip Text="Release Memo" />
<ext:GridCommand />
</Commands>
<PrepareToolbar Fn="prepareToolbar" />
</ext:CommandColumn>

Daniil
Jun 15, 2012, 7:04 PM
The CommandColumn does have a ButtonAlign property, but when I set it to Center or Right nothing happens.


Confirm, thanks for the report. We will investigate.



I have switched back to CommandColumn and was able to disable the icon for the GridCommand using the <PrepareToolbar>.



<script type="text/javascript">
var prepareToolbar = function (grid, toolbar, rowIndex, record) {
if (toolbar.items.getAt(0).command == "ReleaseMemo" && record.data.ReleaseMemo == "") {
command.items.getAt(0).setDisabled(true);
}
};
</script>



The prepareToolbar function looks inconsistent. I can't see where the "command" variable is defined, so, it just throws a JS error saying that "command is not defined".

Replacing

command.items.getAt(0).setDisabled(true);
with

toolbar.items.getAt(0).setDisabled(true);
causes the icons to be disabled.

cwolcott
Jun 15, 2012, 7:14 PM
Correct. That is what happens when I retype the code. We develop the code on a stand alone system not connected to the internet, thus I have to retype all my code and type it incorrectly.



<script type="text/javascript">
var prepareToolbar = function (grid, toolbar, rowIndex, record) {
if (toolbar.items.getAt(0).command == "ReleaseMemo" && record.data.ReleaseMemo == "") {
toolbar.items.getAt(0).setDisabled(true);
}
};
</script>


Will look forward to what you find out with the ButtonAlign="Center" issue.

Daniil
Jun 15, 2012, 7:44 PM
The ButtonAlign property has been renamed to the Pack one with the following acceptable options: Start|Center|End. Defaults to Start.

It's passed to the Toolbar layout config.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.layout.container.Box-cfg-pack

Revision #4107.

Thanks again for the report.