morlok_is_back
29 Jun 2010, 12:38 AM
Hi, i try write plugin for vertical tab panel, panels works fine, but i have problem width tabPanel width. Width is out of visible area (imho becouse vertical tab panel), anyway, this is code:
Ext.ux.VerticalTabPanel = function(config) {
Ext.apply(this, config);
Ext.ux.VerticalTabPanel.superclass.constructor.call(this);
}; // eo constructor
Ext.extend(Ext.ux.VerticalTabPanel, Ext.util.Observable, {
/**
* @cfg {String} tabPosition Pozicia tabov
*/
tabPosition : 'left', // top
/**
* cfg {Number} tabWidth Sirka tabov
*/
tabWidth : 170,
init:function(tabPanel) {
this.tp = tabPanel;
tabPanel.onRender = tabPanel.onRender.createSequence(this.onRender, this);
tabPanel.afterRender = tabPanel.afterRender.createSequence(this.afterRender , this);
tabPanel.adjustBodyWidth = tabPanel.adjustBodyWidth.createSequence(this.adjustBodyWidth , this);
tabPanel.on('resize', this.handleResize, this);
},
onRender: function(ct, position) {
this.tp.strip.addClass('x-tab-strip-left');
if(this.tabPosition == 'left') {
var pos = this.tp.tabPosition == 'top' ? 'header' : 'footer';
this.tp[pos].setStyle('float', 'left');
}
},
afterRender : function() {
var pos = this.tp.tabPosition == 'top' ? 'header' : 'footer';
var header = this.tp[pos];
header.setStyle('width', this.tabWidth+'px');
header.addClass('x-tab-panel-header-'+this.tabPosition);
var bwrap = header.next();
bwrap.addClass('x-tab-panel-bwrap-notop');
},
adjustBodyWidth : function(w){
this.fixWidth();
return this.tabWidth;
},
fixWidth: function() {
if(this.tp.header){
this.tp.header.setWidth(this.tabWidth);
}
if(this.tp.footer){
this.tp.footer.setWidth(this.tabWidth);
}
}
});
and css:
/* left tab panel */
ul.x-tab-strip.x-tab-strip-left li {float: none;}
ul.x-tab-strip.x-tab-strip-left li.x-tab-edge{display: none}
.x-tab-panel-header.x-tab-panel-header-left {border-right: none;}
.x-tab-panel-header.x-tab-panel-header-right {border-left: none;}
.x-tab-panel-bwrap.x-tab-panel-bwrap-notop .x-tab-panel-tbar .x-toolbar {border-style:solid solid solid;border-width:1px 1px 1px;}
.x-tab-panel-bwrap.x-tab-panel-bwrap-notop {background-color: white; border-left: #99BBE8 1px solid;}
.x-tab-panel-body.x-tab-panel-body-top .x-tab-panel-noborder {background-color: #DEECFD;}
any help would be good
use as plugin:
...
plugins: new Ext.ux.VerticalTabPanel()
...
Ext.ux.VerticalTabPanel = function(config) {
Ext.apply(this, config);
Ext.ux.VerticalTabPanel.superclass.constructor.call(this);
}; // eo constructor
Ext.extend(Ext.ux.VerticalTabPanel, Ext.util.Observable, {
/**
* @cfg {String} tabPosition Pozicia tabov
*/
tabPosition : 'left', // top
/**
* cfg {Number} tabWidth Sirka tabov
*/
tabWidth : 170,
init:function(tabPanel) {
this.tp = tabPanel;
tabPanel.onRender = tabPanel.onRender.createSequence(this.onRender, this);
tabPanel.afterRender = tabPanel.afterRender.createSequence(this.afterRender , this);
tabPanel.adjustBodyWidth = tabPanel.adjustBodyWidth.createSequence(this.adjustBodyWidth , this);
tabPanel.on('resize', this.handleResize, this);
},
onRender: function(ct, position) {
this.tp.strip.addClass('x-tab-strip-left');
if(this.tabPosition == 'left') {
var pos = this.tp.tabPosition == 'top' ? 'header' : 'footer';
this.tp[pos].setStyle('float', 'left');
}
},
afterRender : function() {
var pos = this.tp.tabPosition == 'top' ? 'header' : 'footer';
var header = this.tp[pos];
header.setStyle('width', this.tabWidth+'px');
header.addClass('x-tab-panel-header-'+this.tabPosition);
var bwrap = header.next();
bwrap.addClass('x-tab-panel-bwrap-notop');
},
adjustBodyWidth : function(w){
this.fixWidth();
return this.tabWidth;
},
fixWidth: function() {
if(this.tp.header){
this.tp.header.setWidth(this.tabWidth);
}
if(this.tp.footer){
this.tp.footer.setWidth(this.tabWidth);
}
}
});
and css:
/* left tab panel */
ul.x-tab-strip.x-tab-strip-left li {float: none;}
ul.x-tab-strip.x-tab-strip-left li.x-tab-edge{display: none}
.x-tab-panel-header.x-tab-panel-header-left {border-right: none;}
.x-tab-panel-header.x-tab-panel-header-right {border-left: none;}
.x-tab-panel-bwrap.x-tab-panel-bwrap-notop .x-tab-panel-tbar .x-toolbar {border-style:solid solid solid;border-width:1px 1px 1px;}
.x-tab-panel-bwrap.x-tab-panel-bwrap-notop {background-color: white; border-left: #99BBE8 1px solid;}
.x-tab-panel-body.x-tab-panel-body-top .x-tab-panel-noborder {background-color: #DEECFD;}
any help would be good
use as plugin:
...
plugins: new Ext.ux.VerticalTabPanel()
...