EXTJS 组件开发（完整例子）

浏览数：37 / 时间：2015年06月09日

目标：EXTJS组件开发，从component基础实现一个TAB控件。

使用EXTJS版本为5.0。测试通过。

这个例子还很初级，仅仅是说明通过示例使用EXTJS进行组件开发的一个基本思路。

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>EXT JS TEST</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/ext-theme-classic-all.css" />
<script type="text/javascript" src="extjs/ext-all.js"></script>
<style>
      
.tabsDiv{
	width:500px;height:450px;
	margin-top: 0px; margin-left: 0px;
}

.tabsDiv ul{
	width: 500px;height: 20px;
	list-style: none;
	
	margin-bottom: 0px;margin: 0px;
	padding: 0px;
	border-left:solid 1px #ffffff;border-right:solid 1px #ffffff;border-top:solid 1px #ffffff;border-bottom:solid 1px #e0e0e0;
}

.tabsDiv div{
	width: 500px;height: 330px;
	background-color: #ffffff; 
	border:solid 1px #e0e0e0;
}


.tabsSelectedLi{
	width: 100px;height: 20px;
	background-color: white;
	float: left;
	text-align: center;
	border-left:solid 1px #e0e0e0;border-right:solid 1px #e0e0e0;border-top:solid 1px #e0e0e0;border-bottom:solid 1px #ffffff;
	cursor:default;
}


.tabsUnSelectedLi{
	width: 100px;height: 20px;
	background-color: #e0e0e0; 
	float: left;
	text-align: center;
	border:solid 1px #e0e0e0;
	cursor:default;	
}


 
 </style>   
</head>

<body>

<script lang="javascript">
 //引入面板类
 Ext.require('Ext.panel.Panel');
//定义组件
Ext.define('Ext.ux.TabControl', {
    extend: 'Ext.Component', // subclass Ext.Component
    alias: 'widget.managedTabs', // this component will have an xtype of 'managedTabs'
    renderTpl:'<div id="mytabs" class="tabsDiv"><ul></ul></div>',

    // Add custom processing to the onRender phase.
    onRender: function () {
        this.callParent(arguments);        
        this.init();
    },
    
    //最后选中项
    lastSelectedIndex:0,
    
    //获取选中TAB头的索引
    getSelectedIndex: function(selectObj){
    	var extLis = this.el.query("div>ul>li");
    	
    	for(var i=0;i<extLis.length;i++){
    		if(extLis[i] == selectObj){
    			return i;
    		}
    	}
    },
    
    init :function(){
    	var me = this;
    	
    	for(var i=0;i<2;i++){
    		this.insertPage(i-1,'tabControl'+i);   			
    	}
    	
    	var extLis = this.el.query("div>ul>li");
	
    	for(var i=0;i<extLis.length;i++){    	
    		extLis[i].onclick = function(){
    			var idx = me.getSelectedIndex(this);
    			me.selectPage(idx);
    		}
    	}       
    },
    
    //选中某页
    selectPage: function(idx){
    	var extUl = this.el.query("div>ul>li");    	
    	extUl[this.lastSelectedIndex].className = "tabsUnSelectedLi";
    	extUl[idx].className = "tabsSelectedLi";
    	
		var extDiv = this.el.query("ul~div");
		extDiv[this.lastSelectedIndex].style.display = "none";
		extDiv[idx].style.display = "block";
	    	
    	this.lastSelectedIndex = idx;
    },
    
    //插入页
    insertPage: function(idx, title){
   		//var extEl = this.el.query("div:first-child");
    	var extLi = this.el.query("ul>li");
    	
    	if(extLi.length<1){
    		var extUl = this.el.query("div>ul");
    		Ext.DomHelper.insertFirst(extUl[0], '<li class="tabsUnSelectedLi">' + title + '</li>');
    	}else{
    		Ext.DomHelper.insertAfter(extLi[idx], '<li class="tabsUnSelectedLi">' + title + '</li>');
    	}	
    	
    	var extDiv = this.el.query("ul~div");
    	var extUl = this.el.query("ul");
    	Ext.DomHelper.insertAfter(extDiv[idx] || extUl[0], '<div>'+ title + '</div>');
    	
    }
});


Ext.onReady(function () {

    var tab = Ext.create('Ext.ux.TabControl');

    Ext.create('Ext.panel.Panel', {
    	header:true,
        title: 'TabControl Panel',
        height: 200,
        width: 400,
        renderTo: Ext.getBody(),
        items: tab
    })

    tab.selectPage(1);


});
	

</script>
</body>

</html>

最终效果如图：

技术分享