Vollständiger Code für die Entwicklung von Javascript-EXTJS-Komponenten-js-Tutorial-php.cn

Vollständiger Code für die Entwicklung von Javascript-EXTJS-Komponenten

黄舟

Freigeben： 2017-03-18 15:03:09

Original

1856 Leute haben es durchsucht

Ziel: EXTJS-Komponentenentwicklung, Implementierung einer TABSteuerung aus der Komponentenbasis.

Verwendung von EXTJS Version 5.0. Test bestanden.

Dieses Beispiel ist immer noch sehr einfach und veranschaulicht anhand von Beispielen lediglich eine Grundidee der Verwendung von EXTJS für die Komponentenentwicklung.

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

Nach dem Login kopieren

Der Endeffekt ist wie folgt:

Das obige ist der detaillierte Inhalt vonVollständiger Code für die Entwicklung von Javascript-EXTJS-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!