EXTJS 組件開發（完整例子），extjs組件開發例子
目標：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>
最終效果
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
