[1.0] Grid RowActions Plugin

[Margusja]

I think no. I tried with different browsers.

Full code:

Ext.BLANK_IMAGE_URL = '/public/ext/resources/images/default/s.gif';

var Checkbox = new Ext.grid.CheckboxSelectionModel();

this.action = new Ext.ux.grid.RowActions({
    header: 'Actions',
    keepSelection:true
    ,actions:[
    {
        iconCls:'add-icon',
        tooltip:'Maksa'
    }]
});

this.action.on({
    action:function(grid, record, action, row, col) {
    Ext.ux.Toast.msg('Event: action', 'You have clicked row: <b>{0}</b>, action: <b>{1}</b>, username: <b>'+record.data.name+'</b>', row, action, col);
    console.log(record.data);
    if (action == 'add-icon') {
        window.location = './email_forwards.php?name='+record.data.name;
    }
    else if (action == 'delete-icon') {
        uid = record.data.name;
        Ext.MessageBox.confirm('Kustutamine', 'Oled sa kindel?', emaildelete );       
    }
    }
});

var compareStore = new Ext.data.Store({
    id: 'compareStore',
    proxy: new Ext.data.HttpProxy({
    url: 'getlist',
        method: 'POST'
    }),
    autoLoad: true,
    autoDestroy:false,
    reader: new Ext.data.JsonReader({
       // root: 'results'
    },[
        {name: 'kliendi_nimi', type: 'string', mapping: 'kliendi_nimi'},
        {name: 'artiklid', type: 'string', mapping: 'artiklid'},
        {name: 'kokku', type: 'string', mapping: 'kokku'},
        {name: 'maksja', type: 'string', mapping: 'maksja'},
        {name: 'selgitus', type: 'string', mapping: 'selgitus'},
        {name: 'summa', type: 'string', mapping: 'summa'}
    ]),
    sortInfo: {field: 'kliendi_nimi', direction: 'ASC'}
});

var compareColumnModel =
    [
    this.action,
    {header: 'Klient', dataIndex: 'kliendi_nimi', width: 150, sortable: true},
    {header: 'Selgitus', dataIndex: 'artiklid', width: 300, sortable: true},
    {header: 'Hind', dataIndex: 'kokku', width: 50, sortable: true},
    {header: 'Maksja', dataIndex: 'maksja', width: 100, sortable: true},
    {header: 'Selgitus', dataIndex: 'selgitus', width: 300, sortable: true},
    {header: 'Laekunud summa', dataIndex: 'summa', width: 100, sortable: true}
    //renderer:function(value){return '<div id="maht"><img src="img/valge.gif" width="'+value+'" height="7" /></div>'}},
    ];

Ext.onReady(function() {
    Ext.QuickTips.init();

    var listGrid = new Ext.grid.EditorGridPanel({
        id: 'listGrid',
        store: compareStore,
        columns: compareColumnModel,
        renderTo: 'compare',
        stripeRows: true,
        autoHeight: true,
        plugins: this.action,
        frame: false,
        trackMouseOver: true
    });

})

line in css: .add-icon {background-image:url('/public/img/add_icon.gif') !important;}

And paths are ok
Monday If I have time I can put my solution online then you can check it

[Strati]

UPDATE: ok, i just found that there a newer version with ext3 compatibility, i misunderstood this:

The final solution would be if RowActions extended Ext.grid.Column. I'll do that when porting the plugin fully to Ext 3.

hi jskalos!

i'm using your plugin, it's very useful
but...
after upgrading ext to v3, it broke this plugin.
first, the column has rendered, but the content was a random of the other column's data.
i couid fix it by removing these lines from init() function:

        // body click handler
        var view = grid.getView();
        var cfg = {scope:this};
        cfg[this.actionEvent] = this.onClick;
        grid.on({
            render:{scope:this, fn:function() {
                view.mainBody.on(cfg);
            }}
        });

        // setup renderer
        if(!this.renderer) {
            this.renderer = function(value, cell, record, row, col, store) {
                cell.css += (cell.css ? ' ' : '') + 'ux-row-action-cell';
                return this.tpl.apply(this.getData(value, cell, record, row, col, store));
            }.createDelegate(this);
        }

        // actions in grouping grids support
        if(view.groupTextTpl && this.groupActions) {
            view.interceptMouse = view.interceptMouse.createInterceptor(function(e) {
                if(e.getTarget('.ux-grow-action-item')) {
                    return false;
                }
            });
            view.groupTextTpl = 
                 '<div class="ux-grow-action-text">' + view.groupTextTpl +'</div>' 
                +this.processActions(this.groupActions, this.tplGroup).apply()
            ;
        }

