0

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

应用程序.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”中单击的按钮。我认为单选按钮使用“名称”属性，如果它们具有不同的名称属性，它们基本上会在不同的组中......因此，我不应该丢失组 1 的单击按钮。基本上，我试图通过重用我制作的类来创建这个 jsfiddle 代码。这可能吗？

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

4

1 回答 1

0

这对我有用……感谢 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);
  }
});

应用程序.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 类中的构造函数方法……这就是诀窍！

于 2012-07-26T21:01:53.343 回答