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

[wm003]

Just a little widget to be able to create menus with stores as item-config:

Demopage: http://www.lubber.de/extjs/storemenu

Current Version v 0.2

Revision History
v 0.2 [2009/03/04]
- added support for submenu ("menu" has to be delivered such as "handler")

v 0.1 [2009/03/03]
Initial release


Simple call:

var menu = new Ext.ux.menu.StoreMenu({
    url:'gimme_json_menu_entries.php',
    baseParams: {
        var_one: 'foo',
        var_two: 'bar'
    }
}); 

StoreMenu will show a loading indicator when the menu is opened the first time and renders the final menu after ajax-response.

it would process a returned json like:

[
    {
        "text": "first entry",
        "iconCls": "iconclass1",
        "handler": "function(item) {alert('entry one is called '+item.text);}" 
    },
    '-',
    'some text',
    '-',
    {
        "text": "entry 2",
        "iconCls": "iconclass2",
        "handler": "function(item) {myextapp.my_public_method(1234,'abc');}" 
    },
    {
        "text": "submenu",
        "iconCls": "iconclass3",
        "menu": "new Ext.ux.menu.StoreMenu({url:'menu_entries.php'})"
    }
]

Note, handler or menu-functions are delivered as string! StoreMenu takes care and creates real functions out of them.

[mrsunshine]

Cool, do you have a running demo?

[wm003]

Cool, do you have a running demo?

yep(as of now, it was a question of time until somebody asks for a demopage)
http://www.lubber.de/extjs/storemenu

[incaic]

Nice extension wm003!

I tried it out, but am having some issues.

My server returned JSON is:

{
  status: true,
  data: [{
    'first'
    ,'-'
    ,'second'
  }]
} 

I need to dynamically add a menu above StoreMenu, so have:

m.menu.add({
  menu:new Ext.ux.menu.StoreMenu({
    url:this.url
    ,baseParams:{method:'getMenu'}
  })
}) 

I get the loading swirl, but then once call is complete the menu
doesn't get populated. I get an empty submenu.

I believe my problem is due to the extra "status:true" in the JSON returned
from the server. I tried adding a "reader:this.reader" to your config code for
SimpleStore, but it didn't work. The resulting code was:

var menuRecord = new Ext.data.Record.create([
  {name:'config', mapping:'data'}  // EDIT: I use 'config' because I saw that your code used 'config' as a field.
]);

var menuReader = new Ext.data.JsonReader({
  successProperty:'status'
  ,root:'data'
},menuRecord);

m.menu.add({
  menu:new Ext.ux.menu.StoreMenu({
    url:this.url
    ,baseParams:{method:'getMenu'}
    ,reader:menuReader
  })
}) 

Any advice?

Thanks.

[incaic]

ok, after closer inspection ...

I found a simpler solution for myself, but had to alter wm003's code a bit.

I changed the type of store from SimpleStore to JsonStore and
added a root config as follows:
(I swapped this for lines 46-52)

this.store = new Ext.data.JsonStore({ // <- using JsonStore
  fields:['config'],
  url:this.url,
  baseParams:this.baseParams,
  root:this.root || 'data'                    // <- need to set appropriate root
}); 

This code works for servers that return JSON in the following format:

{
  status: true,
  data: [
    {
      "text" : "First Entry"
      ,"iconCls" : "iconclass1"
      ,"handler" : "function(item) {alert('entry one is called '+item.text);}"
    }
    ,'-'
    {
      "text" : "submenu"
      ,"iconCls" : "iconclass2"
      ,"menu" : "new Ext.ux.menu.StoreMenu({url:'...',baseParams:{...}})"
    }
  ]
} 

This works for me, hope it helps someone else.

[baboog]

Hello , This is my first post (so sorry if i mess up)
Nice extension btw..
My question is on the demo how are u forcing "Force Reload of all menus on each access"???
and can this be done for TreeLoader as well ??
Thanks
Baboog

[incaic]

StoreMenu uses this listener to force the reload:

listeners:{
  'beforeshow':function(){this.loaded=false;}
} 

[wm003]

can this be done for TreeLoader as well ??

just use the reload-method of the desired node of the tree.

[baboog]

Thanks both of u for replying, really appreciate it

[nofearnoreaper]

Hi, thanks for this menu, it's got me closer to actually finishing a project with EXTJS than anything else. I'd been banging my head against the issue of a dynamically loaded menu for far too long.

If you see the code below:

var dynmen = new Ext.ux.menu.StoreMenu({
 
            url:'json_user_menu.asp',
            baseParams: {
                userTXT: userValue,
                mailTXT : emailValue
                        },
    listeners: {
     beforeshow: function() 
                    {
 
       this.loaded=false;  
         }
    }
 
   })

I would have assumed that the store would reload every time you select the menu item? So as I pass a different BaseParam to the store the menu is populated with hrefs that use the new BaseParam as part of the querystring:

 
[{"text": "Player Search","iconCls": "iconclass1", "href":"inputString.asp?key=test1234", "hrefTarget":"_blank"},{"text": "Blue Page","iconCls": "iconclass1", "href":"cgi-bin/admin.exe?type=test1234\&player=", "hrefTarget":"_blank"},{"text": "White Page","iconCls": "iconclass1", "href":"user.asp?user=test1234", "hrefTarget":"_blank"},{"text": "Current Player Status","iconCls": "iconclass1", "href":"user_tables.asp?player=test1234", "hrefTarget":"_blank"},{"text": "Credit Status","iconCls": "iconclass1", "href":"user_credit.asp?player=test1234", "hrefTarget":"_blank"},{"text": "Real Money Transfers","iconCls": "iconclass1", "href":"user_transfers.asp?switch=Real\&player=test1234", "hrefTarget":"_blank"}]

You see from the code above the userID passed is 'test1234' . the user ID is passed from a successful query on the database which is parameterised by a form field where the userID can be input. I want to reload the staor every time a new search is performed on the database returning a new userID, so changing the querystring of the hrefs in the store menu. What is the best way to achieve this, any help would be greatly appreciated.

Thanks