本篇讲解三个容器类控件。
一、面板控件 Ext.Panel
一个面板控件包括几个部分，有标题栏、工具栏、正文、按钮区。标题栏位于最上面，工具栏可以在四个位置放置，围绕中间部分正文，按钮区位于最小方。下面介绍几个基本配置项：
1.title:设置面板标题文本。
2.tbar,lbar,rbar,bbar:分别设置上、左、右、下四个部位的工具栏。
3.html，items:前者用来设置正文部分的html，后者设置正文部分的ext控件。
4.buttons:设置按钮区的按钮。
下面看看面板生成代码：
[html]
| 1 2 3 | < h1 >Panel</ h1 > < div id = "div1" class = "content" > </ div > |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | Ext.onReady( function () { var p = Ext.create( 'Ext.Panel' , { title: '面板标题' , collapsible: true , renderTo: 'div1' , width: 400, height: 300, autoScroll: false , bodyBorder: true , buttonAlign: 'right' , buttons: [{ text: "按钮1" , handler: function () { Ext.Msg.alert( "提示" , "第一个事件" ); }, id: "bt1" }, { text: "按钮2" , id: "bt2" } ], floating: true , footerCfg: { tag: 'span' , id: 'span1' , html: '面板底部' }, items: [{ xtype: "button" , text: "按钮" }], tbar: Ext.create( 'Ext.toolbar.Toolbar' , { items: [ "工具栏" ] }), html: "<b>正文</b>" }); p.setPosition(40, 50); }); |
效果如下：
二、窗口控件 Ext.window.Window
窗口控件与面板控件基本类似，只不过他看起来像一个窗口，具备最大化，最小化，打开关闭、拖动等窗口操作，下面看看窗口生成代码：
下面看看面板生成代码：
[html]
| 1 2 3 4 5 | < h1 >窗口</ h1 > < div class = "content" style = "height:300px" > < button id = "button1" >打开窗口</ button > < div id = "win1" ></ div > </ div > |
[Js]
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | Ext.onReady( function () { var window1 = Ext.create( 'Ext.window.Window' , { applyTo: 'win1' , layout: 'table' , //内部元素布局方式{absolute accordion anchor border card column fit form table} width: 500, height: 200, closeAction: 'hide' , //窗口关闭的方式：hide/close plain: true , title: "窗口标题" , maximizable: true , //是否可以最大化 minimizable: true , //是否可以最小化 closable: false , //是否可以关闭 modal: true , //是否为模态窗口 resizable: false , //是否可以改变窗口大小 items: [{ text: '按钮' , xtype: "button" }, { width: 214, minValue: 0, maxValue: 100, value: 50, xtype: "slider" }, { xtype: "button" , text: '一个菜单' , width: "60px" , height: "15px" , menu: { items: [ new Ext.ColorPalette({ listeners: { select: function (cp, color) { Ext.Msg.alert( '颜色选择' , '你选择了' + color + '。' ); } } }), '-' , { text: '菜单项1' }, { text: '菜单项2' }, { text: '菜单项3' } ] } }], buttons: [{ text: '确定' , disabled: true }, { text: '取消' , handler: function () { window1.hide(); } }] }); Ext.fly( "button1" ).on( "click" , function () { window1.show(Ext.get( "button1" )); }); }); |
效果如下：
三、布局控件 Ext.container.Viewport
布局控件一般用于整个页面的排版布局，它按四个方向分为四块区域，和中间正文部分，四个区域都可以自动隐藏，其实这个控件的核心功能就是用到了“border”方式的布局，下面看看生成代码：
[Js]
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | Ext.onReady( function () { Ext.create( 'Ext.container.Viewport' , { layout: 'border' , items: [{ region: 'north' , html: '<h1>这里放置logo</h1>' , xtype: "panel" , title: "标题" , autoHeight: true , border: false , margins: '0 0 5 0' }, { region: 'west' , collapsible: true , title: '左侧导航' , xtype: 'panel' , width: 200, autoScroll: true }, { region: 'center' , xtype: 'tabpanel' , activeItem: 0, items: { title: '首页' , html: '这里是首页正文内容' } }, { region: 'south' , title: '底部' , collapsible: true , //允许折叠 html: '这里放置版权信息' , split: true , height: 100, minHeight: 100 }] }); }); |
效果如下：
