Change Grid Column Config in Subclass

[froamer]

OK, So we all know the ability to add custom extensions is on the roadmap (woo hoo!)

In the meantime, I need to use unsupported column types in grids. In particular I am trying to get Ext.ux.grid.CheckboxColumn to work (http://www.extjs.com/forum/showthrea...CheckboxColumn).

So I have added a placeholder column as the first in my grid within Ext Designer and I am trying to replace it with an Instance of Ext.ux.grid.CheckboxColumn within the initComponent method of my subclass...

    initComponent: function() {
        MemberForm.superclass.initComponent.call(this);
        
        this.industryApprovalsGrid.selModel = new Ext.grid.RowSelectionModel();
        this.industryApprovalsGrid.clicksToEdit = 1;
        this.industryApprovalsGrid.colModel.config[0] = new Ext.ux.grid.CheckboxColumn({
            dataIndex: 'selected',
            width:20,
            editable:true
        }); 

This renders my column OK but the column can't be edited. I tried setting the column to a standard one...

    initComponent: function() {
        MemberForm.superclass.initComponent.call(this);
        
        this.tabs.bodyStyle = this.tabBodyStyle;
        this.contactsGrid.selModel = new Ext.grid.RowSelectionModel();
        this.contactsGrid.clicksToEdit = 1;
        
        this.industryApprovalsGrid.colModel.config[0] = new Ext.grid.Column({
            xtype: 'booleancolumn',
            dataIndex: 'selected',
            editable: true
        }); 

But that can't be edited either. My grid is an Editor Grid and the untouched columns edit OK. Also if I comment out my code the column I am replacing is editable. If I place console.log in the editor code of the Ext.ux.grid.CheckboxColumn I never see it so it looks like my approach to replacing the column is preventing it from editing.

So is there a better way of doing this? Has anyone else managed to replace a grid column without sacrificing editing?

[jarrednicholls]

Hey froamer,

Did you read the second posting on the CheckboxColumn thread? http://www.extjs.com/forum/showthrea...869#post436869 Just wondering if you patched the code to create a proper GridEditor instance. Without that, it'd definitely be broken.

[froamer]

Hi Jarred,

Yes I patched it, but my second test (second block of code) reproduces the problem with a booleancolumn and therefore eliminates Ext.ux.grid.CheckboxColumn as a factor.

[jarrednicholls]

The CheckboxColumn ux creates an editor in its constructor. The booleancolumn is not specifying an editor config. Have you tried that?

[froamer]

Thanks Jarred,

I tried that, but no difference. I have broken it down into a simple test case. Attached is a project file. Load and export this then edit the MyGrid.js so it looks lik this...

MyGrid = Ext.extend(MyGridUi, {
    initComponent: function() {
        MyGrid.superclass.initComponent.call(this);
        // sample static data for the store
        var myData = [
            ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
            ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
            ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
            ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
            ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am']
        ];
        this.getStore().loadData(myData);
        this.selModel = new Ext.grid.RowSelectionModel();
        this.clicksToEdit = 1;

        //replace column 1 only if ?replace is in the URL
        if(window.location.href.substr(-7) === "replace") {
            this.colModel.config[0] = new Ext.grid.Column({
                header:'Replaced',
                dataIndex: 'company',
                width:100,
                editable:true,
                editor: {
                    xtype: 'textfield'
                }
            });
        }

        //button event handling, reload the page with or without column replacement
        this.replaceButton.on('click',function(){
            window.location = 'xds_index.html?replace';
        });

        this.keepButton.on('click',function(){
            window.location = 'xds_index.html';
        });

    }
}); 

Browse to the generated xds_index.html and note you can edit the first column. Now click the first button, the page reloads but this time the column replacement code runs and you can no longer edit the first column.

I hope that helps.

[jarrednicholls]

After setting the column, the column model needs to be reconfigured. See bold below:

MyGrid = Ext.extend(MyGridUi, {
    initComponent: function() {
        MyGrid.superclass.initComponent.call(this);
        // sample static data for the store
        var myData = [
            ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
            ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
            ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
            ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
            ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am']
        ];
        this.getStore().loadData(myData);
        this.selModel = new Ext.grid.RowSelectionModel();
        this.clicksToEdit = 1;

        //replace column 1 only if ?replace is in the URL
        if(window.location.href.substr(-7) === "replace") {
            this.colModel.config[0] = {
                xtype: 'gridcolumn',
                header:'Replaced',
                dataIndex: 'company',
                width:100,
                editor: {
                    xtype: 'textfield'
                }
            };
            this.colModel.setConfig(this.colModel.config, true);
        }

        //button event handling, reload the page with or without column replacement
        this.replaceButton.on('click',function(){
            window.location = 'xds_index.html?replace';
        });

        this.keepButton.on('click',function(){
            window.location = 'xds_index.html';
        });

    }
});

[froamer]

Many thanks Jarred,

this not only got my simple usage case working but also solved my problem with the Ext.ux.grid.CheckboxColumn!

For onlookers, you don't need to specify the editor as in the code above, resetting the column model config does the trick.