Javascript-EXTJS元件開發完整程式碼-js教程-PHP中文網

首頁

web前端

js教程

Javascript-EXTJS元件開發完整程式碼

黄舟

Mar 18, 2017 pm 03:03 PM

目標：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>

最終效果如圖：

以上是Javascript-EXTJS元件開發完整程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript是用C編寫的嗎？檢查證據Apr 25, 2025 am 12:15 AM

是的，JavaScript的引擎核心是用C語言編寫的。 1）C語言提供了高效性能和底層控制，適合JavaScript引擎的開發。 2）以V8引擎為例，其核心用C 編寫，結合了C的效率和麵向對象特性。 3）JavaScript引擎的工作原理包括解析、編譯和執行，C語言在這些過程中發揮關鍵作用。

JavaScript的角色：使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心，因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容，2)通過DOMAPI操作網頁，3)支持複雜的交互效果如動畫和拖放，4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。

Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。