随州网站建站,小江seo,百度网盘搜索免费资源,外贸网站推广公司2019独角兽企业重金招聘Python工程师标准 1、选项板概述 选项面板是一个包括一个或多个选项卡(Tab)#xff0c;同一时刻只显示一个选项卡的这种用户界面。比如下图的IE选项设置界面中#xff0c;就是一个选项板的应用#xff0c;选项板上有“常规”、“安全”… 2019独角兽企业重金招聘Python工程师标准 1、选项板概述 选项面板是一个包括一个或多个选项卡(Tab)同一时刻只显示一个选项卡的这种用户界面。比如下图的IE选项设置界面中就是一个选项板的应用选项板上有“常规”、“安全”、“隐私”等选项卡。 2、Ext.TabPanel Ext中提供了选项板控件TabPanel由类Ext.TabPanel来定义该类直接继承自Ext.Panel因此他实际上也是一个包含特定特性的面板。看下面的代码 script typetext/javascriptExt.onReady(function(){ new Ext.TabPanel({renderTo: Ext.getBody(),width: 300,height: 200,enableTabScroll:true,activeTab: 0,items: [{title:面板1,html:h1this is the first panel!/h1}, {closable : true,title:面板2,html:h1this is the second panel!/h1}, {closable : true,title:面板3,html:h1this is the third panel!/h1}]});});/script 运行结果如下 上面的代码定义了一个简单的选项面板该面板中包含三个tab初始化时显示第一个tab内容。 3、另外一种使用选项板的方式 也可以直接把html页面中符合特殊条件的DIV标签转换成选项板中的选项此时需要在TabPanel的配置选项中把autoTabs项设置为true把deferredRender项设置为false然后通过applyTo项指定把页面中包含classx-tab这种样式的子节点的DOM节点应用于选项板。看下面的例子 headmeta http-equivdescription contentThis is my page!-- 引入ExtJS样式文件 --link relstylesheet typetext/css href%request.getContextPath() %/ext-3.2.0/resources/css/ext-all.css/!-- 引入ExtJS脚本库(两个一个驱动adapter,另外一个ext-all.js) --script typetext/javascript src%request.getContextPath() %/ext-3.2.0/adapter/ext/ext-base.js/scriptscript typetext/javascript src%request.getContextPath() %/ext-3.2.0/ext-all.js/scriptscript typetext/javascriptExt.onReady(function(){ new Ext.TabPanel({applyTo: test,activeTab: 0,deferredRender: false,autoTabs: true });});/script/headbodydiv idtestdiv classx-tab title选项1A simple tab/divdiv classx-tab title选项2Another one/divdiv title选项3div classx-tab title选项4Another one/div/div/div/body 由于“选项3”这个DIV标签的class不是x-tab所以不会转换成选项卡Tab而“选项4”这个DIV虽然与“选项1”这些节点不在同一个层次但仍然会把他作为Tab项来同等处理。 4、控制选项板的内容 选项板TabPanel中的选项Tab项可以在初始化的时候通过items时候指定也可以在TabPanel对象创建以后使用add()、insert()或remove等来动态添加或删除其中的选项卡Tab。为了演示对面板中tab的操作我们可以给上面的程序简单的添加一个工具栏按钮当点击按钮的时候在选项面板中动态添加tab。代码如下 script typetext/javascriptExt.onReady(function(){ var i0; var tabnew Ext.TabPanel({renderTo: Ext.getBody(),width:500,height:200,enableTabScroll:true,activeTab:0,bbar:[{text:添加,handler:function(){tab.add({title:新面板i,closable : true });}}],items:[{title:面板1,html:h1this is the first panel!/h1}, {closable : true,title:面板2,html:h1this is the second panel!/h1},{closable : true,title:面板3,html:h1this is the third panel!/h1}]});});/script 运行效果如下 添加按钮的事件响应函数内容如下 tab.add({title:新面板i,closable : true}); 我们直接调用选项面板的add方法就可以把一个面板添加到选项板中成为一个新的tab。closeable表示该面板可以关闭因此在tab上会出现一个关闭tab的图标点击该图标可以关闭该面板。 可以使用迭代功能实现批量关闭选项板TabPanel中的所有Tab比如可以在上面的bbar中添加一个按钮来实现关闭所有打开的Tab该按钮的定义代码如下 {text:关闭所有面板,handler: function(){tab.items.each(function(p){ if(p.closable)tab.remove(p);}}} 转载于:https://my.oschina.net/zhuyongfei/blog/130260
