- 浏览: 69665 次
- 性别:
- 来自: 北京
-
最近访客 更多访客>>
最新评论
-
hzfeibao:
总结的很详细啊
Ext.grid.GridPanel -
lixiaodong59421:
Ext菜单可以显示到非ext控件上吗?
Ext.menu.Menu -
lixiaodong59421:
asdfasdfasdf
Ext.menu.Menu -
guanzhongdaoke54007:
有没有详细的,比如例子?
Ext.form.Radio -
deng1259070:
我要列加背景色怎么做?
Ext.grid.GridPanel
TabPanel不显示面板的标题和头部工具条。
1、主要配置项:
activeTab:初始激活的tab,索引或者id值,默认为none
autoTabs:是否自动将带有'x-tab'样式类的div转成tabs添加到TabPanel中,默认为false。
当该配置项设为true时,需要设置deferredRender为false,还必须使用applyTo。
deferredRender:是否延迟渲染,默认为true。
autoTabSelector:默认为'div.x-tab'。
resizeTabs:是否可以改变tab的尺寸,默认为false。
minTabWidth:tab的最小宽度,默认为30。
tabWidth:每个新增加的tab宽度,默认为120。
tabTip:tab的提示信息
tabPosition:tab位置,可选值有top、bottom,默认为top。
enableTabScroll:是否允许Tab溢出时可以滚动,默认为false。
closable:tab是否可关闭,默认为false
scrollDuration:每次的滚动时长,默认为0.35毫秒。
scrollIncrement:每次的滚动步长,默认为100像素。
wheelIncrement:每次鼠标滑轮的滚动步长,默认为20像素。
2、主要方法:
activate( String/Panel tab )
getActiveTab():获取当前活动的tab
get( String/Number key ):根据组件id或者索引获取组件
getItem(String id):根据tab id获取tab
setActiveTab( String/Number item )
remove( Component/String component, [Boolean autoDestroy] )
removeAll( [Boolean autoDestroy] )
3、范例
new Ext.TabPanel({
id: "mainTab",
renderTo: "div1",
width: 500,
height: 300,
activeTab: 0,
defaults: {
autoScroll: true,
autoHeight:true,
style: "padding:5"
},
items:[
{title:"normal", tabTip:"mormal", html:"tab1", iconCls:"add"},
{title:"ajax1", autoLoad:"messagebox.action", iconCls:"delete"},
{title:"ajax2", autoLoad:{url:"test.action", params:"p1=v1", nocache:true}, iconCls:"search"},
{title:"event", iconCls:"save", listeners:{activate:activateHandler}}
],
enableTabScroll: true
});
function activateHandler(tab){
//alert(tab.title);
}
var index = 0;
function addTab(){
var tabs = Ext.getCmp("mainTab");
var t = tabs.getItem("tab"+index);
if(t) tabs.remove(t);
tabs.add({
id: "tab" + (++index),
title: "NewTab" + index,
html: "new tab" + index,
closable: true
}).show();
}
//按钮渲染到div1元素之前
new Ext.Button({
text:"add tab",
handler:addTab,
iconCls:"add"
}).render(document.body, "div1");
在使用TabPanel时需要注意:
1、在创建Ext.TabPanel时deferredRender配置项经常会被忽略。该配置项的默认值是true。true表示只有在用户第一次访问选项卡时,该选项卡的panel才会被渲染。 所以当我们有可能使用脚本操作选项卡时,谨记将该配置项设置为false。
2、在FormPanel中使用TabPanel,如果在TabPanel中不定义deferredRender的值为false,那么,当你使用Load方法为Form加载数据,或使用setValue为没有激活过的Panel的控件赋值时,将会发生错误。原因是,在默认设置下deferredRender为true,TabPanel并不会渲染所有Panel上的控件,只有在该Panel被激活时才渲染控件,所以当你为这些控件设置数据时,将会找不到这些控件,会出现错误。因而,在FormPanel中使用TabPanel,一定要在TabPanel中设置deferredRender的值为false,强制TabPanel在Layout渲染时同时渲染所有Panel上的控件。
1、主要配置项:
activeTab:初始激活的tab,索引或者id值,默认为none
autoTabs:是否自动将带有'x-tab'样式类的div转成tabs添加到TabPanel中,默认为false。
当该配置项设为true时,需要设置deferredRender为false,还必须使用applyTo。
deferredRender:是否延迟渲染,默认为true。
autoTabSelector:默认为'div.x-tab'。
resizeTabs:是否可以改变tab的尺寸,默认为false。
minTabWidth:tab的最小宽度,默认为30。
tabWidth:每个新增加的tab宽度,默认为120。
tabTip:tab的提示信息
tabPosition:tab位置,可选值有top、bottom,默认为top。
enableTabScroll:是否允许Tab溢出时可以滚动,默认为false。
closable:tab是否可关闭,默认为false
scrollDuration:每次的滚动时长,默认为0.35毫秒。
scrollIncrement:每次的滚动步长,默认为100像素。
wheelIncrement:每次鼠标滑轮的滚动步长,默认为20像素。
2、主要方法:
activate( String/Panel tab )
getActiveTab():获取当前活动的tab
get( String/Number key ):根据组件id或者索引获取组件
getItem(String id):根据tab id获取tab
setActiveTab( String/Number item )
remove( Component/String component, [Boolean autoDestroy] )
removeAll( [Boolean autoDestroy] )
3、范例
new Ext.TabPanel({
id: "mainTab",
renderTo: "div1",
width: 500,
height: 300,
activeTab: 0,
defaults: {
autoScroll: true,
autoHeight:true,
style: "padding:5"
},
items:[
{title:"normal", tabTip:"mormal", html:"tab1", iconCls:"add"},
{title:"ajax1", autoLoad:"messagebox.action", iconCls:"delete"},
{title:"ajax2", autoLoad:{url:"test.action", params:"p1=v1", nocache:true}, iconCls:"search"},
{title:"event", iconCls:"save", listeners:{activate:activateHandler}}
],
enableTabScroll: true
});
function activateHandler(tab){
//alert(tab.title);
}
var index = 0;
function addTab(){
var tabs = Ext.getCmp("mainTab");
var t = tabs.getItem("tab"+index);
if(t) tabs.remove(t);
tabs.add({
id: "tab" + (++index),
title: "NewTab" + index,
html: "new tab" + index,
closable: true
}).show();
}
//按钮渲染到div1元素之前
new Ext.Button({
text:"add tab",
handler:addTab,
iconCls:"add"
}).render(document.body, "div1");
在使用TabPanel时需要注意:
1、在创建Ext.TabPanel时deferredRender配置项经常会被忽略。该配置项的默认值是true。true表示只有在用户第一次访问选项卡时,该选项卡的panel才会被渲染。 所以当我们有可能使用脚本操作选项卡时,谨记将该配置项设置为false。
2、在FormPanel中使用TabPanel,如果在TabPanel中不定义deferredRender的值为false,那么,当你使用Load方法为Form加载数据,或使用setValue为没有激活过的Panel的控件赋值时,将会发生错误。原因是,在默认设置下deferredRender为true,TabPanel并不会渲染所有Panel上的控件,只有在该Panel被激活时才渲染控件,所以当你为这些控件设置数据时,将会找不到这些控件,会出现错误。因而,在FormPanel中使用TabPanel,一定要在TabPanel中设置deferredRender的值为false,强制TabPanel在Layout渲染时同时渲染所有Panel上的控件。
发表评论
-
ext GridPanel 分页
2010-10-26 10:26 1269<!DOCTYPE html PUBLIC " ... -
EXT各种组件
2010-10-10 16:55 1016本范例展示如何使用表单的各种组件。 下拉框组件展示了5种使用 ... -
Ext.form.TimeField
2010-10-10 16:54 201813、Ext.form.TimeField 配置项 ... -
Ext.form.FieldSet
2010-10-10 16:46 137212、Ext.form.FieldSet 配置项: ... -
Ext.form.DateField
2010-10-10 16:45 122711、Ext.form.DateField 配置项: ... -
Ext.form.ComboBox
2010-10-10 16:45 177510、Ext.form.ComboBox 配置项: ... -
Ext.form.RadioGroup
2010-10-10 16:44 9879、Ext.form.RadioGroup 配置项: ... -
Ext.form.Radio
2010-10-10 16:44 8948、Ext.form.Radio 方法: ... -
Ext.form.CheckboxGroup
2010-10-10 16:44 9487、Ext.form.CheckboxGroup 配 ... -
Ext.form.Checkbox
2010-10-10 16:43 8126、Ext.form.Checkbox 配置项: ... -
Ext.form.NumberField
2010-10-10 16:43 11005、Ext.form.NumberField 配置 ... -
Ext.form.TextArea
2010-10-10 16:43 12944、Ext.form.TextArea 配置项: ... -
Ext.form.TextField
2010-10-10 16:43 12283、Ext.form.TextField 配置项: ... -
Ext.form.Label
2010-10-10 16:42 11112、Ext.form.Label 配置项: ... -
Ext.form.Hidden
2010-10-10 16:42 8181、Ext.form.Hidden -
Ext.form.Field
2010-10-10 16:41 10894、Ext.form.Field 配置项: ... -
Ext.form.FormPanel
2010-10-10 16:41 8613、Ext.form.FormPanel 配置项 ... -
Ext.form.BasicForm
2010-10-10 16:41 11322、Ext.form.BasicForm 配置项: ... -
Ext.form.Action
2010-10-10 16:41 10941、Ext.form.Action 配置项: ... -
Ext.grid.PropertyGrid
2010-10-10 16:40 15691、Ext.grid.PropertyGrid 主 ...
相关推荐
1、Ext.TabPanel简单使用 代码:
treepanel 和 tabpanel 合在一起使用,可直接使用
ExtJs 学习笔记基础篇 面板的使用(Ext.Panle、Ext.TabPanel、Ext.Viewport)
4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 8. Ext.data.JsonReader篇二 15 9. Ext.data.HttpProxy篇 19 10. Ext.data.Connection篇一 20 11. Ext.data....
Ext.Viewport、 Ext.TabPanel布局
4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 8. Ext.data.JsonReader篇二 15 9. Ext.data.HttpProxy篇 19 10. Ext.data.Connection篇一 20 11. Ext.data....
9. ExtJs2.0学习系列(9)--Ext.TabPanel之第一式 10. ExtJs2.0学习系列(10)--Ext.TabPanel之第二式 11. ExtJs2.0学习系列(11)--Ext.XTemplate 12. ExtJs2.0学习系列(12)--Ext.TreePanel之第一式 13. ExtJs2.0学习系列...
ext拖拽示例,可以通过ext生成的layout自动拖拽,效果很不错的
items: new Ext.TabPanel({ el: 'hello-tabs', autoTabs:true, activeTab:0, deferredRender:false, border:false }), buttons: [{ text:'Submit', disabled:true },{ text: 'Close', handler: ...
5.1.6 Ext.TabPanel 5.2 信息提示框组件 5.2.1 Ext.MessageBox简介 5.2.2 Ext.MessageBox.alert() 5.2.3 Ext.MessageBox.confirm() 5.2.4 Ext.MessageBox.prompt() 5.2.5 Ext.MessageBox.wait() ...
5.1.6 Ext.TabPanel 5.2 信息提示框组件 5.2.1 Ext.MessageBox简介 5.2.2 Ext.MessageBox.alert() 5.2.3 Ext.MessageBox.confirm() 5.2.4 Ext.MessageBox.prompt() 5.2.5 Ext.MessageBox.wait() ...
2.2.5 Ext.TabPanel 24 2.3 本章小结 27 第3章 表格控件 28 3.1 Grid的特性简介 28 3.2 制作一个简单的Grid 29 3.3 Grid常用功能详解 32 3.3.1 部分属性功能 32 3.3.2 自主决定每列的宽度 33 3.3.3 让Grid...
NULL 博文链接:https://mstr838wind.iteye.com/blog/766860
API 参考 API 参考里面详细描述了所有能在 Ext 类库里面找到的类和组件。最常用的类有: Ext.Element Ext.BorderLayout Ext.DomHelper Ext.TabPanel Ext.UpdateManager
左侧的功能树 代码如下: Ext.define(“AM.view.SystemTree”, { extend : ‘Ext.tree.Panel’, alias : ‘widget.systemTree’, rootVisible : false,// 不展示ROOT displayField : ‘text’, // title:’物流运输...
ext的tabpanel的激活与注意事项,激活的代码实现
第二十七章:选项卡面板——Ext.TabPanel 214 一、关于魅族和M8 214 二、TabPanel概述 214 三、TabPanel标签操作 216 四、标签弹出菜单 217 五、小结 220 第二十八章:Viewport类 221 一、概述 221 二、Viewport的...