ExtJS，如何从子类重写父类按钮名称和处理程序

ExtJS, how to override parent class button names and handlers from child class

本文关键字：按钮 程序 处理 父类 重写 子类 ExtJS      更新时间：2023-09-26

我有如下所述的父类和子类

Ext.ns("MyUi");
MyUi.ParentPanel = Ext.extend(Ext.form.FormPanel, {
initComponent: function() {
    MyUiPanel.superclass.initComponent.call(this);
},
id: 'card-id',
layout: 'card',
activeItem: 0,
buttonAlign: 'center',
buttons:[{
            text: "Next", 
            id: "card-next", 
            handler:  function(){
                Ext.getCmp('card-id').navigationHandler(1);
            }
        },{
            text: "Previous", 
            id: "card-prev", 
            handler: function(){
                Ext.getCmp('card-id').navigationHandler(-1);
            },
            disabled: true
        },{
            text: "Finish", 
            id: "finishButton", 
        }],
navigationHandler: function(increment){
         //code to switch cards/items
}});
var panel1 = ...
var panel2 = ...
childPanel = Ext.extend(MyUi.ParentPanel, {
    initComponent: function() {
        var items = [panel1, panel2];
        Ext.apply( this, {
            items: items
        });
        Cx.Ui.ProvisionRPoolWizardPanel.superclass.initComponent.apply(this);
    }

});

我希望我的子面板覆盖父面板按钮名称和处理程序。

例如，我想在子面板中有一个名为"完成"的名称，而不是"完成"，我想有自己的处理程序。

子面板应该能够覆盖父面板"Next"处理程序代码。例如，当我在panel1上，如果我点击"下一步"，我想做一些验证，然后我想调用父面板的"Next"处理程序函数

为什么不在initComponent中创建特定于子节点的按钮，例如:

childPanel = Ext.extend(MyUi.ParentPanel, {
    initComponent: function() {
        var items = [panel1, panel2];
        Ext.apply( this, {
            items: items
        });
        this.buttons = [{
            text: "Next", 
            id: "card-next", 
            handler:  function(){
               //your new handler here
            }
        },{
            text: "Previous", 
            id: "card-prev", 
            handler: function(){
                Ext.getCmp('card-id').navigationHandler(-1);
            },
            disabled: true
        },{
            text: "Complete", 
            id: "finishButton", 
        }];
        Cx.Ui.ProvisionRPoolWizardPanel.superclass.initComponent.apply(this);
});
相关文章：