Extjs 4，事件處理，範圍，自定義組件

我有以下問題。我有tbar的網格。在tbar裏面我有一些Ext.form.field.Trigger。當用戶點擊觸發按鈕時，我想使用網格提供的功能過濾商店。我想在定義的類中定義triggerclick的功能，所以我可以在不同的網格中重用此組件。所以，簡而言之，我想找到放置單擊組件的面板並調用面板函數，或者將面板的引用傳遞給triggerclick，或者使用根據點擊按鈕的位置計算出的某個參數觸發事件，或者可能存在一個更好的方法來完成這一點。Extjs 4，事件處理，範圍，自定義組件

代碼（FilterField - >觸發的擴展）：

Ext.define('GSIP.core.components.FilterField', { 
extend: 'Ext.form.field.Trigger', 
alias: 'widget.filterfield', 
initComponent: function() { 

    this.addEvents('filterclick'); 
    this.callParent(arguments); 
}, 
onTriggerClick: function(e, t) { 

    //Ext.getCmp('gsip_plan_list').filterList(); - working but dont want this 

    //this.fireEvent('filterclick'); - controller cant see it, 

    //this.filterList; - is it possible to pass scope to panel or reference to panel 

    //e.getSomething() - is it possible to get panel via EventObject? smth like e.getEl().up(panel) 


}

}）;面板的

代碼：控制器的代碼

 

     Ext.define('GSIP.view.plans.PlanReqList' ,{ 
     extend: 'Ext.grid.Panel', 
     alias : 'widget.gsip_devplan_list', 
     id: 'gsip_plan_list', 
     title:i18n.getMsg('gsip.view.PlanReqList.title'), 
     layout: 'fit', 
     initComponent: function() { 

      this.store = 'DevPlan'; 

      this.tbar = [{ 
       xtype: 'filterfield', 
       id: 'filter_login', 
       triggerCls: 'icon-user', 
       //scope:this - how to pass scope to panel without defining onTriggerClick here 
    //   onTriggerClick: function() { 
    //    this.fireEvent('filterclick'); //working event is fired but controller cant see it 
    //    this.filterList; //this is working but i dont want to put this code in every filterfield 
    //   }, 
    //   listeners : { 
    //    filterclick: function(btn, e, eOpts) { //this is working 

    //    } 
    //   }, 
      }]; 

      this.columns = [ 
       {id: 'id', header: "Id", dataIndex: "id", width:50, sortable: true, filterable: true}, 
       {header: "Name", dataIndex: "name", width: 150, sortable: true, filterable: true}, 
       {header: "Author", dataIndex: "author", sortable: true, renderer:this.renderLogin, filterable: true},   
      ]; 

      this.callParent(arguments); 


     }, 
     filterList: function() { 
      this.store.clearFilter(); 

      this.store.filter(
       {property:'id', value: this.down("#filter_id").getValue()}, 
       {property: 'name', value: this.down("#filter_name").getValue()} 
      ); 
     }, 
     renderLogin:function(value, metadata, record) { 
      return value.login; 
     } 
    });

部分：

 

    init: function() { 
      this.control({ 
       'attachments': { 
        filesaved: this.scanSaved,     
       }    
      },{ 
       'scan' : { 
        filesaved: this.attachmentSaved 
       } 
      },{ 
       '#filter_login': { 
        filterclick: this.filterStore //this is not listened 
       } 
      }); 


     }, 
     filterStore: function() { 
      console.log('filtering store'); 

      this.getPlanListInstance().filter(); 
     },

來源

2012-07-17 patryks

不確定在您的問題中什麼不起作用。你發佈了很多代碼，但沒有告訴我們問題到底在哪裏。但是你的任務似乎對我在項目中所做的事情非常熟悉。看到這個問題http://stackoverflow.com/questions/9628306/how-to-perform-controller-inheritance-in-extjs-4/9628534#9628534關於如何重新使用組件和控制器的一些解釋。 – sha 2012-07-17 11:53:26

我有過濾器的面板。這個面板也有函數filterList。如何從filterfield輕鬆調用filterList。 Filterfield是觸發器的擴展，所以這個調用應該來自onTriggerClick（我想把調用放在類定義中 - 第一個代碼示例） – patryks 2012-07-17 12:34:45

那麼..你可以做（'面板'）來獲取你的組件的參考面板並從那裏調用方法。但我不會推薦。相反，我會訂閱面板類中的filterfield事件或生成事件並在控制器中訂閱它。 – sha 2012-07-17 12:42:08

控制器可以聽什麼。只需要指定具體內容。但我會在面板級別上觸發事件 - 將其添加到您的觸發器處理程序中：

this.up('panel').fireEvent('triggerclicked');

來源

2012-07-17 14:48:00 sha

Extjs 4，事件處理，範圍，自定義組件

回答

相關問題