Code complet de développement de composants Javascript-EXTJS-js tutoriel-php.cn

Code complet de développement de composants Javascript-EXTJS

黄舟

Libérer： 2017-03-18 15:03:09

original

1745 Les gens l'ont consulté

Objectif : Développement de composants EXTJS, implémenter un TABcontrôle à partir de la base des composants.

Utilisation d'EXTJS version 5.0. Test réussi.

Cet exemple est encore très basique et illustre simplement une idée de base de l'utilisation d'EXTJS pour le développement de composants à travers des exemples.

<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>

Copier après la connexion

L'effet final est le suivant :

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!