Extjs学习笔记之六面版

框架为我们封装好了面板，面板具有统一的标题头，面板体，面板底部，还可以自由的添加工具栏等。另外，extjs中还有丰富的布局，可以用来布局小组讨论。这种方式很像爪哇的摇摆。面板可以嵌套，可以作为整个页面的框架，也可以作为一个小功能区。前几篇文中用到的FormPanel就是继承自面板类的。下面的例子展示了一个较为完整的面板，主要是设置工具栏：复制代码代码如下： html xmlns=' http://www。w3。org/1999/XHTML ' head title extjs Combobox/title link rel='样式表type=' text/CSS ' href=' Ext-3。1 .0/资源/CSS/Ext-all。CSS '/脚本类型=' text/JAVAScript ' src=' http : Ext-3。1 .0/适配器/外部/外部基座。js /脚本脚本类型面板({ title: '面板标题'，tbar: ['顶部工具栏'，{ //xtype: '按钮'，工具栏的默认值，与tbbutton' text: 'Button '相同)}，{ xtype: 'splitbutton '，//与“拆分按钮”文本：“拆分按钮”相同)},//开始使用右对齐的按钮容器'-',//与{xtype: 'tbfill'}，//Ext工具栏。填充{ xtype: 'textfield '，名称：“字段1”，空文本：输入搜索词' },//在工具栏项目之间添加一个垂直分隔条'-',//与{ xtype :“tbseparator”}相同，以创建分机.工具栏。分隔符"文本1 "，//与{ xtype :“tbtext”，text :“text 1”}相同，用于创建分机.工具栏TextItem {xtype: 'tbspacer' }，//与' '相同，用于创建分机.工具栏。分隔符'文本2 '，{ xtype: 'tbspacer '，宽度： 50 },//添加一个50px的空格'文本3']，bbar: ['底部工具栏]，applyTo: 'mypanel '，frame: true，html : ' div这里是面板/分区的主体，车身样式： '底色： # FFFFFF '，高度： 300按钮({ text : ' Click Me ' })]})；});/script/head body div id=' my panel '/div/body/html效果如下

下面介绍如何给面板加载内容。其实上面的例子已经展示了一种方法，那就是通过超文本标记语言属性直接指定，不过这种方法似乎没有太大的实用价值面板具有一个自动加载属性，可以加载远程页面。新建一个页面RemoteContent.htm，内容如下：复制代码代码如下： html xmlns=' http://www。w3。org/1999/XHTML '标题/标题/标题/标题正文保险商实验所列出项目1/li列出项目2/li列出项目3/li列出项目4/li列出项目5/Li/ul/正文/html将上例的超文本标记语言配置项去掉，换成：自动加载："远程内容。htm "则效果为

自动装载配置项目将装载车身/车身之间的内容。请注意，加载的文件不能包含！-，否则将无法正常加载。此外，应该注意的是，以这种方式直接加载aspx页面通常会失败。例如，创建一个新的Default.aspx页面。内容：复制的代码如下： html xmlns=' http://www.w3.org/1999/XHTML' head runat=' server ' title/title/head body form ID=' form 1 ' runat=' server ' div asp3360 Label ID=' Label 1 ' runat=' server ' Text=' Label '/ASP 3360 Label ASP 3360 button ID=' button 1 ' runat=' server ' Text=' button ' onclick=' button 1 _ click '/div/form/body/HTS；将autoLoad配置为Default.aspx页面，点击按钮，会发现整个Panel都没了，内容留在了aspx页面。因此，autoLoad适合加载通过ashx页面输出的html文件或html代码，这些都是我们自己严格控制的，但绝对不可能使用默认的aspx回发页面。也不可能直接结合extjs和ASP.NET的服务器控件。如果必须要偷懒，可以使用这个方法：html : ' iframe scrolling=' auto ' frame border=' 0 ' width=' 100% ' height=' 100% ' src=' http 3360 ' ' default . aspx ' '/iframe '。Panel还有一个ContentEl属性，可以在这个页面上加载dom节点。这个方法也可以和ASP.NET服务器控件一起使用，稍微修改一下Default.aspx:复制代码如下：正文表单id=' form 1 ' runat=' server ' divided=' panel Content ' ASP :标签id=' label 1 ' runat=' server ' text=' label '/asp3360 label asp3360 buttonid=' Button 1 ' runat=' server ' text=' Button ' onclick=' Button 1 _ Click '/div这里是一些固定内容/div 这意味着该面板将加载id为panelcontent的div的内容，即一个标签和一个按钮。 效果如下：。

你可以看到contentEl的效果，就是把div上面的内容移动到Panel里面有一些固定的Content/div。此时单击按钮以正确响应服务器端的代码。这种方法只移动页面上的一些DOM节点，一般对服务器端事件没有影响，但是Panel的功能和div类似。最后介绍了通过项目配置项向Panel添加其他Extjs组件的方法。除了直接添加html之外，还可以向Panel中添加其他组件，Panel本身也是一个组件，所以Panel是可以嵌套的。嵌套面板结合下一节将要介绍的布局可以轻松完成一些布局工作。使用以下代码创建一个新的nestedPanel.htm。使用项目配置面板内的内容：复制代码如下： html xmns=' http://www.w3.org/1999/XHTML' head title Ext js nest Panel/title link rel='样式表' type=' text/CSS ' href=' Ext-3 . 1 . 0/resources/CSS/Ext-all . CSS '/脚本类型=' text/JavaScript ' src=' http : Ext-3 . 1 . 0/适配器/ext/ext-base.js'/脚本类型=' text/javas面板({ title: 'Panel Header '，renderTo: 'panel1 '，frame: true，body style : ' background-color : # FFFFFF '，collapsible: true，items: new Ext。DatePicker()，width : { 189 })；新Ext。面板({ title: 'Nested Panel '，renderTo: 'panel2 '，width: 189，frame: true，items: [{ xtype: 'panel '，title: 'nested 1 '，html:'divI am panel A/div' }，{ xtype: 'panel '，title: 'nested 2 '，autoload : ' remote content . htm ' })})});/script/head body div id=' panel 1 '/div div id=' panel 2 '/div/body/html效果如下：。