[1.0] Grid RowActions Plugin

[jsakalos]

What you can test with current RowActions is to install an action event handler that would take data from other fields and it would, for example, started mail client. action event handler receives record as one of the arguments so it should be easy.

[jsakalos]

Jeff,

take a look at the demo page now. It looks same as before when it loads but you can turn on grouping form Industry column menu.

Is that what you need? (Only UI is there at present, clicks do default actions of collapsing/expanding group.)

[jerrybrown5]

Saki,
My name is Jerry btw (not Jeff).

I think you took the module very far. However, to be honest I was disappointed when you said that I couldn't do this or do that. My users needed more buttons and truthfully they don't care about technology methodologies. They need buttons on grouped header rows(perhaps a delete all button), buttons on individual columns on rows (which your first version did), buttons after text on a row (eg more info) and of course grouped add/mod/del buttons (which your second version supports) buttons. Look at html tables on websites. There are buttons everywhere. Why do I have to give this up because I use Ext?

I am a big fan of the KISS programming approach but I am a bigger fan of end user perspective and complete programmatic UI control. The end user does not care about programming/technology requirements. Buttons are the user's best way to communicate their intent back to the system. They need to be everywhere!

The biggest argument that you mentioned is that you have a single event handler for all buttons. This could easily be accomplished on my version in fact it was taken off at the end. Also, you mentioned that your version is simpler to the programmer. I'm not sure that is true either since I did not eliminate the feature to have all of the buttons in one row (the simple implementation). I only added the features to place an inline button and custom button handlers.

From within a text sting output of a custom renderer, this is the how you can now place a button:

rowActions.getInline('open')

Easy as pie. Since the config actions go into a MixedCollection, you don't even need to reference an array index--but you could if you want.

You should update my library where you see that you could make something more simple, but lets only add functionality and not take it away. Let's build upon each other to put this button issue behind us once and for all.

Best regards,
Jerry Brown

[jerrybrown5]

For comparison purposes..I've enclosed screenshots and the sample implementation of Saki's last version (a single column of multiple buttons) and my enhanced version (it is the one with buttons everywhere). As you can see they are both very good and easy to implement.

Here is my implementation

     var rowActions = new Ext.ux.grid.RowActions({
         header:'Actions'
         ,autoWidth:false
         ,width:20
        ,actions:[{
            name:'open',
            iconCls:'icon-open'
            ,style:'width:15px'
            ,tooltip:'Open'
            ,listeners:{
                action:function(rowActions2, grid, record, action, row, col, iconCls){
                    alert('You clicked the open button on row '+row);
                }
            }
        },{
             iconCls:'icon-wrench'
            ,style:'width:15px'
            ,tooltip:'Configure'
            ,listeners:{
                action:function(rowActions2, grid, record, action, row, col, iconCls){
                    alert('You clicked the wrench button on row '+row);
                }
            }
        },{
            iconCls:'icon-user'
            ,tooltip:'User'
            ,style:'width:15px'
            ,listeners:{
                action:function(rowActions2, grid, record, action, row, col, iconCls){
                    alert('You clicked the user button on row '+row);
                }
            }
        }]
    });




    var grid = new xg.GridPanel({
        plugins:rowActions,
        ...
        columns: [
            rowActions,
            {
                header: 'test', width: 30, 
                renderer:function(value, cell, record, row, col, store){
                    var button=rowActions.getInline('open', value, cell, record, row, col, store);                
                    return 'inline button'+button;
                }
            },
            {id:'company',header: "Company", width: 60, sortable: true, dataIndex: 'company'}
         ...
        ],

        view: new Ext.grid.GroupingView({
            delayToggleGroup:true, /*special mode to reduce the flicker when clicking a header button*/
            forceFit:true,
            groupTextTpl:'The wonderful industry of {[values.rs[0].data.industry]}'+ rowActions.getInline('open')
        }),

      ...
    });
});

And here is Saki's.

Example.Grid = Ext.extend(Ext.grid.GridPanel, {

    // {{{
     initComponent:function() {

         // Create RowActions Plugin
         this.action = new Ext.ux.grid.RowActions({
             header:'Actions'
            ,actions:[{
                 iconIndex:'action1'
                ,qtipIndex:'qtip1'
                ,iconCls:'icon-open'
                ,tooltip:'Open'
            },{
                 iconCls:'icon-wrench'
                ,tooltip:'Configure'
                ,qtipIndex:'qtip2'
                ,iconIndex:'action2'
            },{
                 iconIndex:'action3'
                ,qtipIndex:'qtip3'
                ,iconCls:'icon-user'
                ,tooltip:'User'
                ,style:'background-color:yellow'
            }]
        });

        // dummy action event handler - just outputs some arguments to console
        this.action.on({
            action:function(grid, record, action, row, col) {
                //place if statements on the action here
                console.info('You have clicked row: ' + row + ', action: ' + action);
            }
        });

        // configure the grid
        Ext.apply(this, {
            ...
            ,columns:[
                 {id:'company',header: "Company", width: 40, sortable: true, dataIndex: 'company'}
                ...
                ,this.action /*this adds the single A/M/D column*/
            ]
            ,plugins:[this.action]
            ,viewConfig:{forceFit:true}
        }); // eo apply
        
         ...

    } 
     ...
    }}}

});

[jsakalos]

Hi Jerry,

take a look at demo page now. The group actions are fully supported including event handling.

[rekam]

Hi, and thanks for this little piece of code very useful!

just notice a CSS bug for IE6. The icons appear with a width of 2 pixel... I debugged that by adding a "width: 16px" in the RowActions.css for ux-row-action-item.

I think "min-width" isn't recognized by IE6

Well, I'm quite sure this is not the best option, but at least we can see normal icons on this browser.

Thanks and see ya!
rekam

[jsakalos]

Jerry, sorry for mistake in your name.

[jsakalos]

Hi, and thanks for this little piece of code very useful!

just notice a CSS bug for IE6. The icons appear with a width of 2 pixel... I debugged that by adding a "width: 16px" in the RowActions.css for ux-row-action-item.

I think "min-width" isn't recognized by IE6

Well, I'm quite sure this is not the best option, but at least we can see normal icons on this browser.

Thanks and see ya!
rekam

I'll fix it with ie6 specific css.

[Gunmen]

Hi Saki,

Looks interesting... in IE however... see attachment.

[jsakalos]

Hi Saki,

Looks interesting... in IE however... see attachment.

This has been fixed in css. See the demo now. (Check also group actions - you need to switch the grid to grouping mode.)