1. #1
    Sencha User
    Join Date
    Feb 2011
    Posts
    174
    Answers
    10
    Vote Rating
    1
    netemp is on a distinguished road

      0  

    Default Answered: Extending Grid giving error with initConfig()

    Answered: Extending Grid giving error with initConfig()


    We need to extend the grid component and add new properties to it.

    Below is simplified version of the code we are using for it:

    Code:
    Ext.define('Ext.pnc.Grid',{
        extend: 'Ext.grid.Panel',
        alias: 'widget.pncgrid',
        config:{
            showCountColumn:true//a new property added
        },
        constructor:function(config){
            this.initConfig(config);//This line is throwing error -> me.additionalCls is undefined on ext-all-debug.js (line 17129)
            this.callParent(arguments);
        }
    });

    Here line this.initConfig(config); is producing the error - me.additionalCls is undefined ext-all-debug.js (line 17129).

    We have extended other components too, like window, textfield etc.. and used the same approach but have never faced this error.

    The error goes off as soon as the line this.initConfig(config) is commented. But if we comment this line then how will the new properties defined in config be initialized?

    Could someone guide at this?

    Thanks in advance.

  2. All the config object does is create the get and set methods so you don't have to use it.

    Code:
    Ext.define('Ext.pnc.Grid', {
        extend: 'Ext.grid.Panel',
        alias: 'widget.pncgrid',
    
        showCountColumn: true, //a new property added
    
        getShowCountColumn : function() {
            return this.showCountColumn;
        },
    
        setShowCountColumn : function(value) {
            var me = this,
                oldValue = me.getShowCountColumn();
    
            if (me.applyShowCountColumn) {
                value = me.applyShowCountColumn(value, oldValue);
            }
    
            if (!Ext.isDefined(value)) {
                return;
            }
    
            this.showCountColumn = value;
    
            if (me.updateShowCountColumn) {
                this.updateShowCountColumn(value, oldValue);
            }
        }
    });
    That would do the same thing just without calling initConfig and you get the get and set and the set method takes advantage of the apply and update methods just like initConfig does.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,704
    Answers
    3356
    Vote Rating
    751
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    What version are you using? I am doing this test case and everything is working for me in 4.1.0 RC3 and 4.0.7:

    Code:
    Ext.define('Ext.pnc.Grid',{
        extend: 'Ext.grid.Panel',
        alias: 'widget.pncgrid',
        config:{
            showCountColumn:true//a new property added
        },
        constructor:function(config){
            this.initConfig(config);
            this.callParent(arguments);
        }
    });
    
    Ext.application({
        name : 'Test',
    
        launch : function() {
    
            var grid = new Ext.pnc.Grid({
                renderTo : document.body,
                columns  : [
                    {
                        header    : 'test',
                        dataIndex : 'test'
                    }
                ],
                store    : new Ext.data.Store({
                    fields : ['test'],
                    data   : [
                        { test : 'Hello' }
                    ]
                })
            });
            
            console.log(grid.getShowCountColumn()); //true as expected
    
        }
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Feb 2011
    Posts
    174
    Answers
    10
    Vote Rating
    1
    netemp is on a distinguished road

      0  

    Default


    This truly is a sweet surprise. I am using ExtJs 4.0.7 and when I run your example then things work all fine.

    But here is a grid code which I have picked from the examples, when I use this, then I get the error mentioned above.

    Could you guide that what could be the reason behind this?

    Code:
    Ext.onReady(function () {                
        
        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'],
            ['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'],
            ['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'],
            ['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'],
            ['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'],        
            ['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am'],
            ['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am'],
            ['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am'],
            ['Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am'],
            ['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am'],
            ['Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am'],
            ['The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am'],
            ['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am'],
            ['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am'],
            ['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am'],
            ['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'],
            ['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']
        ];
    
    
        // create the data store
        var store = Ext.create('Ext.data.ArrayStore', {
            fields: [{
                name: 'company'
            }, {
                name: 'price',
                type: 'float'
            }, {
                name: 'change',
                type: 'float'
            }, {
                name: 'pctChange',
                type: 'float'
            }, {
                name: 'lastChange',
                type: 'date',
                dateFormat: 'n/j h:ia'
            }],
            data: myData
        });
    
    
        // create the Grid
        var grid = Ext.create('Ext.pnc.Grid', {
            store: store,
            columnLines: true,
            autoScroll:true,
            height:600,
            width:900,
            renderTo:Ext.getBody(),
            title: 'Locking Grid Column',
            columns: [{
                text: 'Company Name',
                //locked: true,
                width:250,
                sortable: false,
                dataIndex: 'company'
            }, {
                text: 'Price',
                width: 150,
                sortable: true,
                renderer: 'usMoney',
                dataIndex: 'price'
            }, {
                text: 'Change',
                width: 150,
                sortable: true,
                dataIndex: 'change'
            }, {
                text: '% Change',
                width: 150,
                sortable: true,
                dataIndex: 'pctChange'
            }, {
                text: 'Last Updated',
                width: 150,
                sortable: true,
                renderer: Ext.util.Format.dateRenderer('m/d/Y'),
                dataIndex: 'lastChange'
            }]
        });
    });

  5. #4
    Sencha User
    Join Date
    Feb 2011
    Posts
    174
    Answers
    10
    Vote Rating
    1
    netemp is on a distinguished road

      0  

    Default


    I checked the things further, and found out that if we use - columnLines: true in the new instance then we get the error - me.additionalCls is undefined

    and also, if we use title:'Locking Grid' then we get the error - me.dockedItems is undefined

    I have added both these to your code below. Could you please run it and check if you are getting the same?

    Code:
    Ext.define('Ext.pnc.Grid', {
        extend: 'Ext.grid.Panel',
        alias: 'widget.pncgrid',
        config: {
            showCountColumn: true //a new property added
        },
        constructor: function (config) {
            this.initConfig(config);
            this.callParent(arguments);
        }
    });
    
    
    
    
    Ext.application({
        name: 'Test',
    
    
    
    
        launch: function () {
    
    
    
    
            var grid = new Ext.pnc.Grid({
                renderTo: document.body,
                columnLines: true,
                title: 'Locking Grid',
                columns: [{
                    header: 'test',
                    dataIndex: 'test'
                }],
                store: new Ext.data.Store({
                    fields: ['test'],
                    data: [{
                        test: 'Hello'
                    }]
                })
            });
    
    
            console.log(grid.getShowCountColumn()); //true as expected
    
    
        }
    });
    Looks like this is a bug.

    Any thoughts?

    Thanks in advance.

  6. #5
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,704
    Answers
    3356
    Vote Rating
    751
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    The whole config object and initConfig was never fully flushed out and used by the framework. I think this is a case where there is a bug but since we don't have the config system full working it was never caught.

    The columnLines config is what is tripping it up. Ext.grid.Panel has gone under a lot of changes in 4.1.0 so this looks to be fixed in 4.1.0 RC3 and I would recommend trying to update to 4.1.0 RC3 but here is an override that is working for me in 4.0.7:

    Code:
    Ext.define('Override.grid.Panel', {
        override : 'Ext.grid.Panel',
    
        setColumnLines: function(show) {
            var me = this,
                method = (show) ? 'addClsWithUI' : 'removeClsWithUI';
    
            me[method]('with-col-lines', true);
        }
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  7. #6
    Sencha User
    Join Date
    Feb 2011
    Posts
    174
    Answers
    10
    Vote Rating
    1
    netemp is on a distinguished road

      0  

    Default


    Thanks for the post Mitchell.

    There seems to be an issue with the title property too, as its leading to the error of dockedItems as reported above.

    As a workaround, if we remove the initConfig statment, could you please guide that other then accessor methods not defined for the newly created properties, would there be any other loss too?

  8. #7
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,704
    Answers
    3356
    Vote Rating
    751
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    All the config object does is create the get and set methods so you don't have to use it.

    Code:
    Ext.define('Ext.pnc.Grid', {
        extend: 'Ext.grid.Panel',
        alias: 'widget.pncgrid',
    
        showCountColumn: true, //a new property added
    
        getShowCountColumn : function() {
            return this.showCountColumn;
        },
    
        setShowCountColumn : function(value) {
            var me = this,
                oldValue = me.getShowCountColumn();
    
            if (me.applyShowCountColumn) {
                value = me.applyShowCountColumn(value, oldValue);
            }
    
            if (!Ext.isDefined(value)) {
                return;
            }
    
            this.showCountColumn = value;
    
            if (me.updateShowCountColumn) {
                this.updateShowCountColumn(value, oldValue);
            }
        }
    });
    That would do the same thing just without calling initConfig and you get the get and set and the set method takes advantage of the apply and update methods just like initConfig does.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  9. #8
    Sencha User
    Join Date
    Feb 2011
    Posts
    174
    Answers
    10
    Vote Rating
    1
    netemp is on a distinguished road

      0  

    Default


    That is great help Mitchell.

    Thanks for all your time.

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar