EXT 3ではどのように対象を抽出しますか

これは/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が必要なので、試してみると、意外にも表示できますが、両者の表示の効果は違います.画像のように: