Ext.ux.menu.StoreMenu - Ajax Store as menu-item config

[Andrew Peacock]

Hi,
I'm using Ext.Direct for my DB calls, as in

var storeAccounts = new Ext.data.DirectStore({
    storeId:'storeAccounts',
    
    // Loading configuration
    autoLoad: true,   
    directFn: Ext.PromotionBot.Accounts.getAccounts,

Is there anyway to use directFN with this great little menu of yours?

Regards,
Andy

[wm003]

StoreMenu supports an own store as config item, so you might try something like

var menu = new Ext.ux.menu.StoreMenu({ 
         store: storeAccounts
}); 

[shawnb457]

Can you add your menu to a splitbutton.

    xtype: 'splitbutton',
    text: 'Group',
    id: 'groupButton',
    menu:buttonmenu,

  var buttonmenu = new Ext.ux.menu.StoreMenu({ 
         store:mainStore,
}); 
var mainStore = new Ext.data.Store({
    
    
    // explicitly create reader
    reader: new Ext.data.JsonReader({
        idProperty: 'groupid',
        root: 'groups',
        fields: [
           {name: 'label'},
           {name: 'test'},
           
        ]
    })
}); 

[c.barca]

Hello,
I try to set some icon class on Store menu json as is:

 {
        "text": "normal menu line",
        "iconcls": "exclamation",
        "handler": "function(item) {Ext.MessageBox.alert('Ext.ux.menu.StoreMenu','You selected '+item.text);}"
    }, 

where exclamation class is defined on external css as is :

...
.exclamation { background-image: url(../icons/exclamation.png) !important; }
... 

The image was present on correct path and css file is linked on my html test page.
Any suggestion ?

Thank you, regards

[wm003]

Try "iconCls" instead of "iconcls" it's case sensitive

[Joe Kuan]

Hi all,

I have modified the original version StoreMenu and added several new features. As I need them in my project.

- Able to define handler from the client side
- Added function and modified StoreMenu can be used to display both menu items from Store and other components
- Dis/Enable to load from Store every time when the menu is expanded.

For usage and getting the source, click here

Thanks
Joe

[gigel]

I've modified the original code, so that items get automatically turned into StoreMenus if they have the "menuId" attribute set:

Ext.namespace('Ext.ux.menu');

Ext.ux.menu.StoreMenu = function(config) {
	Ext.ux.menu.StoreMenu.superclass.constructor.call(this,config);
		this.baseParams = config.baseParams || {};
	if(!this.store){
		//at least url/proxy or data need to be given in config when initiating this component
		this.store = new Ext.data.SimpleStore({
			fields: ['config'],
			url: this.url,
			baseParams: this.baseParams
			 /*,
			proxy:this.proxy,
			data: this.data
			*/
		});
	}
	// Keep track of what menu items have been added
	this.storeMenus = [];
	if (this.itemsOffset === undefined) {
		this.itemsOffset = 0;
	}
	this.on('show', this.onMenuLoad, this);
	this.store.on('beforeload', this.onBeforeLoad, this);	
	this.store.on('load', this.onLoad, this);
};
								   
Ext.extend(Ext.ux.menu.StoreMenu, Ext.menu.Menu, {
	loadingText: Ext.LoadMask.prototype.msg || 'Loading...',
	loaded:	  false,

	onMenuLoad: function(){
		if(!this.loaded || this.autoReload){
			//if(this.options) {
				//this.store.loadData(this.options);
			//}
			//else {
				this.store.load();
			//}
		}
	},

	updateMenuItems: function(loadedState,records) {
		//var visible = this.isVisible();
		//this.hide(false);
		
		for (var i = 0; i < this.storeMenus.length; i++) {
			this.remove(this.storeMenus[i]);
		}
		this.storeMenus = [];

		//to sync the height of the shadow
		 this.el.sync();	

		if (loadedState) {
			for(var i=0, len=records.length; i<len; i++){
				//create a real function if a handler or menu is given as a string (because a function cannot really be encoded in JSON
				if (records[i].json.handler) {
					eval("records[i].json.handler = "+records[i].json.handler);
					//records[i].json.handler = new Function(records[i].json.handler);
				} else if (this.itemsHandler) {
					records[i].json.handler = this.itemsHandler;
				}

				if (records[i].json.menu) {
					eval("records[i].json.menu = "+records[i].json.menu);
					//records[i].json.menu = new Function(records[i].json.menu);
				}
				//console.log([this, records[i]]);
				if (records[i].json.menuId) {
					records[i].json.menu = new Ext.ux.menu.StoreMenu({
						url: this.initialConfig.url,
						menuId: records[i].json.menuId
					});
				}
				
				this.storeMenus.push(this.insert(this.itemsOffset + i, records[i].json));
			}
			//this.hide();
			//this.show();
		}
		else {
			this.storeMenus.push(this.insert(this.itemsOffset + i,'<span class="loading-indicator">' + this.loadingText + '</span>'));
		}

		this.loaded = loadedState;
		//if(visible && loadedState) {
		//this.show(this.getEl().getXY());
			//this.show();
		//}
	},
	onBeforeLoad: function(store){
		this.store.baseParams = this.baseParams;
		this.store.baseParams.menuId = this.menuId;
		this.updateMenuItems(false);
	},
	onLoad: function(store, records){
		this.updateMenuItems(true,records);		
	},
		setItemsHandler: function(handler) {
		  this.itemsHandler = handler;
	},
	setOffset: function(offset) {
		  this.itemsOffset = offset;
	},
	setAutoReload: function(autoReload) {
		  this.autoReload = autoReload;
	}
});

[xorge2]

I've got a n00b question. How do I add this wonderful widget to my current project. Thanks guys.

[wm003]

I've got a n00b question. How do I add this wonderful widget to my current project. Thanks guys.

Please take a look at post #1 . Check out the demopage to have an idea of implementation.

[momerak]

someone could send some sources in extjs4 example implementation. thanks