Grid CellActions Plugin

[jsakalos]

Beta2 is out.

Changes:
Code is now using XTemplate resulting in much shorter and cleaner code and better cross-browser compatibility.

Enjoy!

[Lucian]

Great job, Saki!...

Sorry for that question , but what if I need to handle multiple events on a single icon?...

[jsakalos]

There is only one event (well two: beforeaction and action) for an icon. However, if you bind your icon (action) to the store you cannot say in advance what iconCls (action) it gets. In that case:

actionEventHanler = function(grid, record, action, value, row, col) {
    switch(action) {
        case 'icon-save':
            // ...
        break;

        case 'icon-load':
            // ...
        break;

        // ...
    } 
} 

[jsakalos]

Analyzing the example at http://cellactions.extjs.eu should also help you. Event handler just popup toast windows but it is in.

[mabello]

Dear jsakalos,

I have not used the plugin yet, but I've checked the code and it's simple and clear, very nice idea. Thanks for sharing.
Regards
Marco

[border9]

im having a little bit of an issue with this plugin on more then one grid inside of a tabbed system.

this.view.mainBody has no properties
Line 186

this.view.mainBody.on(cfg);

This happens when i try to put this plugin on more then one Grid inside of a Tabbing system. Any ideas?

I have:

var truckloadGrid = new Ext.grid.GridPanel({
   loadMask: true,
   ds: truckloadStore,
   sm: sm2,
   columns: [
      sm2,
     {header: "Num #", 
    width: 8, 
    sortable: true, 
    renderer:  function(quote) {
      return '<a href="php/quotes/admin_truckloadquotes.php?id=' + quote + '" target="truckloadquote">' + quote + '</a>';
     }},
     {header: "First / Last Name",
        width: 22 ,
        renderer: function(value, metadata, record) {
        return String.format("{0} {1}", record.data.fname, record.data.lname);
       }
      },
     {header: "Phone Number", width: 22 , sortable: true, dataIndex: 'phonenum'},
     {header: "Email Address", width: 22, dataIndex: 'email' },
     {header: "Date Time Recieved", width: 17 , sortable: true, renderer: Ext.util.Format.dateRenderer('Y-m-d h:i:s a'), dataIndex: 'timerecieved'},
     {header: "Customer Type", width: 22, dataIndex: 'customertype' },
  {header: "Site Recieved From", width: 22, dataIndex: 'websitesubmit' },
     {header: "Admin", width: 8 , dataIndex: 'delquote' ,cellActions:[{
                                                iconCls:'icon-plus',
                                                qtip:'Update Quote',
                                                style:'background-color:#f0f0f0;'
                                        },{
                                                iconCls:'icon-minus',
                                                qtip:'Delete Quote'
                                         }]}
         ],
     stripeRows: true,
     autoHeight: false,
     viewConfig: {
     forceFit: true
     },
     border: false,
     bbar: new Ext.PagingToolbar({
           pageSize: 20,
           store: truckloadStore,
           displayInfo: true,
           displayMsg: 'Displaying Quotes {0} - {1} of {2}',
           emptyMsg: "No Quotes to display"
    }),
    plugins:[new Ext.ux.grid.Search({
             mode:'local'
            ,iconCls:false
            ,dateFormat:'Y-m-d H:i:s'
            ,minLength:2
            ,align:'left'
        }), this.cellActions, checkColumn2]
});

3 Grids that look like this slightly diffrent depending on the fields needed.

[jsakalos]

Please re-download and let me know it it works. I haven't changed version yet but zip file is patched.

[border9]

I reinstalled with the patched one and its still throwing the same error.

Right know it works on 2, but not on anymore then 2 grids in a Tabbing system, when you try to do it on 2+ is when it throws the error, so right now im just leaving it out of the other 4 tabs until the error is resolved. Thanks ill keep an eye out on here for a fix.

[jsakalos]

I cannot fix it more as now the event is installed latest it can be: from grid.afterRender function sequence. Do you lazy instantiate your grids? Any simplified copy&paste&run showcase?

[jsakalos]

One more remark: Any colliding ids?