PDA

View Full Version : Ext.ux.plugins.WithinToolbarPanel



tarini
10 Jun 2008, 2:22 AM
Too often I create panel with some functionality (defined within itself) called from a toolbar

for example, imagine this situation



myPanel = new Ext.Panel({
html: 'I\'m the panel',
title: 'Title',
alertMyTitle: function() {
alert(this.title);
},
bbar: [{
text:'Show my title',
iconCls: 'my-icon',
handler: ****,
scope: ****
}]
}



Inside inline bbar configuaration it's impossible to call some function defined as methods within panel because you cannot reference current panel because it's not created yet.

With this plugin you can call this methods just set a string (the method name) as handler and set no scope; in this way:


myPanel = new Ext.Panel({
html: 'I\'m the panel',
title: 'Title',
alertMyTitle: function() {
alert(this.title);
},
bbar: [{
text:'Show my title',
iconCls: 'my-icon',
handler: 'alertMyTitle'
}],
plugins: [ new Ext.ux.plugins.WithinToolbarPanel() ]
}


Automatically it "translate" handler string in a function defined in the panel and set the correct scope.


Here's the source:



Ext.ns("Ext.ux.plugins");

Ext.ux.plugins.WithinToolbarPanel = function(o) {
Ext.apply(this, o);
}

Ext.ux.plugins.WithinToolbarPanel.prototype = {
init: function(panel) {
for(var i = 0; i<panel.bottomToolbar.length; i++) {
var i = panel.bottomToolbar[i];
if(i.handler && !i.scope) {
i.handler = panel[i.handler];
i.scope = panel
}
}
}
}



This version works only with bottomToolbar but it's very easy to extend for topToolbar.


If you have some problems or ideas, please post here