[CLOSED] Dynamic Menu Generation from Comma Delimited String

[rthiney]

Hi,
I have an array of strings file1, file2, file3
and I would like to convert them into a <ext:Splitter>
with menu items.

How can I dynamically build this?

I created one manually, and looked at the javascript it produced it, and linked "DoIt" to a button...and the everything worked great. I'm just having trouble understanding how to create this dynamically? I have the comma delimited string coming from the database, and would like to attach a <render hander=**function**> that will take this comma delimited string, and create a menu. See image attached.

Here is my code, but I need to make this dynamic so that it creates a button in each row....again, see attached image.

        function DoIt() {
   
            Ext.onReady(function() {
                this.menu = new Ext.menu.Menu({
                proxyId: "menu", items: [
                    
                    new Ext.menu.Item({
                        id: "MenuItem0", text: "File1", iconCls: "icon-page", listeners: {
                            click: {
                                fn: function(el, e) {
                                    return NavigateTo('File1')
                                }
                            }
                        }
                    }
      ), new Ext.menu.Item({
          id: "MenuItem1", text: "File2", iconCls: "icon-page", listeners: {
              click: {
                  fn: function(el, e) {
                      return NavigateTo('File2')
                  }
              }
          }
      }
      ), new Ext.menu.Item({
          id: "MenuItem2", text: "File3", iconCls: "icon-page", listeners: {
              click: {
                  fn: function(el, e) {
                      return NavigateTo('File3')
                  }
              }
          }
      }
      )
      
      
      ]
                }
   ); new Ext.SplitButton({
       id: "btn", renderTo: "btnAttach", text: "Attachments", menu: menu, iconCls: "icon-attach"
   }
   );
            }
);
            Ext.QuickTips.init();
            Coolite.ScriptManager = "ScriptManager1";
            Ext.BLANK_IMAGE_URL = "/Intranet/extjs/resources/images/slate/s-gif/coolite.axd";

        }

[Vladimir]

Hi,

Please see the following post

http://forums.ext.net/showthread.php?5674#post22294

[rthiney]

Thanks Vlad, this worked great.
How can I add an icon to the menu items?

    for (var i = 0; i <= paths.length-2; i++)
           {
               var role = paths;
               rolesButton.menu.addMenuItem({
               text: filenames[i],
               person: paths[i], 
                icon: ???????,

                   handler: function(item)
                   {
                       alert('You clicked: Person: ' + item.person + 'Role: ' + item.text);
                   }
               });
           }

[Vladimir]

Hi,

Use 'iconCls'
iconCls : String
A CSS class that specifies a background image that will be used as the icon for this item (defaults to ''). If iconCls is specified icon should not be.


or 'icon'
icon : String
The path to an icon to display in this item (defaults to Ext.BLANK_IMAGE_URL). If icon is specified iconCls should not be.


For example if you want to use standard icons then
1. Register Icon during initial Page Load

ScriptManager1.RegisterIcon(Icon.Add);

2. Use 'icon-add' css class

iconCls : "icon-add"

[rthiney]

Worked like a charm.
Thanks Vlad.