第二节 ExtJS组件介绍.docVIP

第二节ExtJS组件介绍 学习目标： 1. 掌握Ext基本组件的用法 2．掌握布局类的用法和不同布局类的区别 目录 第二节ExtJS组件介绍 1 1．面板Panel 2 2．工具栏 Toolbar 3 3．选项面板TabPanel 4 4．窗口及对话框 6 4．1 窗口的基本应用 6 4．2 对话框 8 5．布局Layout 10 5．1 Border区域布局类 11 5．2 Column列布局类 12 5．3 Fit布局 13 5．4 Form布局类 13 5．5 Accordion布局 14 5．6 Table布局及其它布局 15 任务和总结： 16 蓝杰 陈九龙 QQ1．面板Panel 面板Panel是ExtJS控件的基础，很多高级控件都是在面板的基础上扩展的，还有其它大多数控件也都是和Panel有直接或间接的关系。应用程序的界面一般情况下是由一个一个的面板通过不同的组织方式形成。 面板有以下几个部分组成： 一个顶部的工具栏、一个底部的工具栏、面板头部、面板尾部、面板主区域几个部分组成。面板类中还内置了面板展开、关闭等功能，并提供一系列可重用的工具按钮使得我们可以轻松实现自定义的行为，面板可以放入其它任何容器中，面板本身是一个容器，它内部可以包含各种其它组件。 面板的类名为Ext.Panel,其xtype为panel.下面的代码可以显示出面板的各个组成部分： Ext.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:h1Hello,NetJava!/h1, tbar:[{pressed:true,text:刷新}] }); }); 可以看到如下的效果，该面板包含面板Header，一个顶部工具栏及面板区域三个部分： 2．工具栏 Toolbar 面板中可以有工具栏，工具栏可以位于面板顶部或底部，Ext中的工具栏是由Ext.Toolbar类表示。工具栏上可以存放按钮、文本、分隔符等内容。面板对象中内置了很多实用的工具栏，可以直接通过面板的tools配置选项往面板头部加入预定义的工具栏选项。 Ext.onReady(function(){ new Ext.Panel({ renderTo:hello, title:hello, width:300, height:200, html:h1Hello,NetJava, tools:[{ id:save}, {id:help,handler:function(){Ext.Msg.alert(help,pleasehelpme!);}}, {id:close}], tbar:[{pressed:true,text:刷新}] }); }); 注意我们在Panel的构造函数中设置了tools属性的值，表示在面板头部显示三个工具栏选项按钮，分别是保存”save”，”help”，”close”三种。点击help按钮会执行handler中的函数，显示严格对话框，而点击其它的按钮不会有任何行为产生，因为没有定义它们的handler. 除了早面板头部加入这些已经定义好的工具栏选择按钮之外，还可以在顶部或底部工具栏中加入各种工具栏选项。这些工具栏选项主要包括按钮、文本、空白、填充条、分隔符等。 3．选项面板TabPanel 前面的示例中，为了显示一个面板，我们需要在页面上添加一个，然后把Ext控件渲染到这个div上。VeiwPort代表整个浏览器显示区域，该对象渲染到页面的body区域，并会随着浏览器显示区域的大小自动改变，一个页面中只能有一个ViewPort实