Passing rowIndex to a window in extjs 4

Question

I have a store, a grid, a window and a few text boxes in the window. What I need is that on clicking the actioncolumn in the grid, i need to get the rowIndex of the clicked row and pass it to the window as a parameter. There, i need to load the store and get the values and set it in the appropriate textboxes. I'm not sure how to pass the rowIndex from grid to window on click. Wen I try to alert the value of a in the testfunction, it comes up as undefined. Pls help and below is my code.

Js File:

Ext.onReady(function() {
    var rIx;
    Ext.create('Ext.data.Store', {
        storeId:'employeeStore',
        fields:['firstname', 'lastname', 'senority', 'dep', 'hired'],
        data:[
            {firstname:"Michael", lastname:"Scott", senority:7, dep:"Manangement", hired:"01/10/2004"},
            {firstname:"Dwight", lastname:"Schrute", senority:2, dep:"Sales", hired:"04/01/2004"},
            {firstname:"Jim", lastname:"Halpert", senority:3, dep:"Sales", hired:"02/22/2006"},
            {firstname:"Kevin", lastname:"Malone", senority:4, dep:"Accounting", hired:"06/10/2007"},
            {firstname:"Angela", lastname:"Martin", senority:5, dep:"Accounting", hired:"10/21/2008"}
        ]
    });

    Ext.create('Ext.grid.Panel', {
        title: 'Employee Data',
        store: Ext.data.StoreManager.lookup('employeeStore'),
        columns: [
            { text: 'First Name',  dataIndex: 'firstname' },
            {
                header: 'Button',
                xtype: 'actioncolumn',
                icon : 'test.png',
                handler: function(grid, rowIndex, colIndex, item, e , record) {
                    rIx=rowIndex;
                    //var rec = grid.getStore().getAt(rowIndex);
                    //alert("Edit " + rec.get('firstname'));
                    Ext.create('MyWindow').show();
                }
            }

        ],

        width: 500,
        renderTo: Ext.getBody()
    });

    var testFunction = function(a){alert("a= "+a);

         var r = Ext.data.StoreManager.lookup('employeeStore').getAt(a);
         var firstname = r.get('firstname');
         Ext.getCmp('fname').setValue(firstname);   
     };

    Ext.define('MyWindow', {
        extend: 'Ext.window.Window',
        store : Ext.data.StoreManager.lookup('employeeStore'),
        height: 250,
        width: 250,
        title: 'My Window',
        items: [
                     {
                        xtype: 'textfield',           
                        id : 'fname',
                        fieldLabel:'Name'
                     }

                 ],
        listeners: {
                      afterrender: Ext.Function.pass(testFunction, [rIx])
                }
        });

});

wantok wantok · Accepted Answer · 2013-03-13T12:29:31

Ext.Function.pass(testFunction, [rIx]) takes the current value of rIx when pass is executed. The method is being called long before rIx is ever set to anything meaningful. Javascript is a pass-by-value language. It doesn't matter that eventually rIx gets set to the row index. By that point Ext.Function.pass has already been executed and the parameter it passed in was undefined.

Another approach is to just push the rowIndex onto your window as a property.

Ext.create('Ext.grid.Panel', {
    title: 'Employee Data',
    store: Ext.data.StoreManager.lookup('employeeStore'),
    columns: [
        { text: 'First Name',  dataIndex: 'firstname' },
        {
            header: 'Button',
            xtype: 'actioncolumn',
            icon : 'test.png',
            handler: function(grid, rowIndex, colIndex, item, e , record) {
                Ext.create('MyWindow', {rIx: rowIndex}).show();
            }
        }

    ],
    width: 500,
    renderTo: Ext.getBody()
});

Ext.define('MyWindow', {
    extend: 'Ext.window.Window',
    store : Ext.data.StoreManager.lookup('employeeStore'),
    height: 250,
    width: 250,
    title: 'My Window',
    items: [
        {
            xtype: 'textfield',           
            id : 'fname',
            fieldLabel:'Name'
        }
    ],
    listeners: {
        afterrender: function(win){
            alert("idx= " + win.rIx);
            var r = Ext.data.StoreManager.lookup('employeeStore').getAt(win.rIx);
            var firstname = r.get('firstname');
            Ext.getCmp('fname').setValue(firstname);   
        }
    }
});

Another option is to setup the window's afterrender listener in your handler function instead of adding it in the window's class definition. This approach is a bit cleaner in my opinion. I'm not a big fan of adding unrelated state properties to components.

Ext.create('Ext.grid.Panel', {
    title: 'Employee Data',
    store: Ext.data.StoreManager.lookup('employeeStore'),
    columns: [
        { text: 'First Name',  dataIndex: 'firstname' },
        {
            header: 'Button',
            xtype: 'actioncolumn',
            icon : 'test.png',
            handler: function(grid, rowIndex, colIndex, item, e , record) {
                var win = Ext.create('MyWindow');
                // add the listener after to avoid bashing any listener config
                // that may already exist for the window.
                win.on('afterrender', function() {
                    // rowIndex is available in the closure
                    alert("idx= " + rowIndex);
                    var r = Ext.data.StoreManager.lookup('employeeStore').getAt(rowIndex);
                    var firstname = r.get('firstname');
                    Ext.getCmp('fname').setValue(firstname);
                });
                win.show();
            }
        }

    ],
    width: 500,
    renderTo: Ext.getBody()
});

Passing rowIndex to a window in extjs 4

1 Answers