Question

如何从“title-＆gt; tbar-＆gt; item-＆gt;处理程序中访问”myhandler“：

Application.MenuPanel = Ext.extend(Ext.Panel, { 
 title: 'Standard',
    tbar: [{
        xtype: 'buttongroup',
        columns: 3,
        title: 'MyTitle',
        items: [{
            text: 'Addl',
            scale: 'large',
            rowspan: 3, iconCls: 'add',
            iconAlign: 'top',
            cls: 'x-btn-as-arrow',
            handler: this.myHandler.createDelegate(this, ['Hello World'])  // <-- How to acces myHandler()?
        },
        {
            text: 'Delete',
            scale: 'large',
            rowspan: 3, iconCls: 'delete',
            iconAlign: 'top',
            cls: 'x-btn-as-arrow'
        },
        ]
    }]


,myHandler : function (name) {
    Ext.Msg.alert('Inside', 'Hello ' + name);
}

}）;

错误：

this.myHandler未定义 [打破此错误]处理程序：this.myHandler.createDelegate（this，['Hello World']）

Answer 1

在extend的第二个参数中，您声明了一个将合并到您的类原型中的对象。

在您的陈述中，此在声明过程中解决，而不是在实例化期间解决。因此， this 指的是您声明此类的上下文，而不是它的未来实例。

您应该在构造函数中分配处理程序。我不知道它在ExtJs中有哪个名称，但它可能类似于初始化：

Application.MenuPanel = Ext.extend(Ext.Panel, { 
    title: 'Standard',
    tbar: null,
    initialize: function() {
        this.myHandler.createDelegate(this, ['Hello World']);
        this.tbar = [{
            xtype: 'buttongroup',
            columns: 3,
            title: 'MyTitle',
            items: [{
              text: 'Addl',
              scale: 'large',
              rowspan: 3, iconCls: 'add',
              iconAlign: 'top',
              cls: 'x-btn-as-arrow',
              handler: this.myHandler.createDelegate(this, ['Hello World']) 
             },
          {
              text: 'Delete',
              scale: 'large',
              rowspan: 3, iconCls: 'delete',
              iconAlign: 'top',
              cls: 'x-btn-as-arrow'
          },
          ]
          }];

    },


    myHandler : function (name) {
      Ext.Msg.alert('Inside', 'Hello ' + name);
    }
}

注意：只在原型中分配基元类型（字符串，整数），因为不会克隆对象属性，因此任何实例都将共享相同的引用。这通常只适用于函数。

Answer 2

最终和有效的解决方案。谢谢BiAiB。

Application.MenuPanel = Ext.extend(Ext.Panel, { 
    title: 'Standard',
    tbar: null,
    initComponent: function() {

        Ext.apply(this, {

            tbar : [{
                xtype: 'buttongroup',
                columns: 3,
                title: 'MyTitle',
                items: [{
                  text: 'Addl',
                  scale: 'large',
                  rowspan: 3, iconCls: 'add',
                  iconAlign: 'top',
                  cls: 'x-btn-as-arrow',
                  handler: this.myHandler.createDelegate(this, ['Hello World']) 
                 },
              {
                  text: 'Delete',
                  scale: 'large',
                  rowspan: 3, iconCls: 'delete',
                  iconAlign: 'top',
                  cls: 'x-btn-as-arrow'
              },
              ]
              }]
        })
        Application.MenuPanel.superclass.initComponent.apply(this, arguments);
    },


    myHandler : function (name) {
      Ext.Msg.alert('Inside', 'Hello ' + name);
    }
});

JS范围问题

2 个答案: