- Ext.require(
- 'Ext.tab.*'
- );
- Ext.onReady(
- function(){
- //添加一个Tab,在最后面添加
- Ext.create(
- 'Ext.Button',
- {
- text:'添加一个Tab',
- renderTo:Ext.getBody(),
- handler:function(){
- tabs.add(
- {
- title:'新添加的tab',
- html:'这个tab是通过add添加的',
- closable:true
- }
- );
- }
- }
- );
- //插入一个tab,可以指定插入的位置
- Ext.create(
- 'Ext.Button',
- {
- text:'插入一个Tab',
- renderTo:Ext.getBody(),
- handler:function(){
- tabs.add(3, //第一个参数是用来指定插入的位置
- {
- title:'新插入的tab',
- html:'这个tab是通过insert插入来的',
- closable:true
- }
- );
- }
- }
- );
- //删除tab---指定删除的位置
- Ext.create(
- 'Ext.Button',
- {
- text:'根据位置删除tab',
- renderTo:Ext.getBody(),
- handler:function(){
- //删除第四位置上的tab
- tabs.remove(4);
- }
- }
- );
- //删除tab---删除指定id的tab
- Ext.create(
- 'Ext.Button',
- {
- text:'根据id删除tab',
- renderTo:Ext.getBody(),
- handler:function(){
- //删除id为tab3的tab
- tabs.remove('tab3');
- }
- }
- );
- //设置活动窗口:
- Ext.create(
- 'Ext.Button',
- {
- text:'设置活动窗口',
- renderTo:Ext.getBody(),
- handler:function(){
- //设置2为活动窗口
- tabs.setActiveTab(2);
- }
- }
- );
- var tabs = Ext.create(
- 'Ext.tab.Panel',
- {
- renderTo:Ext.getBody(),
- activeTab:0,
- width:600,
- height:300,
- plain:true,
- defaults:{
- autoScoll:true
- },
- items:[
- {
- id:'tab1',
- title:'Tabs-1',
- html:'这是一个普通的tab'
- },{
- id:'tab2',
- title:'tab-2',
- contentEl:'tab2'
- },{
- id:'tab3',
- title:'ajax Tab',
- autoLoad:{
- url:'tabAction',
- params:{
- data:'从客户端传入的参数'
- },
- method:'GET'
- }
- },{
- id:'4',
- title:'事件tab',
- listeners:{
- activate:function(tab){
- alert(tab.title + ': activate事件触发。');
- }
- },
- html:'带事件的tab',
- autoLoad:false
- },{
- id:'tab5',
- title:'不可用的tab',
- disabled: true
- }
- ]
- }
- );
- }
- );
其他代码参考上一篇文章
效果图:
相关推荐
Extjs4 tab 基本选项卡及增删插入操作
Extjs4---grid的修改、删除功能---结合struts2、hibernate
extjs4-教程搭建 ExtJS 入门学习、可视化开发环境、布局详解 、文档阅读
Extjs4---combobox省市区三级联动+struts2
extjs_4.1.0_community_extjs4-mvc-complex-dashboard
extjs4-slate 主题 extjs4.0.7
Extjs4--Form登录功能,结合struts2
extjs2----关于extjs 的使用,操作.比较初级,但是也比较使用。适合初步接触extjs的朋友
extjs4-ssi,用户管理,角色管理,菜单管理,现成的随时使用
ExtJS----HelloWorld程序源码
深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320...
一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa
extjs4-ssi例子,用户管理,角色管理,菜单管理等,,现成的
extjs--创建图表 折线图、饼状图、柱状图
ExtJS增删改查ExtJS增删改查ExtJS增删改查ExtJS增删改查ExtJS增删改查ExtJS增删改查ExtJS增删改查ExtJS增删改查ExtJS增删改查ExtJS增删改查
extjs-basex.js extjs-basex.js extjs-basex.js
ExtJS4.0-API Ext4.0-API Ext4 ExtJS4 API 学EXTJS4的好东西...
extjs-620-docs官方文档extjs-620-docs官方文档extjs-620-docs官方文档
EXTJS---完整数据库代码,全网唯一,非常适合EXTJS搭建框架,包含动态树,菜单,集成SPIRNGMVC+exjs+jdbc 等