php加extjs开发,Javascript-EXTJS组件开发完整代码

目标：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);

});

最终效果如图：