Results 1 to 3 of 3

Thread: When to use xtype?

  1. #1
    Sencha User
    Join Date
    Sep 2010
    Location
    Valencia, Spain
    Posts
    66

    Default When to use xtype?

    Hi,

    Recently started working with ExtJS but not when it is best to use xtype for "lazy" initialization.

    Par example, in a display create a button that when pressed opens a window containing a grid. In the following code all components are created with "new."

    PHP Code:
    Ext.onReady(function(){
     
    Ext.BLANK_IMAGE_URL '$VERSION_EXTJS$/resources/images/default/s.gif';
    Ext.QuickTips.init();
    Ext.Ajax.disableCaching false;
     
     
    ....
    define my storemy columnetc.
    ...
     
    var 
    btn = new Ext.Button({
         
    text'Click !!',
         
    renderTodocument.body,
         
    handler: function(){
               
    myWin.show();
         }
    });
     
    var 
    grid = new Ext.grid.GridPanel({
       
    id'grid'
       
    storemyStore,
       
    cmmyCM,
       
    frametrue,
       
    loadMasktrue,
       
    width600,
       
    height300,
       
    title'my Grid',
       
    listeners:{
       
    render: function (){
           
    this.store.load({params:{p_start0p_limit10}});
          }
       }
    }); 
     
    var 
    myWin = new Ext.Window({
        
    layout'auto'
        
    width700
        
    renerToExt.getBody(), 
        
    bodyCfg: {style'background-color:#ffffff'bodyBordertrue},
        
    draggablefalse,
        
    maximizabletrue,
        
    closeAction'hide'
        
    resizablefalse,
        
    autoScrollfalse,
        
    autoHeighttrue,
        
    padding5,
        
    items: [grid]
    });
     
     
    }); 
    //end onReady 
    In the following code grid component is created with 'xtype':

    PHP Code:
    Ext.onReady(function(){
     
    Ext.BLANK_IMAGE_URL '$VERSION_EXTJS$/resources/images/default/s.gif';
    Ext.QuickTips.init();
    Ext.Ajax.disableCaching false;
     
     
    ....
    define my storemy columnetc.
    ...
     
    var 
    btn = new Ext.Button({
         
    text'Click !!',
         
    renderTodocument.body,
         
    handler: function(){
                  
    myWin.show();
         }
    });
     
     
     
    var 
    myWin = new Ext.Window({
    layout'auto'
    width700
    renerToExt.getBody(), 
    bodyCfg: {style'background-color:#ffffff'bodyBordertrue},
    draggablefalse,
    maximizabletrue,
    closeAction'hide'
    resizablefalse,
    autoScrollfalse,
    autoHeighttrue,
    padding5,
    items: [{xtype'grid',
               
    id'grid'
               
    storemyStore,
               
    cmmyCM,
               
    frametrue,
               
    loadMasktrue,
               
    width600,
               
    height300,
               
    title'my Grid',
               
    listeners:{
                
    render: function (){
                   
    this.store.load({params:{p_start0p_limit10}});
                }
              }
              }]
    });
     
     
    }); 
    //end onReady 

    Firedebug.jpg

    In the first code components are created in memory that have been created with "new" but in the second component code should not be in memory that have been created with "xtype" and therefore the loading screen should be faster. So, because load times obtained in the Firedebug are the same for both codes. I'm confused with the use of xtype?


    Thanks advance.

    Note: Sorry for my english.

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Like I keep saying, there's no such thing as "lazy instantiation".

    xtyped config objects are used to instantiate the correct type as soon as they are added to a Container.

    The benefit of xtyped config objects is that they can be reused. A bit like a template for churning out copies

  3. #3
    Sencha User
    Join Date
    Sep 2010
    Location
    Valencia, Spain
    Posts
    66

    Default

    But, so when i created a component with "new" also i can reuse the component, no?
    Another example, i have 4 components that will be appearing when running certain events (click on a button, link etc.).
    It is better to create the 4 components with a "new" (var mywin1 = new ..., var mywin2 = new ... ) and rendering them when the event occurs or is it better to create the components and rendering them at the time of executing the event?

    thank's

Similar Threads

  1. Xtype with non-xtype children?
    By skbach_pointyhat in forum Sencha Ext JS Q&A
    Replies: 1
    Last Post: 14 May 2010, 9:37 AM
  2. xtype or new
    By maquejp in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 19 Feb 2010, 2:08 AM
  3. xtype:editorgrid in xtype:tabpanel
    By extjs_new in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 7 Jan 2009, 9:40 PM
  4. xtype:'textarea', to xtype:'htmleditor' problem
    By putty in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 2 Jul 2008, 11:11 PM
  5. How to know the xtype name
    By hobbes in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 30 Apr 2008, 5:27 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •