ExtJs4 笔记(9) Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件
本篇讲解三个容器类控件。
一、面板控件 Ext.Panel
一个面板控件包括几个部分,有标题栏、工具栏、正文、按钮区。标题栏位于最上面,工具栏可以在四个位置放置,围绕中间部分正文,按钮区位于最小方。下面介绍几个基本配置项:
1.title:设置面板标题文本。
2.tbar,lbar,rbar,bbar:分别设置上、左、右、下四个部位的工具栏。
3.html,items:前者用来设置正文部分的html,后者设置正文部分的ext控件。
4.buttons:设置按钮区的按钮。
下面看看面板生成代码:
[html]
<h1>Panel</h1> <div id="div1" class="content"> </div>
[Js]
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]
<h1>窗口</h1> <div class="content" style="height:300px"> <button id="button1">打开窗口</button> <div id="win1"></div> </div>
[Js]
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]
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 }] }); });
效果如下: