Ext.ux.StoreToolbar

[saprot]

Hi All,
recently I've looked into http://www.sencha.com/forum/showthread.php?61674-Ext.ux.menu.StoreMenu-Ajax-Store-as-menu-item-config (Ext.ux.menu.StoreMenu) source code. Inspired by that very useful extension by wm003, I've done something simillar, but instead of menu, we're creating Toolbar!

Code:


/**
* by pk@saprot.net
* based on idea presented in ext.ux.menu.storemenu by http://lubber.de
*/

Ext.namespace('Ext.ux');

Ext.ux.StoreToolbar = function(config) {
Ext.ux.StoreToolbar.superclass.constructor.call(this, config);

if(!this.store) {
this.store = new Ext.data.SimpleStore({
fields : [],
url : this.url,
baseParams: this.baseParams
});
}

if(!this.afterLoad) this.afterLoad = function() {};

this.on('afterrender', this.onToolbarLoad, this);
this.store.on('beforeload', this.onBeforeLoad, this);
this.store.on('load', this.onLoad, this);
};

Ext.extend(Ext.ux.StoreToolbar, Ext.Toolbar, {
loadingText : 'Loading menu...',
loaded : false,

onToolbarLoad : function(){
if(!this.loaded)
this.store.load();
},

updateToolbarItems : function(loadedState, records) {
this.removeAll();

if(this.ownerCt)
this.ownerCt.el.unmask();

if(loadedState) {
for(var i = 0, len = records.length; i < len; i++){
if(records[i].json.handler)
eval("records[i].json.handler = " + records[i].json.handler);

if(records[i].json.menu)
eval("records[i].json.menu = " + records[i].json.menu);

if(records[i].json.getIcon && records[i].json.iconCls)
eval("records[i].json.iconCls = '" + getIcon(records[i].json.iconCls) + "';");

this.add(records[i].json);
}
}
else {
if(this.ownerCt)
this.ownerCt.el.mask(this.loadingText, 'x-mask-loading');
}

this.loaded = loadedState;
},

onBeforeLoad : function(store){
this.store.baseParams = this.baseParams;
this.updateToolbarItems(false);
this.doLayout();
},

onLoad : function(store, records){
this.updateToolbarItems(true, records);
this.doLayout();
this.afterLoad();
},

reload : function() {
this.loaded = false;
this.onToolbarLoad();
}
});



usage:


new Ext.ux.StoreToolbar({
url : 'get_menu.php',
afterLoad : function(){
//...
}
});


generating some JSON in PHP:


$menu = array();
$menu[] = array(
'text' => 'Log out',
'getIcon' => true,
'iconCls' => 'door_in',
'handler' => "function() {

}"
);

echo json_encode($menu);


if we setup getIcon to true, Ext.ux.StoreToolbar will try to load icon via http://tdg-i.com/js/examples/ext/tdgiux/TDGi.iconMgr/ extension. We should rename getIcon to our icon manager function name.

There is no live demo, because it's just a toolbar :)

[dcoan]

Looks cool. can you post an example php that includes menus? I tried a couple of things..and I could get the menu to appear when the toolbar button is clicked....but handlers on the menu buttons (inside the menu) didn't work: ERROR:

l.fireFn.apply is not a function

[saprot]

for example:



$menu[] = array(
'text' => 'Something',
'iconCls' => 'lorry',
'menu' => "[
{
text : 'Something 2...',
iconCls : 'folder',

handler : function() {

}
}

] //eof menu"
);

[dcoan]

thanks... I was trying something like this:

'menu' => array(.....

duh

[dcoan]

So, what about icons in the sub menu?
I have tried this:


'menu' => "[
{
text : 'Something 2...',
iconCls : 'folder',
getIcon : true,
handler : function() {
alert('hello');
}
}

] //eof menu"

Guess I need to extend it further to handle the menus...

Anyways, a cool extension...thanks.

[saprot]

you can't use getIcon if you aren't using that extension: http://tdg-i.com/js/examples/ext/tdgiux/TDGi.iconMgr/ . You just have to write iconCls : 'folder', and have 'folder' class somewhere in your CSS files.