and adding it as an object property:

    ,getData:function(value, cell, record, row, col, store) {
        return record.data || {};
    } // eo function getData
    // }}}
    // {{{
    
    ,renderer: function(value, cell, record, row, col, store) {
        cell.css += (cell.css ? ' ' : '') + 'ux-row-action-cell';
        return this.tpl.apply(this.getData(value, cell, record, row, col, store));
    }

then the icons rendered correctly, but the columns size doesn't correct...

the calculated value in init() is ok, but it doesn't have any effect

        // calculate width
        if(this.autoWidth) {
            this.width =  this.widthSlope * this.actions.length + this.widthIntercept;
            console.log( this.width );
            this.fixed = true;
        }

do you know what could be the problem?
thank you!

[jeffcirceo]

Thanks for posting your code I got RowActions working in ext 3.

I also had the same column width issue and resolved it by setting the width manually instead of using the autowidth

I added the width value after autoWidth and now every thing looks fine

,autoWidth:true
,width:25

I don't think this is a permenant solution but it works for now.

[jsakalos]

Hey guys!

Don't know which version are you running but http://rowactions.extjs.eu runs against the latest SVN trunk (Ext 3.0+) w/o problems. Sure you can modify the code, but why to endlessly fork if the basic version works?

[Joel]

Rowactions doesn't work with Adobe Air due to it relying on XTemplates. And yes I know that Ext doesn't work with Air unless you precompile the templates. I didn't want do that for various reasons (mainly cause we have so many and I'd have to determine each of the templates in advance) and came up with this work around. I'm sure this could be improved and as I said you could just pre-compile the templates instead.

