PDA

View Full Version : VerticalTabPanel



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()
...

cq.yangyu@gmail.com
29 Jun 2010, 11:45 PM
if there is a demo would be great !

morlok_is_back
1 Jul 2010, 8:20 AM
Ok, i fix width setting tab panels postition as absolute . I dont much test this code, but for me work very vell, few rows and required behavior.


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 Vertical tab position. Supported only left and right
*/
tabPosition : 'left', // top
/**
* cfg {Number} tabWidth Tab width
*/
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);
},

onRender: function(ct, position) {
this.tp.strip.addClass('x-tab-strip-left');
if(this.tabPosition == 'left' || this.tabPosition=='right') {
var header = this.tp['header'];
header.setStyle(this.tabPosition, '0px');
header.setStyle('z-index', 100);
this.tp.getEl().setStyle('padding-'+this.tabPosition, this.tabWidth+'px');
}
},

afterRender : function() {
var header = this.tp['header'];
header.setStyle('width', this.tabWidth+'px');
header.addClass('x-tab-panel-header-'+this.tabPosition);
header.next().addClass('x-tab-panel-bwrap-notop');
header.next().addClass('x-tab-panel-bwrap-'+this.tabPosition);
},

adjustBodyWidth : function(w){
this.fixWidth();
},

fixWidth: function() {
if(this.tp.header){
this.tp.header.setWidth(this.tabWidth);
}
if(this.tp.footer){
this.tp.footer.setWidth(this.tabWidth);
}
}
});

and finaly css:


/* left, right 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,
.x-tab-panel-header.x-tab-panel-header-right {border-right: none; position: absolute; }
.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}
.x-tab-panel-bwrap.x-tab-panel-bwrap-left {border-left: #99BBE8 1px solid;}
.x-tab-panel-bwrap.x-tab-panel-bwrap-right {border-right: #99BBE8 1px solid;}
.x-tab-panel-body.x-tab-panel-body-top .x-tab-panel-noborder {background-color: #DEECFD;}

Jaitsu
2 Jul 2010, 2:32 AM
can you post an example/screenshot?

morlok_is_back
2 Jul 2010, 4:58 AM
can you post an example/screenshot?
for example i dont have time, but here is screenshot:21236
and scrollbar is there, becouse i testing it, and seems to work.

moegal
2 Jul 2010, 5:22 AM
this was done for v2, maybe it will help

http://www.sencha.com/forum/showthread.php?26257

Marty

morlok_is_back
2 Jul 2010, 5:26 AM
this was done for v2, maybe it will help

http://www.sencha.com/forum/showthread.php?26257

Marty

Thx