如何從特定的方法觸發我的處理程序？

Question

我從Ext.Component創建了一個實例類來使用ul標籤。
這裏的demo ，這是我如何用我的contentMenu：

{ 
    xtype : "contentmenu" 
    title : "Data Master", 
    items : [{ 
     id : "action-siswa", 
     iconCls : "icon-monitor", 
     text : "Siswa", 
     handler : function(){ 
      console.info("aaaa"); 
     } 
    },{ 
     id : "action-sekolah", 
     iconCls : "icon-monitor", 
     text : "Sekolah", 
     handler : function(){ 
      console.info("aaaa"); 
     } 
    }] 
}] 

如何執行我的處理程序???? 我想執行的內部方法doAction我的處理程序..

Answer 1

這是您的情況您contentmenu控件創建自己的項目，如DOM和他們的處理程序屬性不能被因爲這些項目在initComponent部分中被刪除。

我知道你爲什麼需要這樣做，因爲你需要一個乾淨的模板渲染面板項目。所以這個問題的解決方案是使用明確的contentmenu項目屬性，它不能被initComponent中的渲染過程干擾，但可以在doAction中訪問。

見婁代碼：

Ext.onReady(function() { 

    Ext.define("Ext.ux.ContentMenu", { 
     extend: "Ext.panel.Panel", 
     alias: "widget.contentmenu", 

     tpl: new Ext.XTemplate('<tpl for=".">', '<li style="margin: 3px 3px 3px 3px;">', '<img src="', Ext.BLANK_IMAGE_URL, '" class="{iconCls}" style="height:16px;margin-bottom:2px;margin-right:7px;vertical-align:middle;width:16px;"/>', '<a id="{id}" href="#" style="color:#3764A0;font-size:11px;text-decoration:none;">{text}</a>', '</li>', '</tpl>'), 

     initComponent: function() { 
      var c = this; 
      var items = c.items; //temp items var 
      delete c.items; //need to do this to get clean panel display 
      c.data = items; 
      this.callParent(); 
      c.menus = items; //items is stored as menus property for the contentmenu 
     }, 
     afterRender: function() { 
      var m = this; 
      m.callParent(); 
      b = m.body; 
      b.on('mousedown', this.doAction, this, { 
       delegate : "a", 
       preventDefault: true, 
       stopEvent: true 
      }); 
     }, 
     doAction: function(a, b) { 
      //Do the items handler 
      Ext.each(this.menus, function(name, idx, arr) { 
       if(arr[idx].id === b.id) { //found matched menu items 
        arr[idx].handler(); //do the handler 
        return false; //break here 
       } 
      }); 
     } 
    }); 

    Ext.create("Ext.Window", { 
     title: "aaa", 
     width: 200, 
     height: 150, 
     layout: "fit", 
     defaults: { 
      xtype: "contentmenu" 
     }, 
     items: [{ 
      title: "Data Master", 
      items: [{ 
       id: "action-siswa", 
       iconCls: "icon-monitor", 
       text: "Siswa", 
       handler: function() { 
        Ext.Msg.alert("Action Siswa","Handler action-siswa"); 
       }}, 
      { 
       id: "action-sekolah", 
       iconCls: "icon-monitor", 
       text: "Sekolah", 
       handler: function() { 
        Ext.Msg.alert("Action Sekolah","Handler action-sekolah"); 
       } 
      }] 
     }] 
    }).show(); 
}); 

也許這可以幫助您

Answer 2

你的意思是......

Ext.getCmp('action-sekolah').handler();