Turns out in Air you can actually use eval and create new functions etc as long as you do it in a non-application sand box. There is another post on this forum (can't find link atm) where someone puts the entire app inside the non-app sandbox and uses a bridge to access the Air API's. It's not a very good solution because of the way the Adobe sand box works and you have to change the ext-air-debug file a lot. So all I did was put the template construction inside the sandbox.

First you create an iframe containing the non-application sandbox like so:

<iframe id="TemplateSpace"
    src="template.html"
    sandboxRoot="http://www.example.com.au/"
    documentRoot="app:/"
    allowCrossDomainXHR="yes"
    scrolling="0"
    width="100%"
    height="100%">
</iframe>

Then you reference the childSandboxBridge and register your functions:

window.getRowActionTemplateData = document.getElementById('TemplateSpace').contentWindow.childSandboxBridge.getRowActionTemplateData;

The template.html file loads the ext library and contains a javascript function to compile the templates:

    window.childSandboxBridge = {
        getRowActionTemplateData : function (tpl, acts, data) {

            // The passed array will actually be of type [object ScriptBridgeProxy] instead
            // of [object Array] which Ext expects.
            var newActs = [];
            for (var i = 0, len = acts.length; i < len; i++){
                newActs.push(acts[i]);
            };
    
            try {
                var xt = new Ext.XTemplate(tpl);
                var actHtml = xt.apply({actions: newActs});
                var tpl2 = new Ext.XTemplate(actHtml);                    
                var html = tpl2.apply(data);
            } catch (e) {
                alert(e);
            }    
            return html;
        }
        
    };

This code takes the template text (ie: before it would be rendered by the template) and applies the actions and the data to it and returns the resultant html. It is basically doing the code in rowactions at the end of processActions and the work inside the renderer.

As per my comment in the code, if you pass an array through the bridge when you call Ext.isArray it will return false. This is because Ext.isArray expects [object Array] and the array will actually return [object ScriptBridgeProxy]. Thanks a lot Adobe Air!

I also had to modify rowActions slightly so that it would call my function instead of compiling the template. So in processActions change:

var xt = new Ext.XTemplate(template || this.tplRow);
return new Ext.XTemplate(xt.apply({actions:acts}));

to

if (typeof air != 'undefined') {
    this.acts = acts;
} else {
    var xt = new Ext.XTemplate(template || this.tplRow);
    return new Ext.XTemplate(xt.apply({actions:acts}));
}

This removes the optimisation in the code as now the template will be generated each time the renderer is called. But I couldn't get the bridge to pass template objects back and forth. Possibly you could cache the template on the other side.

And in the renderer in init change it to:

cell.css += (cell.css ? ' ' : '') + 'ux-row-action-cell';
var data = this.getData(value, cell, record, row, col, store);
if (this.acts) {                    
    var html = window.getRowActionTemplateData(this.tplRow, this.acts, data);
    return html;
} else {
    return this.tpl.apply(data);
}

Now if you're thinking why didn't he just pass the template object back and forth. Well I tried that, but Adobe Air removes all sub-methods in passed objects and basically makes them useless. This is not a generic solution to templates in Ext as it's specific to RowActions but you could possibly make a generic solution. Don't have the time unfortunately!

Anyway, this 'fixes' the problem but requires modifying the RowActions code and so shouldn't be done if you don't want to enter maintenance hell when RowActions is updated!

[Stju]

Hi, Saki!
Thanks again for great plugin
On 3.0 I am getting weird behavior for icon action. On FF, Safari looks good , and works okey, but in IE, action is fired, but passed as [object String], instead of string value. Tried to cast the action parameter directly toString(), to convert it, but that doesn't seem to help.. , so the FF sees action as 'ico_o3_ruby_add' like a string as it is supposed to do, but IE as [object String]
Piece of code:

kravas_RowActions.on({
    action:function(grid, record, action, row, col){

          switch(action){
              case('ico_o3_ruby_add'):
               //do stuff
                 });
                  break;
            }
    }
});

Any help would be greatly appreciated!
Stju

[jsakalos]

@Joel, first of all thank you very much for your elaborated explanation of Template@Air problems and solutions. Second, your modifications seem harmless so post please also surrounding code with your modifications in red. Then I'll test it in the non-Air environment and if nothing turns broken I'll incorporate your changes into the main code.

[jsakalos]

@Stju, no idea so far... Any other IE user has this problem?

[knt]

Hi - When I change the 'Actions' column width (small column size) , I get the error 'Permission denied to access property 'dom' from a non-chrome context'. What can I do beside making it not re-sizable? Thanks.

[Joel]

Okay Saki, if you want to add this in that would be cool. The catch is though it assumes the developer has created the iframe correctly and that their bridge function is called getRowActionTemplateData. You could probably set this as a config option. ie:

{
  templateBridgeFunc: 'getRowActionTemplateData'
}

and then call window[this.templateBridgeFunc](...)

But anyway, here is the code I modified, this should give enough context I hope.

this.renderer = function(value, cell, record, row, col, store) {
  cell.css += (cell.css ? ' ' : '') + 'ux-row-action-cell';
  var data = this.getData(value, cell, record, row, col, store);
  if (typeof air != 'undefined' && this.acts) {
    // we're using Adobe Air and we have a template sandbox to create our template 
    var html = window.getRowActionTemplateData(this.tplRow, this.acts, data);
    return html;
  } else {
    return this.tpl.apply(data);
  }
}.createDelegate(this);

and

    if (a.iconIndex && this.iconIndexes.indexOf(a.iconIndex) == -1) {
       this.iconIndexes.push(a.iconIndex);
    }
     acts.push(o);

}, this); // eo actions loop
        
        
if (typeof air != 'undefined') {
  this.acts = acts; // save the actions for later so we can get them converted through the tempate security sandbox
} else {
  var xt = new Ext.XTemplate(template || this.tplRow);
  return new Ext.XTemplate(xt.apply({actions:acts}));
}