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配置选项。控制器的Ex可以是 -

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'       
                        }
                        ],

您始终可以在视图中定义事件处理程序，但是不遵循MVC主体的IMO。

如何将事件监听器添加到Ext.NavigationViewin Sencha Touch？

1 个答案: