1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    116
    Vote Rating
    16
    Notepad123 will become famous soon enough

      0  

    Default 12.3.40 items:[Ext.create()] is not executed for every Object

    12.3.40 items:[Ext.create()] is not executed for every Object


    If I create custom Class by using items:[Ext.create()] then this Ext.create() will be executed only once.
    In other words ALL Objects created from such class will reference the sam Object created by items:[Ext.create()].
    Which means that is I create two Objects of mu Class only the second one will have item defined with items:[Ext.create()] as demonstrated with following example.

    Code:
    //MYPANEL.Ext.define('MyPanel',{
      extend       : 'Ext.Panel',
      config       : {
        flex       : 1,
        html       : 'MyPanel',
        items      : [
          Ext.create('Ext.Button',{text:'Button', flex:1}),
          Ext.create('Ext.Button',{text:'Button', flex:1})
        ]  
      }
    });
     
    //MY APP.
    Ext.setup({ 
     
      onReady        : function() {
       
        //CREATE MAIN PANEL.
        Ext.create('Ext.Panel', {     
          fullscreen : true,
          layout     : 'vbox',
          items      : [
            Ext.create('MyPanel'),
            {html:'MAIN PANEL HTML', flex:1},
            Ext.create('MyPanel')
          ]
        });   
       
      }
     
    
    });
    The way to fix this is to either switch to xtype like this

    Code:
    //MYPANEL.Ext.define('MyPanel',{
      extend       : 'Ext.Panel',
      config       : {
        flex       : 1,
        html       : 'MyPanel',
        items      : [
          {xtype:'button', text:'Button', flex:1},
          {xtype:'button', text:'Button', flex:1}
        ]  
      }
    
    });
    or to create subcomponents programmatically in initialize method like this

    Code:
      //INIT OBJECT.  initialize   : function() {
        console.log('initialize');
        this.callParent();
     
        //ADD TITLEBAR TO PANEL.
        this.add(Ext.create('Ext.Button',{text:'Button', flex:1}));
       
    
      }
    Until I discovered this I was under impressions that I can use xtype and Ext.create() interchangeable but I guess that I can't.
    This doesn't seem consistent behaviour. When using xtype or Ext.create() I excpect Object to be created but it seems that this is being done completely differently.
    There seem to be a lot of peculiarities, special cases, exceptions you have to be aware to make sense of all of this.

    So do I loose antything by switching to xtype does xtype behind the scenes calling Ext.create()?

  2. #2
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    3,978
    Vote Rating
    132
    fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all

      0  

    Default


    This was covered in the latest Support Tips blogpost. See the section on "Creating Instances on the Prototype is Bad"
    http://www.sencha.com/blog/top-suppo...eptember-2014/
    Get more personalized support via a support subscription.

    Want to learn Sencha Touch 2? Check out
    Sencha training
    Sencha Touch in Action

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

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

    Need to include a test case use:
    The official Sencha Fiddle

Thread Participants: 1