Extjs 之 viewport

来源:互联网 发布:c语言贪吃蛇代码及解析 编辑:程序博客网 时间:2024/04/30 23:33


// 页面布局var viewport = {north: new Ext.BoxComponent({ region: 'north',contentEl: 'viewport_north',height: 32 // give north and south regions a height}),south: {// lazily created panel (xtype:'panel' is default)region: 'south',contentEl: 'viewport_south',split: true,height: 100,minSize: 100,maxSize: 200,collapsible: true,collapsed: true,title: '关于',margins: '0 0 0 0'},east: {region: 'east',title: '附属栏',collapsible: true,split: true,width: 300,minSize: 175,maxSize: 400,margins: '0 5 0 0',layout: 'fit', // specify layout manager for itemsitems:            // this TabPanel is wrapped by another Panel so the title will be appliednew Ext.TabPanel({id: 'department_tree_tabPanel',border: false, // already wrapped so don't add another borderactiveTab: 0, // second tab initially activetabPosition: 'bottom',defaults:{autoScroll:true},items: [new Ext.Panel({ title: '详情',id: 'department_detail_panel',ref: '../department_detail_panel',html:'<div id="filter_panel" style="overflow:auto;"></div>',autoScroll: true,defaults:{autoScroll:true}}),{title: '帮助',            id: 'department_help'        ,html: '<p>这里是帮助信息。</p>',autoScroll: true}]})},west: {region: 'west',id: 'west-panel', // see Ext.getCmp() belowtitle: '菜单',split: true,width: 200,minSize: 175,maxSize: 400,collapsible: true,collapsed: true,margins: '0 0 0 5',layout: {type: 'accordion',animate: true},items: [{contentEl: 'viewport_west',title: '部门管理',border: false,iconCls: 'nav' // see the HEAD section for style used}, {title: '配置',html: '<p>这里是配置信息。</p>',border: false,iconCls: 'settings'}]},center: new Ext.TabPanel({         region: 'center' // a center region is ALWAYS required for border layout        ,deferredRender: false        ,activeTab: 0     // first tab initially active,tabPosition: 'bottom'        ,items: [{             contentEl: 'viewport_center'            ,title: '部门树'            ,closable: false            ,autoScroll: true        }, {             contentEl: 'viewport_center_help'            ,title: '帮助'            ,autoScroll: true        }]    }),init: function(){console.log('viewport init is starting ... ');// 页面布局    var v = new Ext.Viewport({      layout: 'border'    ,items: [         this.north         ,this.south         ,this.east         ,this.west         ,this.center         ]    });}};


原创粉丝点击