ext tab实例

最新推荐文章于 2019-03-13 09:40:51 发布

最新推荐文章于 2019-03-13 09:40:51 发布 · 139 阅读

文章标签：

#ext #tab

ext 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个使用ExtJS框架创建TabPanel组件的具体实例。该示例展示了如何通过JavaScript代码来初始化并配置TabPanel，包括如何添加不同的面板、设置面板的属性及监听面板切换事件。

ext tab实例

//装载tab
var nlSemantics = {completeLoad:0}
Ext.onReady(function (){
	var items = [{//装载 新增TabPanel
	 	   id : "tabPanel1",
	 	   title:'新建模板SQL',
	 	   contentEl : 'nlNewSemantics'
	},{//装载 完整TabPanel
		 id : "tabPanel2",
		 title: "模板SQL",
		 contentEl : 'nlCompleteSemantics'
	}];
	
	//生成tab
	var tab = Ext.createWidget('tabpanel',{
		renderTo  : 'nlSemanticsPanel',
		activeTab : 0,
		width: document.body.offsetWidth-20,
		height: 800,
		plain: true,
		enableTabScroll:true,
		defaults:{autoScroll:true},
		//closable:false
		items:items
	});
	var tabchangeShow = function(){
		if(nlSemantics.completeLoad == 0){
			nlSemantics.completeLoad = 1;
			showSemanticsList(2,'complete_list');
		}
	}
	tab.addListener("tabchange",tabchangeShow);
	//装载新增TabPanel 新增button
	var addButtonItem = new Ext.create('Ext.Button',{
		text:'新建模板',
		renderTo:'new_button',
		handler : function(){showItemEditPage(1)}//showAddSemanticsPanel
	});
	//新增记录列表
	showSemanticsList(1,'new_list');
	//装载完整TabPanel 完整记录列表
})