EXT3中怎么样抽出对象

这是来自/ext-3.2.1/ext-3.2.1/examples/layout/complex.html中的一个border布局的例子：

 Ext.onReady(function(){
        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
        var viewport = new Ext.Viewport({
          layout: 'border',
          items: [
            // create instance immediately
            new Ext.BoxComponent({
              region: 'north',
              height: 50, // give north and south regions a height
              contentEl : "header"
            }), {
              region: 'west',
              id: 'west-panel', 
              title: '操作面板',
              split: true,
              width: 200,
              minSize: 175,
              maxSize: 400,
              collapsible: true,
              margins: '0 0 5 5',
              layout: {
                type: 'accordion',
                animate: true
              },
              items: [{
                  contentEl: 'west',
                  title: '客户管理',
                  border: false,
                  iconCls: 'nav'
                }, {
                  title: '物流管理',
                  html: '<p>Some settings in here.</p>',
                  border: false,
                  iconCls: 'settings'
                }]
            },
            new Ext.TabPanel({
              region: 'center', // a center region is ALWAYS required for border layout
              deferredRender: false,
              activeTab: 0,     // first tab initially active
              margins: '0 5 5 5',
              items: [{
                  contentEl: 'center2',
                  title: '欢迎光临',
                  autoScroll: true
                },{
                  contentEl: 'center1',
                  title: 'Close Me',
                  closable: true,
                  autoScroll: true
                }]
            })]
        });
        // get a reference to the HTML element with id "hideit" and add a click listener to it
        Ext.get("hideit").on('click', function(){
          // get a reference to the Panel that was created with id = 'west-panel'
          var w = Ext.getCmp('west-panel');
          // expand or collapse that Panel based on its collapsed property state
          w.collapsed ? w.expand() : w.collapse();
        });
      });

这样是可以正常显示的，由于我要在服务器端控制菜单显示，所以我第一步就是想把左侧的west菜单弄出来，所以我这样做：

var menus =  new Ext.BoxComponent({
    region: 'west',
    id: 'west-panel', // see Ext.getCmp() below
    title: '操作面板',
    split: true,
    width: 200,
    minSize: 175,
    maxSize: 400,
    collapsible: true,
    margins: '0 0 5 5',
    layout: {
        type: 'accordion',
        animate: true
    },
    items: [{
        contentEl: 'west',
        title: '客户管理',
        border: false,
        iconCls: 'nav' // see the HEAD section for style used
    }, {
        title: '交易管理',
        html: '<p>Some settings in here.</p>',
        border: false,
        iconCls: 'settings'
    }]
});

      Ext.onReady(function(){
        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
        var viewport = new Ext.Viewport({
          layout: 'border',
          items: [
            // create instance immediately
            new Ext.BoxComponent({
              region: 'north',
              height: 50, // give north and south regions a height
              contentEl : "header"
            }), menus,
            new Ext.TabPanel({
              region: 'center', // a center region is ALWAYS required for border layout
              deferredRender: false,
              activeTab: 0,     // first tab initially active
              margins: '0 5 5 5',
              items: [{
                  contentEl: 'center2',
                  title: '欢迎光临',
                  autoScroll: true
                },{
                  contentEl: 'center1',
                  title: 'Close Me',
                  closable: true,
                  autoScroll: true
                }]
            })]
        });
        // get a reference to the HTML element with id "hideit" and add a click listener to it
        Ext.get("hideit").on('click', function(){
          // get a reference to the Panel that was created with id = 'west-panel'
          var w = Ext.getCmp('west-panel');
          // expand or collapse that Panel based on its collapsed property state
          w.collapsed ? w.expand() : w.collapse();
        });
      });

这样一试，发现浏览器中没有出错，只不能west区占着位置，但是空空的，什么也不显示。


请问一下是什么原因呢？

经aj一指点，发现不能new BoxComponent，而是要container,所以一试，居然可以显示了，不过二者显示的效果不一样啊：如图片所示：