1. #1
    Sencha Premium Member froamer's Avatar
    Join Date
    Sep 2007
    Location
    London, UK
    Posts
    103
    Vote Rating
    2
    froamer is on a distinguished road

      0  

    Default Change Grid Column Config in Subclass

    Change Grid Column Config in Subclass


    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...
    PHP Code:
        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...
    PHP Code:
        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',
                
    editabletrue
            
    }); 
    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?

  2. #2
    Sencha - Desktop Packager Dev Team jarrednicholls's Avatar
    Join Date
    Mar 2007
    Location
    Frederick, MD
    Posts
    1,747
    Vote Rating
    7
    jarrednicholls will become famous soon enough jarrednicholls will become famous soon enough

      0  

    Default


    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.

  3. #3
    Sencha Premium Member froamer's Avatar
    Join Date
    Sep 2007
    Location
    London, UK
    Posts
    103
    Vote Rating
    2
    froamer is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha - Desktop Packager Dev Team jarrednicholls's Avatar
    Join Date
    Mar 2007
    Location
    Frederick, MD
    Posts
    1,747
    Vote Rating
    7
    jarrednicholls will become famous soon enough jarrednicholls will become famous soon enough

      0  

    Default


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

  5. #5
    Sencha Premium Member froamer's Avatar
    Join Date
    Sep 2007
    Location
    London, UK
    Posts
    103
    Vote Rating
    2
    froamer is on a distinguished road

      0  

    Default


    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...
    PHP Code:
    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.
    Attached Files

  6. #6
    Sencha - Desktop Packager Dev Team jarrednicholls's Avatar
    Join Date
    Mar 2007
    Location
    Frederick, MD
    Posts
    1,747
    Vote Rating
    7
    jarrednicholls will become famous soon enough jarrednicholls will become famous soon enough

      0  

    Default


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

    Code:
    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';
            });
    
        }
    });

  7. #7
    Sencha Premium Member froamer's Avatar
    Join Date
    Sep 2007
    Location
    London, UK
    Posts
    103
    Vote Rating
    2
    froamer is on a distinguished road

      0  

    Default


    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.

Similar Threads

  1. Ext.ux.ProgressColumn - a Column subclass to display progress bars in grid cells.
    By Animal in forum Ext 3.x: User Extensions and Plugins
    Replies: 38
    Last Post: 16 Jun 2012, 6:22 PM
  2. Is there a wrap config option for a grid column?
    By gskluzacek in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 9 Mar 2010, 3:11 PM
  3. grid change column colour
    By elona in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 5 Oct 2009, 5:43 AM
  4. Grid column Header change
    By Trinad in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 1 Jun 2009, 6:13 PM
  5. [Solved]change column color of single row(grid column names row)
    By amey7p in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 14 Feb 2008, 3:52 AM

Thread Participants: 1