my customized tab

[cdj]

My poor english always makes me run into the embarrassed status. i have to use chinese here.:">

but it looks like the forum doesn't support chinese.T_T
this is a simple implement extends with Ext.Component,and just supply a sample for those who learns EXT's extend first time.

my code:

//it's inherited from Ext.Component
//Ext.ns("Ext.ux");
Ext.ux.CJTab = function(config){
Ext.apply(this,config);
var self = this;
this.initComponent = function(){
Ext.ux.CJTab.superclass.initComponent.call(this);
this.on({
'render':onRender
})
this.fireEvent('beforeshow');
this.items = this.items||[];
this.tpl = new Ext.XTemplate(
'<div id="cm_tab">',
'<div class = "cm-tabs cm-tabs-first"></div>',
'<tpl for=".">',
'<a class="cm-tabs-content" href="#" >{title}</a>',
'<div class="cm-tabs ',
'<tpl if="xindex === xcount">',
'cm-tabs-last',
'</tpl>',
'"',
'></div>',
'</tpl>',
'</div>',

'<div id="cm_submenu">',
'<table class="cm_submenu" cellpadding="0" cellspacing="0">',
'<tbody>',
'<tr>',
'<td class="cm_submenu_left"></td>',
'<td id="cm_submenu_content" class="cm_submenu_content">',
'<tpl for=".">',
'<div class="cm-submenu-content-el">',
'<ul>',
'<tpl for="menu">',
'<li><a class="act" href="{url}">{text}</a></li>',
'</tpl>',
'</ul>',
'</div>',
'</tpl>',
'</td>',
'<td class="cm_submenu_right"></td>',
'</tr>',
'</tbody>',
'</table>',
'</div>'
);
this.el = Ext.get(this.ct);
if(this.pos){
if(Ext.isIE){this.pos[1]+=18};
this.el.position('relative','',this.pos[0],this.pos[1]);
}
this.tpl.insertFirst(this.el, this.items);//construct dom finished
this.tabs = Ext.select("#cm_tab a.cm-tabs-content", true);//TAB
this.sms = Ext.select("#cm_submenu a.act",true);//sub menu
this.tabgs = Ext.select("#cm_tab div.cm-tabs",true);
this.submenus = Ext.select("#cm_submenu div.cm-submenu-content-el",true);
this.fireEvent('render');
}

var onRender = function(){
self.tabs.each(function(el,ct,index){
el.on({
'click':function(){
var act;
if(act = config.items[index].action){
act.call(el,index,el);
}
cm_tab_select.call(el,index);
},
'mouseover':function(){
//the left side of the tab
var lel = self.tabgs.item(index);
if(lel.hasClass('cm-tabs-first')){
lel.addClass("cm-tabs-first-hover");
}else if(lel.hasClass('cm-tabs-active-r')){
lel.addClass("cm-tabs-active-r-hover");
}else{
lel.addClass("cm-tabs-r-hover");
}
//the right side of the tab
var nel = self.tabgs.item(index+1);
if(nel.hasClass('cm-tabs-last')){
nel.addClass("cm-tabs-last-hover");
}else if(nel.hasClass('cm-tabs-active-l')){
nel.addClass("cm-tabs-active-l-hover");
}else{
nel.addClass("cm-tabs-l-hover");
}
},
'mouseout':function(){
var lel = self.tabgs.item(index);
lel.removeClass("cm-tabs-first-hover");
lel.removeClass("cm-tabs-active-r-hover");
lel.removeClass("cm-tabs-r-hover");
var nel = self.tabgs.item(index+1);
nel.removeClass("cm-tabs-last-hover");
nel.removeClass("cm-tabs-active-l-hover");
nel.removeClass("cm-tabs-l-hover");
}
});
el.addClassOnOver('tab-hover');
})
cm_tab_select.call(self.tabs.item(0),0);

self.sms.each(function(el,ct,index){
el.on({
'click':function(){
clickSubMenu_u.call(el);
},
'mouseover':function(){
if(!el.pressed){
el.setStyle('color',"#f0f0f0");
}
},
'mouseout':function(){
if(!el.pressed){
el.setStyle('color',"#000000");
}
}
})
})
}

/**
* function for tab select
*
*/
var cm_tab_select = function(index){
resetAllTab();
this.addClass('cm-tab-active');
self.tabgs.item(index).removeClass('cm-tabs-active-r-hover');
self.tabgs.item(index+1).removeClass('cm-tabs-active-l-hover');

if (self.tabgs.item(index).hasClass('cm-tabs-first')){
self.tabgs.item(index).addClass('cm-tabs-first-active');
}else {
self.tabgs.item(index).addClass('cm-tabs-active-l');
}
if (self.tabgs.item(index+1).hasClass('cm-tabs-last')){
self.tabgs.item(index+1).addClass('cm-tabs-last-active');
}else {
self.tabgs.item(index+1).addClass('cm-tabs-active-r');
}
self.submenus.item(index).setStyle('display','block');
self.fireEvent('tabchange',index);
}

var cm_tab_hover = function(index){

}

var clickSubMenu_u = function(){
resetAllAction();
this.pressed= true;
this.setStyle('color',"#ffffff");
this.setStyle('font-weight',"bold");
}

var resetAllTab = function(){
self.tabs.each(function(el,ct,index){
el.removeClass('cm-tab-active');
})
self.tabgs.each(function(el,ct,index){
if (el.hasClass('cm-tabs-first')){
el.removeClass('cm-tabs-first-active');
}else {
el.removeClass('cm-tabs-active-l');
el.removeClass('cm-tabs-active-r');
}
if (el.hasClass('cm-tabs-last')){
el.removeClass('cm-tabs-last-active');
}
})
self.submenus.each(function(el,ct,index){
el.setStyle('display','none');
})
}

var resetAllAction = function(){
self.sms.each(function(el,ct,index){
el.pressed = false;
el.setStyle('color','#000');
el.setStyle('font-weight','');
})
}
Ext.ux.CJTab.superclass.constructor.call(this);
}
Ext.extend(Ext.ux.CJTab,Ext.Component);

