Clever Geek Handbook

Get row from ExtJs 4 grid

I think it is very simple to answer this question:

I have a simple grid with my custom storage:

//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 populates the second column id: keyId. This is actually:

fields: [{ name: 'label' }]

And this job is good.

I want to get from a function row n ° 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 am working with ExtJs 4, so I cannot get it using the command grid.getView().getRow(1);

I cannot get it from the store because I want to get also the content of the column with id: keyId2, which is not stored in the store, so I cannot do something like:

grid.getStore().getAt(1);

Does anyone know how to get a complete string in ExtJs 4? Thank!

+3


source to share


4 answers


I decided to use 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" that interest you simply by following the DOM structure.



You can also get a single flyweight element with the command Ext.fly()

and update the content with the command update()

:

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


source


In this ExtJS 4.x can be solved using getNode

:grid.getView().getNode(index)



getNode

can accept HTML (not very useful), index, or store write.

+3


source


I think you want something like this:

Ext.onReady(function () {
    var store = Ext.create('Ext.data.Store', {
        storeId: 'simpsonsStore',
        fields: ['name', 'email', 'phone'],
        data: {
            'items': [{
                'name': 'Lisa',
                "email": "lisa@simpsons.com",
                "phone": "555-111-1224"
            }, {
                'name': 'Bart',
                "email": "bart@simpsons.com",
                "phone": "555-222-1234"
            }, {
                'name': 'Homer',
                "email": "home@simpsons.com",
                "phone": "555-222-1244"
            }, {
                'name': 'Marge',
                "email": "marge@simpsons.com",
                "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/

+1


source


Get the FireBug plugin and control the mesh in the "handler". If you see the data from the keyId2 column, you can also see the path in firebug. ie grid object-> store object-> data array.

Can you tell us how you added the data to the keyId2 column of the grid?

0


source






More articles:


All Articles