Panel tool alignment, title when collapsed
By jane | January 6, 2009
I added a possibility to configure the tools alignment and collapsed title for Ext.Panel.
See screenshot as attachment.
http://extjs.com/forum/attachment.php?attachmentid=9412&d=1221479331
It allows you to code the following:
var north = new Ext.Panel({
title : 'Navigation',
collapsedTitle : true, //true or string to use as collapsed title
toolAlign : 'left', //Either left or right
tools : [{
id : 'help',
handler : function(evt, toolEl, panel) {
},
scope : north
}, {
id : 'plus',
handler : function(evt, toolEl, panel) {
},
scope : north
}],
region : 'north',
split : true,
width : 200,
collapsible : true,
margins : '3 0 3 3',
cmargins : '3 3 3 3',
html : 'Hello World!'
});
var south = new Ext.Panel({
title : 'South',
collapsedTitle : 'South collapsed.',
region : 'south',
split : true,
width : 200,
collapsible : true,
margins : '3 0 3 3',
cmargins : '3 3 3 3',
html : 'Hello World!'
});
Required css:
.x-layout-collapsed-text{float:left;color:#15428b;font:bold 11px tahoma,arial,verdana,sans-serif;padding:5px 2px 4px 5px;border:0 none;background:transparent;}
.x-panel-header-text{float:left;}
.x-tool-align-left{float:left;}
Required js: (Could be implemented much more straight forward as native part of Ext.)
Ext.Panel.prototype.orgAddTool = Ext.Panel.prototype.addTool;
Ext.Panel.prototype.addTool = function() {
if (!this.toolAlign)
this.toolAlign = "right";
if (!this.toolTemplate) {
var tt = new Ext.Template(' + this.toolAlign + '">
#If you have any other info about this subject , Please add it free.# |
Topics: enart.xn--fiqs8sjn5by0n.com | edit