Usage example:
your js should looks like this

var cdj = new Ext.ux.CJTab({
id:'cdj',
ct:'cjtab2',// important ! the div element id in your html page
pos:[300,43],//x,y coordinates
listeners:{
'beforeshow':function(el,index){

},
'tabchange':function(index){
Ext.log("tab changed to tab"+index);//function fired when the tab was changed
}
},
items:[
{
title:'tab1',
action:function(index){
Ext.log("tab"+index+"has actived");//function fired when the tab was clicked
},
menu:[
{
text:'menu element1',
url:'#' (http://www.extjs.com/forum/'#')
},
{
text:'menu element2',
url:'#' (http://www.extjs.com/forum/'#')
}]
},
{
title:'tab2',
menu:[
{
text:'menu element1',
url:'#' (http://www.extjs.com/forum/'#')
},
{
text:menu element2',
url:'#' (http://www.extjs.com/forum/'#')
}]
}
]
})
if you have interesting with it,please download the .zip file which include full sample files,download and run it.
:D

[galdaka]

Hi,

Excellent work!

Can you put a drag & drop ext examples folder example?

Thanks in advance,

[cdj]

HI~
thanks for your kind reply.
but…… sorry? what do you mean ?:-/
i didn't use drag&drop method in this extension.8-|

[galdaka]

Sorry for my English,

I say that you can put a complete example in a ZIP file. The Ext community can test your extension easily. The better way is put a ZIP file that can extract y EXT examples folder and run.

Thanks in advance,

[cdj]

Sorry for my English,

I say that you can put a complete example in a ZIP file. The Ext community can test your extension easily. The better way is put a ZIP file that can extract y EXT examples folder and run.

Thanks in advance,
;)yeah, i have update it ,now the zip file includes the full sample files.
thanks again !

[mystix]

[ moved this thread to the Examples forum ]

keep up the good work!

p.s. this forum accepts posts in 中文。再试一次吧。;)

[mjlecomte]

My poor english always makes me run into the embarrassed status. i have to use chinese here.:">


Your english is good enough! ;)

Interesting application, nice job.

[cdj]

[quote=mystix;216985][ moved this thread to the Examples forum ]

p.s. this forum accepts posts in

[mystix]

[QUOTE=cdj;218063]:D

[cdj]

[quote=mystix;216985][ moved this thread to the Examples forum ]

keep up the good work!

p.s. this forum accepts posts in

[neoliao]

我试试看
I try to input some Chinese character

[cdj]

my god~~~ 8-| i'm so confused~~

why my chinese isn't viewed?

[cdj]

trying again in FF!
你拍一，我拍一，小霸王出了学习机

[cdj]

well~~seems like it's working well in FireFox,but not in IE:D

[cdj]

Your english is good enough! ;)

Interesting application, nice job.
谢谢！;)

[cdj]

[ moved this thread to the Examples forum ]

keep up the good work!

p.s. this forum accepts posts in 中文。再试一次吧。;)
呵呵，强！

[mystix]

呵呵，强！

很好！

[lorezyra]

我试试看
I try to input some Chinese character

Japanese support too? :D

[cjqcjq2008]

I download .zip file and extract it, only one unrecognized file named Ext[1].ux.CJTab, why?

[mystix]

Japanese support too? :D
え？lorezyra　さんは日本人ですか？

[mystix]

I download .zip file and extract it, only one unrecognized file named Ext[1].ux.CJTab, why?

download with Firefox / Chrome instead.