ExtJS, как переопределить имена кнопок родительского класса и обработчики из дочернего класса - PullRequest
Новая
       1

ExtJS, как переопределить имена кнопок родительского класса и обработчики из дочернего класса

0 голосов
/ 04 ноября 2011

У меня есть родительский класс и дочерний класс, как указано ниже. 

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);
    }

});

Я хочу, чтобы моя дочерняя панель переопределяла имена кнопок и обработчики родительской панели.

Например, вместо «Готово» я хочу иметь имя «Complete» на дочерней панели и иметь собственный обработчик.

И дочерняя панель должна иметь возможность переопределять код обработчика родительской панели «Далее». Например, когда я нахожусь на панели 1, если я нажимаю «Далее», я хочу сделать некоторые проверки, а затем я хочу вызвать функцию-обработчик «Следующая» родительской панели.

1 Ответ

0 голосов
/ 04 ноября 2011

Почему бы просто не создать свои дочерние кнопки в 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);
});
...