extjs4 - 未调用负载侦听器上的 extjs4

Question

如果这没有多大意义，请原谅我，因为我仍在尝试了解 extjs 的某些方面。我试图在加载页面时动态获取菜单。但似乎我的 MenuFetch() 函数没有被调用。

这是我的代码，这是页面： http ://srikanthrajan.com/test/

    Center = Ext.create('Ext.panel.Panel', {
        title: "User Admin",
        region: 'center',
        layout: 'fit',
        dockedItems: {
            xtype: 'panel',
            dock: 'left',
            title: 'Main Menu',
            width: 160,
            layout: 'anchor',
            collapsible: true,
            collapseDirection: 'left',
            items: [
                {
                    defaults: {
                        width: 140,
                        layout: 'vbox',
                        xtype: 'linkbutton'
                    },
                    id: 'MainMenu',
                    xtype: 'panel',
                    listeners: {
                        load: function(menu) {
                            menu.show()
                            MenuFetch()
                            this.load()
                        }

                    }
                }
            ]
        }
});

//function that uses ajax to fetch menu items and add them
function MenuFetch() {
    Ext.getBody().mask('loading')
    var menu = Ext.ComponentManager.get('MainMenu')

    menu.removeAll(true)    
    Ext.Ajax.request({
        url: 'PanelScripts/getMenu.php',
        method: 'POST',

        callback: function(opt, success, response) {
            var text = response.responseText;
            var obj = Ext.JSON.decode(text);
            if (success && !obj.failure) {
                menu.add(obj)
                Ext.getBody().unmask()
                menu.show()
            } else {
                obj = Ext.JSON.decode(response.responseText);
                Ext.Msg.alert('Error',obj.Error)
                Ext.getBody().unmask()
            }
        }
    });
}

PS：我不确定我是否需要负载监听器。基本上我需要调用 menuftech 函数，它以 json 格式获取菜单项。

Answer 1

使用 Ext.ComponentLoader（或加载器配置属性）为菜单加载远程内容。根据您要完成的工作，xtype 似乎应该是“菜单”而不是“面板”。尝试这样的事情：

var adminPanel = Ext.create('Ext.panel.Panel', {
    title: 'User Admin',
    region: 'center',
    layout: 'fit',
    dockedItems: {
        xtype: 'panel',
        dock: 'left',
        title: 'Main Menu',
        width: 160,
        layout: 'anchor',
        renderTo: Ext.getBody(),
        items:[
              {
                 xtype: 'menu',
                 width: 100,
                 loader: {
                     url: 'foo.bar',
                     autoLoad: true,
                     callback: function(loader, success, response, options) {
                         var menu = adminPanel.down('menu');
                         if (success) {
                           menu.add(response.items);
                           menu.show();
                         }
                     },
                     scope: this
                 }
             }
         ]
     }
 });