Maison > Article > interface Web > Javascript-EXTJS组件开发完整代码

Javascript-EXTJS组件开发完整代码

黄舟original: 2017-03-18 15:03:091670parcourir

目标：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>
      
.tabsp{
	width:500px;height:450px;
	margin-top: 0px; margin-left: 0px;
}

.tabsp 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;
}

.tabsp p{
	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(&#39;Ext.panel.Panel&#39;);
//定义组件
Ext.define(&#39;Ext.ux.TabControl&#39;, {
    extend: &#39;Ext.Component&#39;, // subclass Ext.Component
    alias: &#39;widget.managedTabs&#39;, // this component will have an xtype of &#39;managedTabs&#39;
    renderTpl:&#39;<p id="mytabs" class="tabsp"><ul></ul></p>&#39;,

    // 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("p>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,&#39;tabControl&#39;+i);   			
    	}
    	
    	var extLis = this.el.query("p>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("p>ul>li");    	
    	extUl[this.lastSelectedIndex].className = "tabsUnSelectedLi";
    	extUl[idx].className = "tabsSelectedLi";
    	
		var extp = this.el.query("ul~p");
		extp[this.lastSelectedIndex].style.display = "none";
		extp[idx].style.display = "block";
	    	
    	this.lastSelectedIndex = idx;
    },
    
    //插入页
    insertPage: function(idx, title){
   		//var extEl = this.el.query("p:first-child");
    	var extLi = this.el.query("ul>li");
    	
    	if(extLi.length<1){
    		var extUl = this.el.query("p>ul");
    		Ext.DomHelper.insertFirst(extUl[0], &#39;<li class="tabsUnSelectedLi">&#39; + title + &#39;</li>&#39;);
    	}else{
    		Ext.DomHelper.insertAfter(extLi[idx], &#39;<li class="tabsUnSelectedLi">&#39; + title + &#39;</li>&#39;);
    	}	
    	
    	var extp = this.el.query("ul~p");
    	var extUl = this.el.query("ul");
    	Ext.DomHelper.insertAfter(extp[idx] || extUl[0], &#39;<p>&#39;+ title + &#39;</p>&#39;);
    	
    }
});


Ext.onReady(function () {

    var tab = Ext.create(&#39;Ext.ux.TabControl&#39;);

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

    tab.selectPage(1);


});
	

</script>
</body>

</html>

最终效果如图：

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：使用jQuery进行组件开发完整例子详解Article suivant：详细介绍javascript使用prototype实现OOP继承的方法

Articles Liés

Voir plus