第四章、使用面板
4.1 、 Panel
面板 Panel 是 ExtJS 控件的基础，很高级控件都是在面板的基础上扩展的，还有其它 大多数控件也都直接或间接有关系。应用程序的界面一般情况下是由一个一个的面板通过不 同组织方式形成。面板由以下几个部分组成，一个顶部工具栏、一个底部工具栏、面板头部、面板尾部、面板主区域几个部分组件。面板类中还内置了面板展开、关闭等功能，并 提供一系列可重用的工具按钮使得我们可以轻松实现自定义的行为，面板可以放入其它任何容器中，面板 本身是一个容器，他里面又可以包含各种其它组件。面板的类名为 Ext.Panel ，其 xtype 为 panel ，下面的代码可以显示出面板的各个组成部分：运行该代码，可以得到如图 xx 所示的输出结果，清楚的表示出了面板的各个组成部分 。Ex t.onReady(function(){new Ext.Panel({renderTo:"hello",title:" 面板头部 header",width:300,height:200,html:'<h1> 面板主区域 </h1>',tbar:[{text:' 顶部工具栏 topToolbar'}],bbar:[{text:' 底部工具栏 bottomToolbar'}],buttons:[{text:" 按钮位于 footer"}]});});
一般情况下，顶部工具栏或底部工具栏只需要一个，而面板中一般也很少直接包含按 钮 ，一般会把面板上的按钮直接放到工具栏上面。比如下面的代码：Ext.onReady(function(){new Ext.Panel({
renderTo:"hello",title:"hello",width:300,height:200,html:'<h1>Hello,easyjf open source!</h1>',tbar:[{pressed:true,text:' 刷新 '}]});
});
可以得到如图 xx 所示的效果，该面板包含面板 Header ，一个顶部工具栏及面板区域三个部分。
4.2 、工具栏
面板中可以有工具栏，工具栏可以位于面板顶部或底部， Ext 中工具栏是由 Ext.Toolba r类表示。工具栏上可以存放按钮、文本、分隔符等内容。面板对象中内置了很多实用的工 具栏，可以直接通过面板的 tools 配置选项往面板头部加入预定义的工具栏选项。比如下面的代码：Ext.onReady(function(){new Ext.Panel({renderTo:"hello",title:"hello",width:300,height:200,html:'<h1>Hello,easyjf open source!</h1>',tools:[{id:"save"},{id:"help",
handler:function(){Ext.Msg.alert('help','please help me!');}},{id:"close"}],tbar:[{pressed:true,text:' 刷新 '}]});});
注意我们在 Panel 的构造函数中设置了 tools 属性的值，表示在面板头部显示三个工具 栏选项按钮，分别是保存 "save" 、 "help" 、 "close" 三种。代码运行的效果图如下：
点击 help 按钮会执行 handler 中的函数，显示一个弹出对话框，而点击其它的按钮不会有任何行为产生，因为没有定义他们的 heanlder 。除了在面板头部加入这些已经定义好的工具栏选择按钮以外，还可以在顶部或底工具 栏中加入各种工具栏选项。这些工具栏选项主要包括按钮、文本、空白、填充条、分隔符等。代码：
Ext.onReady(function(){new Ext.Panel({renderTo:"hello",title:"hello",width:300,height:200,html:'<h1>Hello,easyjf open source!</h1>',tbar:[new Ext.Toolbar.TextItem(' 工具栏 :'),{xtype:"tbfill"},{pressed:true,text:' 添加 '},{xtype:"tbseparator"},{pressed:true,text:' 保存 '}]});});
将会得到如图 xx 所示的结果：
Ext 中的工具栏项目主要包含下面的类：Ext.Toolbar.Button －按钮， xtype 为 tbbuttonTextItem －Ext.Toolbar.Fill －Separator －Spacer －SplitButton －
4.3 、选项面板的 TabPanel
在 前面的示例中，为了显示一个面板，我们需要在页面上添加一个，然后把 Ext 控件渲染到这个 div 上。 VeiwPort 代表整个浏览器显示区域，该对象渲染到页面的 body 区域，并会随着浏览器显示区域的大小自动改变，一个 页面中只能有一个 ViewPort 实例。看下 面的代码：
E xt.onReady(function(){new Ext.Viewport({enableTabScroll:true,layout:"fit",items:[{title:" 面板 ",html:"",bbar:[{text:" 按钮 1"},{text:" 按钮 2"}]}]});});
运行上面的代码会得到如图 xxx 所示的输出结果。
Viewport 不需要再指定 renderTo ，而我们也看到 Viewport 确实填充了整个浏览器显示 区域，并会随着浏览器显示区域大小的改变而改改。Viewport 主要用于应用程序的主界面，可以通过使用不同的布局来搭建出不同风格的 应用程序主界面。在 Viewport 上常用的布局有 fit 、 border 等，当然在需要的时候其它布局也会常用。看下面的代码：
Ext.onReady(function(){new Ext.Viewport({enableTabScroll:true,layout:"border",items:[{title:" 面板 ",region:"north",height:50,html:"<h1> 网站后台管理系统 !</h1>"},{title:" 菜单 ",region:"west",width:200,collapsible:true,html:" 菜单栏 "},{xtype:"tabpanel",region:"center",
items:[{title:" 面板 1"},{title:" 面板 2"}]}]});});
运行上面的程序会得如图 xx 所示的效果。
转载于:https://www.cnblogs.com/liu2008hz/archive/2010/10/27/1862655.html
相关资源：第二章——Windows控制面板选择题.docx