ExtJS4：在ExtJS4中重用radiogroup类

我试图重用我创建的一个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'
            }
          }]
        }]
      }]
    });
  }
});

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

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

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

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

RadioController.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'
            }
          }]
        }]
      }]
    });
  }
});

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

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

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

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.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'
            }
          }]
        }]
      }]
    });
  }
});

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

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

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

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

发生的事情是，页面被加载，并且一切看起来都正常。但是，当我单击“组1”中的单选按钮，然后单击“组2”中的单选按钮时，我将丢失“组1”中已单击的按钮。我认为单选按钮是在“name”属性下工作的，如果它们有不同的name属性，它们基本上会在不同的组中。。。因此，我不应该丢失组1的单击按钮。基本上，我试图通过重用我创建的类来创建。这可能吗

---

值得注意的是，如果我使用类的代码来代替类的使用，我可以得到结果，但这不是一个好的实践，因为这正是类试图消除的内容。

这对我有效。。。感谢bizcasfri在Sencha论坛上的发言

RadioButtons.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'
            }
          }]
        }]
      }]
    });
  }
});

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

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

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

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

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

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

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

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

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类中的构造函数方法。。。这就是全部的诀窍