get a row from a grid ExtJs 4

Question

I think it's very simple to answer to this question:

I have simple grid with my custom store:

//other code
{
    xtype: 'grid',
    store: 'SecondStore',
    itemId: 'mainTabPanel2',
    columns: [
        //this is not from the store
        {
            header: 'Not Form Store',
            id: 'keyId2',
        },
        //from the store
        {
            header: 'From Store',
            dataIndex: 'label',
            id: 'keyId',
        }
    ]
}

the store only populate the second column with id: keyId. In fact it have:

fields: [{ name: 'label' }]

And this work well.

I want to get from a function the row n°1 of this grid.

handler: function() {
    var grid = Ext.ComponentQuery.query('grid[itemId="mainTabPanel2"]')[0];
    //var row= get row(1) <- i don't know how to get the complete row
}

I'm working with ExtJs 4 so i can't get it with the command grid.getView().getRow(1);

I can't get it from the store because i want to get also the content of the column with id:keyId2 that is not stored in the store, so I can't do something like:

grid.getStore().getAt(1);

Anyone know how to get the complete row in ExtJs 4? Thank you!

Answer 1

You can solve in this ExtJS 4.x using getNode: grid.getView().getNode(index)

getNode can take an HTML ID (not very useful), an index, or a store record.

Answer 2

I think you need something like this:

Ext.onReady(function () {
    var store = Ext.create('Ext.data.Store', {
        storeId: 'simpsonsStore',
        fields: ['name', 'email', 'phone'],
        data: {
            'items': [{
                'name': 'Lisa',
                "email": "[email protected]",
                "phone": "555-111-1224"
            }, {
                'name': 'Bart',
                "email": "[email protected]",
                "phone": "555-222-1234"
            }, {
                'name': 'Homer',
                "email": "[email protected]",
                "phone": "555-222-1244"
            }, {
                'name': 'Marge',
                "email": "[email protected]",
                "phone": "555-222-1254"
            }]
        },
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });

    var grid = Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [{
            text: 'Name',
            dataIndex: 'name'
        }, {
            text: 'Email',
            dataIndex: 'email',
            flex: 1
        }, {
            text: 'Phone',
            dataIndex: 'phone'
        }],
        height: 200,
        width: 400,
        renderTo: Ext.getBody()
    });

    alert(grid.getStore().getAt(1).data.name);

});

jsFiddle: http://jsfiddle.net/RftWF/

Answer 3

Get FireBug plugin and monitor the grid at 'handler'. If you see the data from the column keyId2 than you can see the way in the firebug too. i.e grid object->store object-> data array.

Can you tell us how did you add data in the column keyId2 of the grid ?

Answer 4

I've solved accesing the DOM:

   /* Get Dom of the first grid */
   var DOMgrid = Ext.select('#'+gridview.getId());
   var gridChild = DOMgrid.elements[0].children[1].children[0].children;

Then you should get the "children" you are interested to simply following the DOM structure.

You can also get the singleton flyweight element applying the Ext.fly() comand and update the content with the update() comand:

 Ext.fly(/*DOM object here*/).update(/*raw content here*/)