Panel tool alignment, title when collapsed

[dyndan]

Hi there,

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('<div class="x-tool x-tool-{id} x-tool-align-'
+ this.toolAlign + '"> </div>');
tt.disableFormats = true;
tt.compile();
this.toolTemplate = tt;
}

Ext.Template.prototype.orgInsertFirst = Ext.Template.prototype.insertFirst;
if (this.toolAlign == "left")
Ext.Template.prototype.insertFirst = Ext.Template.prototype.append;
if (arguments) {
for (var i = 0, len = arguments.length; i < len; i++) {
this.orgAddTool(arguments[i]);
}
} else
this.orgAddTool();
Ext.Template.prototype.insertFirst = Ext.Template.prototype.orgInsertFirst;
delete Ext.Template.prototype.orgInsertFirst;
};

Ext.layout.BorderLayout.Region.prototype.orgGetCollapsedEl = Ext.layout.BorderLayout.Region.prototype.getCollapsedEl;
Ext.layout.BorderLayout.Region.prototype.getCollapsedEl = function() {
if (!this.toolTemplate) {
var collapsedTitle = "";
if (this.collapsedTitle
&& (this.position == "north" || this.position == "south")) {
if (typeof this.collapsedTitle == "string")
collapsedTitle = this.collapsedTitle;
else
collapsedTitle = this.title;
collapsedTitle = '<div class="x-layout-collapsed-text">'
+ collapsedTitle + '</div>';
}
if (!this.toolAlign)
this.toolAlign = "right";
var tt = new Ext.Template(collapsedTitle
+ '<div class="x-tool x-tool-{id} x-tool-align-'
+ this.toolAlign + '"> </div>');
tt.disableFormats = true;
tt.compile();
this.toolTemplate = tt;
}

return this.orgGetCollapsedEl();
}