Question

我正在尝试重用我创建的一个radiogroup类，但我似乎无法让它工作。这是我的代码：

app.js

Ext.Loader.setConfig({
  enabled: true
});

Ext.application({
  name: 'Test',
  appFolder: 'app',
  controllers: ['RadioController'],
  launch: function() {
    Ext.create('Ext.Viewport', {
      layout: 'border',
      items: [{
        xtype: 'panel',
        region: 'center',
        title: 'buttons',
        items: [{
          xtype: 'form',
          items: [{
            xtype: 'radiobuttons',
            fieldLabel: 'group 1',
            //name: '1',
            defaults: {
              name: 'button1'
            }
          }, {
            xtype: 'radiobuttons',
            fieldLabel: 'group 2',
            //name: '2',
            defaults: {
              name: 'button2'
            }
          }]
        }]
      }]
    });
  }
});

RadioController.js

Ext.define('Test.controller.RadioController', {
  extend: 'Ext.app.Controller',
  models: [],
  stores: [],
  views: ['RadioButtons'],
  init: function() {
  }
});

RadioButtons.js

Ext.define('Test.view.RadioButtons', {
  extend: 'Ext.form.RadioGroup',
  alias: 'widget.radiobuttons',
  items: [{
    boxLabel: 'radio 1',
    inputValue: 'radio 1'
  }, {
    boxLabel: 'radio 2',
    inputValue: 'radio 2'
  }]
});

会发生什么，页面被加载，一切看起来都正确。但是，当我单击“组1”中的单选按钮然后单击“组2”中的单选按钮时，我将丢失“组1”中单击的按钮。我认为单选按钮是在'name'属性下运行的，如果它们有不同的名称属性，它们基本上属于不同的组...因此，我不应该丢失组1的单击按钮。基本上，我正在尝试通过重复使用我创建的课程来创建this jsfiddle code。这可能吗？

值得注意的是，如果我使用类的代码代替使用类，我可以得到我的结果，但这不是好习惯，因为这是类试图消除的。

Answer 1

这对我有用...感谢Sencha论坛上的bizcasfri。

<强> RadioButtons.js

Ext.define('RadioButtons', {
  extend : 'Ext.form.RadioGroup',
  alias  : 'widget.radiobuttons',
  constructor: function (config) {
    Ext.apply(this, {
      defaults: {
        xtype: 'radio',
        name: config.name
      },
      items: [
        {
          boxLabel: 'Radio 1',
          inputValue: '1'
        },
        {
          boxLabel: 'Radio 2',
          inputValue: '2'
        }
      ]
    });
    this.callParent(arguments);
  }
});

<强> app.js

Ext.Loader.setConfig({
  enabled: true
});

Ext.application({
  name: 'Test',
  appFolder: 'app',
  launch: function() {
    Ext.create('Ext.Viewport', {
      layout: 'border',
      items: [{
        xtype: 'panel',
        region: 'center',
        title: 'buttons',
        items: [{
          xtype: 'form',
          items: [{
            xtype: 'radiobuttons',
            fieldLabel: 'group 1',
            name: 'radiogroup1'
          }, {
            xtype: 'radiobuttons',
            fieldLabel: 'group 2',
            name: 'radiogroup2'
          }]
        }]
      }]
    });
  }
});

记下RadioButtons类中的构造函数方法......这就是诀窍！

Ext JS 4：在Ext JS 4中重用radiogroup类

1 个答案: