如何添加事件监听器到Sencha Touch的Ext.NavigationView？

Question

我已经定义了一个Ext.navigation.View，我需要附加一个事件处理程序 在我的代码指定为元素：

title: 'Timetable XXX', 
      iconMask: true, 
      iconCls: 'XXX-icon-timetable' 

---

任何想法，该怎么办呢？

Ext.define('XXX.view.NavigViewTimetable', { 
     extend: 'Ext.navigation.View', 

     alias: 'widget.navigviewtimetable', 

     requires: [ 
     'XXX.view.TimetableContainer', 
     'XXX.view.DetailView', 
     'XXX.view.TimetableEdit', 
     'XXX.view.TimetableDayList' 
     ], 

     config: {  
      navigationBar: { 
       items: [ 
        { 
         xtype: 'button', 
         text: 'Add', 
         itemId: 'addButton', 
         ui: 'custom-btn-up-timetable', 
         align: 'right', 
         hidden: false 
        }, 

       ], 
       ui: 'custom-toolbar-top-1L' 
      }, 

      items: [ 
       { 
        xtype: 'timetablecontainer' 
       }, 

       //Toolbar 
       { 
        xtype: "toolbar", 
        docked: "bottom", 
        ui: 'custom-toolbar-2L', 

        items: [ 
         { 
          xtype: "button", 
          text: 'Today', 
          ui: 'custom-btn-dwn-timetable', 
          //handler: this.onTodayButtonTap, 
          //scope: this, 
          itemId: 'todayButton' 
         }, 
         { 
          xtype: 'spacer' 
         }, 
         { 
          xtype: "segmentedbutton", 
          items: [ 
          { 
           text: 'Daily', 
           ui: 'custom-btn-dwn-timetable'  
          }, 
          { 
           text: 'List', 
           ui: 'custom-btn-dwn-timetable', 
           //disabled: true, 
           pressed: true  
          } 
          ], 

          itemId: 'segBtn', 
          align: 'right' 
         } 
        ] 
       } 

      ], 

      listeners: [ 
       { 
        delegate: '#addButton', 
        event: 'tap', 
        fn: 'onAddButtonTap' 
       }, 
       { 
        delegate: '#todayButton', 
        event: 'tap', 
        fn: 'onTodayButtonTap' 
       }, 
       { 
        delegate: '#segBtn', 
        event: 'toggle', 
        fn: 'onSegBtnToggle' 
       } 

      ], 

      // I NEED ADD LISTEN TO AN EVENT HERE 
      title: 'Timetable XXX', 
      iconMask: true, 
      iconCls: 'XXX-icon-timetable' 


     }, 

     onAddButtonTap: function() { 
      console.log("addItemCommand [NavigViewTimetable]"); 
      this.fireEvent("addItemCommand", this); 
     }, 

     onTodayButtonTap: function(){ 
      console.log('onTodayButtonTap [NavigViewTimetable]'); 
      this.fireEvent('todayButtonTapCommand', this) 
     }, 
     onSegBtnToggle: function (segBtn, btn, isPressed) { 
      //console.log("'" + btn.config.text +"' on segmented button pressed"); 
      if (btn.config.text == 'List'){ 
       this.fireEvent('listToggleCommand', this); 
      }else if (btn.config.text == 'Daily'){ 
       this.fireEvent('dailyToggleCommand', this); 


      }       
     } 
    }); 

Answer 1

而不是把有关事件处理程序代码中的意见，我宁愿使用Controllers。这肯定会减少维护代码后续工作的努力。另一件事，如果你决定使用控制器，那么你可以利用action配置每个按钮。像 -

    xtype: 'button', 
        text: 'Add', 
        itemId: 'addButton', 
        ui: 'custom-btn-up-timetable', 
        align: 'right', 
        hidden: false, 
        action:'addButtonAction' 

然后在控制器，你可以使用control配置选项。控制器的防爆可 -

Ext.define('XXX.controller.ButtonController',{ 
    extend:'Ext.app.Controller', 
    config:{ 
      refs:{ 
       views:['Theviews.youwanto.refer'], 
       //addtional references 
      }, 
      control:{ 
       'button[action=addButtonAction]':{ 
        tap:'functionForAddButton' 
       } 
      }   
    }, 
    functionForAddButton:function(){ 
      console.log('Add Button tapped'); 
    } 

); 

您也可以使用segmeneted按钮action配置 -

     xtype: "segmentedbutton", 
         items: [ 
         { 
          text: 'Daily', 
          ui: 'custom-btn-dwn-timetable', 
          action:'dailyButtonAction'  
         }, 
         { 
          text: 'List', 
          ui: 'custom-btn-dwn-timetable', 
          //disabled: true, 
          pressed: true, 
          action:'listButtonAction'  
         } 
         ], 

你总是可以定义内部意见的事件处理程序，但IMO这不是以下MVC本金。