CODEWITHSUNDEEP
javascriptsencha-touchextjssencha-touch-2
Stefan Kendall
Stefan Kendall

Reputation: 67832

Mixing configuration objects and Ext.create defined objects creates unclickable panel

If I have an application which contains panels created with Ext.create, and those panels have items which are created with both Ext.create and configuration objects, I get a panel whose interface is completely unclickable and doesn't respond to any interaction.

I've create a sample JSFiddle which illustrates the issue. Click the "TEST" button to see an example of this failure.

Upvotes: 2

Views: 945

Answers (1)

Rene Saarsoo
Rene Saarsoo

Reputation: 13917

You can't do component creation at class definition time. That is, using Ext.create directly inside config object of Ext.define:

Ext.define('App.views.Panel1', {
    id:'panel1',
    extend:'Ext.Panel',
    config:{
        title: 'test',
        layout:'card',
        items:[
            {
                items:[
                    {
                        xtype: 'button',
                        text: 'TEST',
                        handler:function(){
                            Ext.getCmp('panel1').setActiveItem(Ext.getCmp('panel2'));
                        }
                    }
                ]
            },
            // not good
            Ext.create('App.views.Panel2', {id:'panel2'})
        ]
    }
});

Even if this would work, it would result in all instances of Panel1 sharing one Panel2 instance.

Instead you should do your component creation at initialization time:

Ext.define('App.views.Panel1', {
    id:'panel1',
    extend:'Ext.Panel',
    config:{
        title: 'test',
        layout:'card',
        items:[
            {
                items:[
                    {
                        xtype: 'button',
                        text: 'TEST',
                        handler:function(){
                            Ext.getCmp('panel1').setActiveItem(Ext.getCmp('panel2'));
                        }
                    }
                ]
            }
        ]
    },

    initialize: function() {
        this.add(Ext.create('App.views.Panel2', {id:'panel2'}));
        this.callParent();
    }
});

The initialize method is a good place to do any kind of extra work you want to do every time you create an instance of your component class. callParent is there because we override initialize of a parent class which might have some of its own logic in there which we want to keep.

Upvotes: 2

Related Questions