CommandColumn

[Rod]

Hello.
While I greatly appreciate the GridPanel, I feel like losing time when I have to add a custom column with an icon by coding the renderer, then the whole cellClick stuff to find which column/row did the call (I know that's not that much to do, but still :()
Is there any possibility to add something like a CommandColumn, that would let us precise the function it calls (with record and evetually target as arguments), be bindable against a boolean to enable/disable it, and accept icons (for both state) or text and a custom tooltip.
This is quite a common scenario and doing that would imo make it easier.
Sry if I'm asking too much, but would love to have something like that in a future release.
Anyway even without that, your work is still awesome, ty :)

[geoffrey.mcgill]

Hi Rod,

Thanks for the suggestion.*


Any chance you could provide us with some simplified code samples demonstrating both what you currently have to do and then also mocking up the code demonstrating how you would like to see it work.


This would help us immensly in visualizing exactly what you have in mind.*

[Rod]

Let's suppose I have this code for now :

<ext:GridPanel runat="server" ID="GridPanel1" StoreID="Store1" >
  <ColumnModel ID="ColumnModel1" runat="server">
   <Columns>
    <ext:RowNumbererColumn />
    <ext:Column ColumnID="Administrateur" Header="Nom complet" DataIndex="LastName" Sortable="true">
     <Renderer Handler="return ''+record.data['NomAdministrateur']+', '+record.data['PrenomAdministrateur']" />
    </ext:Column>
    <ext:Column ColumnID="Details" Header="Details" Width="50" Align="Center" Fixed="true"
     MenuDisabled="true" Resizable="false">
     <Renderer Fn="administrateurDetailsRender" />
    </ext:Column>
    <ext:Column ColumnID="Delete" Header="Supprimer" Width="50" Align="Center" Fixed="true"
     MenuDisabled="true" Resizable="false">
     <Renderer Fn="administrateurDeleteRender" />
    </ext:Column>
   </Columns>
  </ColumnModel>
  <Listeners>
   <CellClick Fn="cellClick" />
  </Listeners>
 </ext:GridPanel>

<script type="text/javascript">
    var administrateurDetailsRender = function() {
        return '<img class="imgEdit" ext:qtip="random custom tool tip" style="cursor:pointer;" src="/App_Themes/Phototheque/Icones/vcard_edit.png" />';
    }
    var administrateurDeleteRender = function() {
        return '<img class="imgEdit" ext:qtip="random custom tool tip" style="cursor:pointer;" src="/App_Themes/Phototheque/Icones/bin.png" />';
    }
    var cellClick = function(grid, rowIndex, columnIndex, e) {
        var t = e.getTarget();
        var record = grid.getStore().getAt(rowIndex);  // Get the Record
        var columnId = grid.getColumnModel().getColumnId(columnIndex); // Get column id
        if (t.className == 'imgEdit' &amp;&amp; columnId == 'Details') {
            openAdministrateurDetails(record, t);
        }
         if (t.className == 'imgEdit' &amp;&amp; columnId == 'Delete') {
            confirmDelete(record, t);
        }
    }  
    var confirmDelete = function (record, animTrg) {
        administrateurRecord = record;
        Ext.Msg.show({
            title: '<img alt=\'Suppression\' src=\'/App_Themes/Phototheque/Icones/user_delete.png\' /> Suppression',
            msg: String.format('Etes-vous sûr de vouloir supprimer {0} {1}?', record.data['PrenomAdministrateur'] , record.data['NomAdministrateur']),
            buttons: Ext.Msg.YESNO,
            fn: processResult,
            icon: Ext.MessageBox.QUESTION,
            animateTarget: animTrg
        });
    }  </script>

<script type="text/javascript">
    var administrateurRecord;
    
    var openAdministrateurDetails = function (record, animTrg) {
        administrateurRecord = record;
        var window = <%= AdministrateurDetailswindow.ClientID %>;
        window.setTitle(String.format('Détails de l\'administrateur : {0}, {1}',record.data['NomAdministrateur'],record.data['PrenomAdministrateur']));
        
        <%= AdministrateurID1.ClientID %>.setValue(record.id);
        
        //  Détails
        <%= PrenomAdministrateur.ClientID %>.setValue(record.data['PrenomAdministrateur']);
        <%= NomAdministrateur.ClientID %>.setValue(record.data['NomAdministrateur']);
        <%= EmailAdministrateur.ClientID %>.setValue(record.data['EmailAdministrateur']);
        <%= CompteAdministrateurActif.ClientID %>.setValue(record.data['CompteAdministrateurActif']); 
        
        window.show(animTrg);
    }</script>

I would like to be able to define something like this instead :

 <ext:GridPanel runat="server" ID="GridPanel1" StoreID="Store1" >
  <ColumnModel ID="ColumnModel1" runat="server">
   <Columns>
    <ext:RowNumbererColumn />
    <ext:Column ColumnID="Administrateur" Header="Nom complet" DataIndex="LastName" Sortable="true">
     <Renderer Handler="return ''+record.data['NomAdministrateur']+', '+record.data['PrenomAdministrateur']" />
    </ext:Column>
    <ext:CommandColumn ColumnID="Details" Header="Details" Width="50" Align="Center" Fixed="true"
     MenuDisabled="true" Resizable="false">
     <Command Fn="openAdministrateurDetails" activeIconUrl="/App_Themes/Phototheque/Icones/vcard_edit.png" />
     <AjaxEvent />
     <Listeners />
    </ext:Column>
    <ext:CommandColumn ColumnID="Delete" Header="Supprimer" Width="50" Align="Center" Fixed="true"
     MenuDisabled="true" Resizable="false">
     <Command Fn="confirmDelete" activeIconUrl="/App_Themes/Phototheque/Icones/bin.png" 
      inactiveIconUrl="/App_Themes/Phototheque/Icones/bin_off.png" Enabled='<%#Eval("IsActive")%>'
      activeToolTip="Delete" inactiveToolTip="You can\'t delete him!" />
    </ext:Column>
   </Columns>
  </ColumnModel>
 </ext:GridPanel>

<script type="text/javascript">
    var confirmDelete = function (record, animTrg) {
        Ext.Msg.show({
            title: '<img alt=\'Suppression\' src=\'/App_Themes/Phototheque/Icones/user_delete.png\' /> Suppression',
            msg: String.format('Etes-vous sûr de vouloir supprimer {0} {1}?', record.data['PrenomAdministrateur'] , record.data['NomAdministrateur']),
            buttons: Ext.Msg.YESNO,
            fn: processResult,
            icon: Ext.MessageBox.QUESTION,
            animateTarget: animTrg
        });
    }

    var administrateurRecord;
    
    var openAdministrateurDetails = function (record, animTrg) {
        administrateurRecord = record;
        var window = <%= AdministrateurDetailswindow.ClientID %>;
        window.setTitle(String.format('Détails de l\'administrateur : {0}, {1}',record.data['NomAdministrateur'],record.data['PrenomAdministrateur']));
        
        <%= AdministrateurID1.ClientID %>.setValue(record.id);
        
        //  Détails
        <%= PrenomAdministrateur.ClientID %>.setValue(record.data['PrenomAdministrateur']);
        <%= NomAdministrateur.ClientID %>.setValue(record.data['NomAdministrateur']);
        <%= EmailAdministrateur.ClientID %>.setValue(record.data['EmailAdministrateur']);
        <%= CompteAdministrateurActif.ClientID %>.setValue(record.data['CompteAdministrateurActif']); 
        
        window.show(animTrg);
    }
 </script>

Plz let me know if the explanation is not good enough.

[Rod]

Any feedback?
I'm really interested in knowing if it's something you might implement in a near/far future, or if there is simply no way you could do that.
Ty :)

[Timothy]

You mean something like the following?

Demo: http://rowactions.extjs.eu/

Posting: http://www.extjs.com/forum/showthread.php?t=29961

Cheers,
Timothy

[Rod]

I'll try to look at the markup, but I guess that's it. Thx for pointing this.

[Timothy]

Rod (10/27/2008) I'll try to look at the markup, but I guess that's it. Thx for pointing this.

Just pointing out the functionality exists, might help paint a picture for Geoffrey. Would be an awesome feature to have integrated with the GridPanel ;)

Cheers,
Timothy

[Rod]

That's exactly it, but then the cellactions and the recordform are also quite interesting :p
http://extjs.eu/#extension-2

Great link Tim ty.