目标:EXTJS组件开发,从component基础实现一个TAB控件。
使用EXTJS版本为5.0。测试通过。
这个例子还很初级,仅仅是说明通过示例使用EXTJS进行组件开发的一个基本思路。
EXT JS TEST.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;
}
//引入面板类
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:'
// 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
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("p>ul>li");
for(var i=0;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], '
' + title + '');}else{
Ext.DomHelper.insertAfter(extLi[idx], '
' + title + '');}
var extp = this.el.query("ul~p");
var extUl = this.el.query("ul");
Ext.DomHelper.insertAfter(extp[idx] || extUl[0], '
'+ title + '
');}
});
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);
});
最终效果如图: