javascriptextjssencha-touchextjs6extjs6-classic

Adding new property to Ext JS Grid column


Can I add a new unique property to gridcolumn in Ext JS? I want to use that property in some other place

{
    xtype: 'gridcolumn',
    dataIndex: 'startupPercent',
    sortable: true,
    'property': 'value', // so that i can access it later
    text: 'StartUp%'
}

Solution

  • Can I add a new unique property to gridcolumn

    Yes you can, and you use that property other place.

    In this Fiddle, I have created a demo provide a custom config and get on header click.

    CODE SNIPPET

    Ext.application({
        name: 'Fiddle',
    
        launch: function () {
            Ext.create('Ext.grid.Panel', {
                title: 'Demo',
                store: {
                    data: [{
                        name: 'Lisa',
                        email: 'lisa@simpsons.com',
                        phone: '555-111-1224'
                    }, {
                        name: 'Bart',
                        email: 'bart@simpsons.com',
                        phone: '555-222-1234'
                    }, {
                        name: 'Homer',
                        email: 'homer@simpsons.com',
                        phone: '555-222-1244'
                    }, {
                        name: 'Marge',
                        email: 'marge@simpsons.com',
                        phone: '555-222-1254'
                    }]
                },
                columns: [{
                    text: 'Name',
                    dataIndex: 'name',
                    isName: true
                }, {
                    text: 'Email',
                    dataIndex: 'email',
                    flex: 1
                }, {
                    text: 'Phone',
                    dataIndex: 'phone'
                }],
                height: 200,
                renderTo: Ext.getBody(),
                listeners: {
                    headerclick: function (ct, column, e, t, eOpts) {
                        if (column.isName) {
                            console.log(column.isName);
                        }
                    }
                }
            });
        }
    });