2.x PR3 rendering order question (or bug?)

[qooleot]

Ok want to make sure I understand sencha 2.x, specifically PR3. So this is valid (tried to copy/paste reduced example so sorry if there is a small syntax issue):

var lookupForm = {
  title: 'Lookup',
  autoRender   : true,
                modal        : true,
                hideOnMaskTap: false,
                height       : 505,
                width        : 480,
                centered     : true,
                fullscreen   : true,
  items: [
    {
      xtype: 'checkboxfield',
      label: 'My Reviews and Cellar'
    }, {
      xtype: 'checkboxfield',
      name: 'search_type',
      label: 'Friends'
    }, {
      xtype: 'checkboxfield',
      label: 'Internet'
    }]
  };


Ext.setup({
  onReady: function(){

    var bottomTabs = Ext.create('Ext.tab.Panel', {
      fullscreen: true,
      tabBar: {
        docked: 'bottom',
        ui: 'light',
        layout: {
          pack: 'center'
        }
      },
      items: [searchCard = Ext.create('Ext.tab.Panel', {
              title: 'Search',
              iconCls: 'search',
                items: [Ext.create('Ext.form.Panel', lookupForm)]
                })]

  })}
});

since it creates the form after the tabpanel after the outer panel, but this is invalid:

var lookupForm = Ext.create('Ext.form.Panel', {
  title: 'Lookup',
  autoRender   : true,
                modal        : true,
                hideOnMaskTap: false,
                height       : 505,
                width        : 480,
                centered     : true,
                fullscreen   : true,
  items: [
    {
      xtype: 'checkboxfield',
      label: 'My Reviews and Cellar'
    }, {
      xtype: 'checkboxfield',
      name: 'search_type',
      label: 'Friends'
    }, {
      xtype: 'checkboxfield',
      label: 'Internet'
    }]
});

var searchCard = Ext.create('Ext.tab.Panel', {
  title: 'Search',
  iconCls: 'search',
  items: [lookupForm]
});

Ext.setup({
  onReady: function(){

    var bottomTabs = Ext.create('Ext.tab.Panel', {
      fullscreen: true,
      items: [searchCard]
    });

  }
});

because the form was created before the tabpanel, etc? It appears to have rendering issues since the checkboxes are not checkable (although no errors in console)...or maybe this is a bug?

[qooleot]

Ok so if we must create the components outer-to-inner in rendering order via:

Ext.create(<type goes here>, <object goes here>);

then I tried to specify xtypes and that automatically doing the Ext.create for it when its in the "items: []" for its parent that is invoked via Ext.create, but that doesn't seem to happen either.

How do you expect us to not have to nest the whole app in one big spaghetti code pile? Hopefully this is just a new bug or some obvious misunderstanding.