0

を定義し 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);


            }                         
        }
    });
4

1 に答える 1

3

イベント ハンドラーに関連するコードをビュー内に配置する代わりに、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');
     } 

);

actionセグメント化されたボタンで config を使用することもできます -

                        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 プリンシパルに従っていません。

于 2013-02-12T13:57:26.210 に答える