EXT3中怎么样抽出对象

最新推荐文章于 2025-06-12 13:49:42 发布

原创最新推荐文章于 2025-06-12 13:49:42 发布 · 205 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #物流 #HTML #浏览器

TIP 专栏收录该内容

7 篇文章

订阅专栏

这是来自/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();
        });
      });