[CLOSED] ImageCommandColumn

  1. #1

    [CLOSED] ImageCommandColumn

    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>
    Last edited by Daniil; Jun 20, 2012 at 11:04 AM. Reason: [CLOSED]
  2. #2
    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/#!...lumn-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";
  3. #3
    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>
  4. #4
    Quote Originally Posted by cwolcott View Post
    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.

    Quote Originally Posted by cwolcott View Post
    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.
  5. #5
    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.
  6. #6
    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/#!...r.Box-cfg-pack

    Revision #4107.

    Thanks again for the report.

Similar Threads

  1. [CLOSED] ImageCommandColumn Issues
    By randy85253 in forum 1.x Legacy Premium Help
    Replies: 13
    Last Post: Jun 28, 2010, 7:49 AM
  2. ImageCommandColumn
    By gisxiaowei in forum 1.x Help
    Replies: 3
    Last Post: Aug 26, 2009, 4:46 PM
  3. [CLOSED] GridPanel and ImageCommandColumn...
    By state in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Aug 03, 2009, 5:40 PM
  4. [CLOSED] ImageCommandColumn bug
    By alexp in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 03, 2009, 11:15 AM

Posting Permissions