在控制器 ExtJS 中定义监听器

Posted 2023-02-22

【中文标题】在控制器 ExtJS 中定义监听器

【英文标题】：Define listeners in controller ExtJS

【发布时间】：2012-09-13 14:18:47

【问题描述】：

我有tabpanel - 这是main 表单（视图）。 在这个 tabpanel 中，我定义了不同的选项卡 - xtype:'panel'。

所以，我有一个 main(controller) 、 main 视图和一些标签视图。 选项卡的视图在main 视图中引用。

我想在main 控制器中定义某个孩子的panel 的activate 事件的侦听器。

我该怎么做？

main 控制器：

Ext.define('KP.controller.account.apartment.Main', 
    extend: 'Ext.app.Controller',

    views: ['account.apartment.Main',
        'account.apartment.Requisites'
    ],

    models: ['account.apartment.Requisites'
    ],
    stores: ['account.apartment.Requisites'
    ],


    init: function () 

    
);

main 视图：

Ext.define('KP.view.account.apartment.Main', 
    extend: 'Ext.window.Window',
    alias: 'widget.ApartmentData',

    height: 566,
    width: 950,
    activeItem: 0,
    layout: 
        type: 'fit'
    ,
    autoShow: false,

    initComponent: function() 
        var me = this;

        Ext.applyIf(me,             
            items: [
                
                    xtype: 'tabpanel',
                    activeTab: 0,
                    deferredRender: true, 

                    items: [                        

                        
                            xtype: 'RequisitesApartment'
                        
                    ]
                
            ]
        );

        me.callParent(arguments);
    

);

孩子panelRequisitesApartment（查看）：

Ext.define('KP.view.account.apartment.Requisites', 
    extend: 'Ext.panel.Panel',
    alias: 'widget.RequisitesApartment',


    id: 'panel_accountrequisites',
    height: 350,
    width: 1124,
    autoScroll: true,
    layout: 
        type: 'fit'
    ,


    listeners: 
        activate: function ()            
               ....load data....
               ...this listeners I want to push in 'main' controller...            
        
    ,

    initComponent: function () 
        var me = this;

        var grid_store = Ext.create('KP.store.account.apartment.Requisites');

        Ext.applyIf(me, 
            dockedItems: [
                
                    xtype: 'gridpanel',
                    height: 260,
                    autoScroll: true,
                    dock: 'bottom',
                    store: grid_store,
                    id: 'r_gridFlatParams',
                    forceFit: true,


                    columns: [
                        ...some columns....
                    ],
                    viewConfig: 
                
            
            ]
        );

        me.callParent(arguments);
    
);

【参考方案1】：

在责任控制器内直接注册为control

这是一个带有有效查询的示例。当然，您只需要查询，但我认为这是一个很好的例子。自定义 cfg 属性 ident 可以轻松找到每个选项卡。如下例所示，您将在每个面板中指定一个 tabConfig 并在那里定义标识。

Ext.create('Ext.tab.Panel', 
    width: 400,
    height: 400,
    renderTo: document.body,
    items: [
        title: 'Foo',
        tabConfig: 
            ident: 'foo'
        ,
    , 
        title: 'Bar',
        tabConfig: 
            ident: 'bar',
            title: 'Custom Title',
            tooltip: 'A button tooltip'
        
    ]
);

console.log(Ext.ComponentQuery.query('tabpanel tabbar tab[ident=foo]')[0]);
console.log(Ext.ComponentQuery.query('tabpanel tabbar tab[ident=bar]')[0]);

另一种方法是使用 css id，可以像 '#my-name' 一样查询，但我建议使用自定义的，如上例所示

【讨论】：

@Oleg 编辑完成。通过此示例，您可以直接访问每个选项卡

在'main'（控制器）中我写：this.control('ApartmentData tabpanel tabbar tab[ident=foo]': activate: function (grid) console.log('paraampampam' ); ); - 但这是行不通的（

@Oleg First;您应该以小写字母编写小部件，并且仅以驼峰形式编写类名。第二;您是否应用了 tabConfig 和 xtype: 'RequisitesApartment'？上面的示例可以复制到 sencha API 中的示例代码字段之一。

【参考方案2】：

好吧，我应该把这段代码放在'main'（控制器）中：

 this.control(
        'ApartmentData tabpanel RequisitesApartment': 
            activate: function () 
                console.log('hello!');                
            
        
    );

问题出在我使用的选择器错误。 正确的选择器是：

 'ApartmentData tabpanel RequisitesApartment'

'ApartmentData'（定义为alias: 'widget.ApartmentData'） - 是'window' xtype - 主要形式。 tabpanel - 在“窗口”中带有选项卡的面板，以及“apartServList”（定义为alias: 'widget.RequisitesApartment'）——一些面板。

感谢sra！

【讨论】：

好吧，在您的示例代码中找不到apartServList。因此，很难为其他人追踪为什么这是正确答案。我包括在内。也许你可以编辑你的问题。

请注意，我的示例将您指向选项卡按钮本身，而不是选项卡。据我所知，选项卡的激活事件并没有冒泡到面板上，不是吗？

我编辑了我的答案，在“面板”xtype 中有“激活”事件。

【参考方案3】：

正确的做法是将配置对象传递给成员函数 control 到 controller init 函数。来自 Sencha 文档：控制函数可以轻松地监听视图类上的事件并使用处理函数执行一些操作。

直接来自 extjs 文档的简单示例：

Ext.define('MyApp.controller.Users', 
extend: 'Ext.app.Controller',

init: function() 
    this.control(
        'viewport > panel': 
            render: this.onPanelRendered
        
    );
,

onPanelRendered: function() 
    console.log('The panel was rendered');

);

希望这会有所帮助。 干杯

【讨论】：

我们如何为控制器文件中的商店添加多个监听器？ var ps = this.getMyStore(); ps.on( beforesync : this.beforesync, finishupdate : this.finishupdate, finishedWriting: this.finishedWriting, scope: this );