Ext.TabPanel控件(TAB块容器)
renderTo 属性 : 其值为该控件绑定的DIV的ID
width 属性 :其值为控件的宽
height 属性 :其值为控件的高
activeTab 属性 :其值为Items所包含元素号,(即为从0开始的),哪个被选中,那个就是当前第一个被激活的块.
defaults 属性 :设置默认值。里面可以包含其他的默认内置配置{
1.autoHeight:为true表示自动根据包含的文本内容变行高
2.autoScroll:为true表示自动提供水平下拉条
}
items 属性 :其值为用一对大括号[]括起来的一个个元素组,每个元素用{}括起来,然后元素之间用逗号隔开{
1.contentEl : 用来与页面中的某个DIV元素绑定在一起,其值与DIV的ID值相匹配,运行时将内容复制到其TAB块中
2.title:TAB的标题
3.html:对应的一个HTML文本。
4.autoLoad:运用于AJAX里面包含{
url:其值为要加载的HTML或服务器地址
param:表示要传递的参数序列,例如:‘foo=bar&wtf=1’
disabled:表示该项可用还是不可用
}
5.listeners: {activate: fn1}设置一个监听器,当该块被激活时调用fn1函数
}
例子:
var tabs = new Ext.TabPanel({
renderTo: 'tt',
width:450,
activeTab: 1,
frame:false,
defaults:{autoHeight: true},
items:[
{contentEl:'d1', title: 'gggg'},
{contentEl:'d2', title: 'ffff'}
]
});
var tabs2 = new Ext.TabPanel({
renderTo: document.body,
activeTab: 0,
width:600,
height:250,
plain:true,
defaults:{autoScroll: true},
items:[{
title: 'Normal Tab',
html: "My content was added during construction."
},{
title: 'Ajax Tab 1',
autoLoad:'ajax1.htm'
},{
title: 'Ajax Tab 2',
autoLoad: {url: 'ajax2.htm', params: 'foo=bar&wtf=1'}
},{
title: 'Event Tab',
listeners: {activate: handleActivate},
html: "I am tab 4's content. I also have an event listener attached."
},{
title: 'Disabled Tab',
disabled:true,
html: "Can't see me cause I'm disabled"
}
]
});
分享到:
相关推荐
ExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.doc
ExtJs学习笔记,共30讲 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 8. Ext.data.JsonReader篇二 15 ...
Extjs 5 学习笔记,在网上下载整理好的。
22. extJs 2.0学习笔记(Ext.Panel篇三) 59 23. extJs 2.0学习笔记(Ext.Panel篇四) 62 24. extJs 2.0学习笔记(组件总论篇) 66 25. extJs 2.0学习笔记(Ext.Element API总结) 69 26. extJs 2.0学习笔记(Element.js篇) ...
ExtJS4学习笔记(三)---VBox的使 ExtJS4学习笔记(四)---Grid的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(七)---带搜索的Grid(SearchGrid) ExtJS4学习笔记(八)---...
extjs学习笔记, 对应的书籍是extjs in action 没有看完...呵呵
EXTJS 学习笔记 ROY EXTJS学习笔记,自己学习的过程,不多但是实用
适合ExtJs开发人员extjs技术上手以及深入
根据word做的pdf版本的ExtJs学习笔记,根据原版进行了删减,欢迎大家下载啊,哈哈。
ExtJs简明教程+Extjs学习笔记,来源网络,免费奉送,我讨厌需要资源分~
老师整理的extjs学习笔记,和大家共享
extJs学习笔记,让新手能够快速理解extJS的原理,深人浅出的了解extjs的精髓。
是我学习Extjs 的学习笔记收藏整理,学习extjs的同学可以好好看看,绝对有好处,学到很多知识!
非常适合新手学习extjs的笔记,让你少走弯路
语言程序设计资料:ExtJs学习笔记-2积分.doc
自己总结的extjs4学习笔记,自己总结的extjs4学习笔记,自己总结的extjs4学习笔记,
EXTJS学习笔记!亲,初学者的必备哦,其中还有部分的Aop、Hibernate