0

作成したラジオグループ クラスを再利用しようとしていますが、うまくいきません。これが私のコードです：

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 のクリックされたボタンを失うべきではありません。基本的に、作成したクラスを再利用して、この 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);
  }
});

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 クラスのコンストラクター メソッドに注意してください。これがすべての秘訣です。

于 2012-07-26T21:01:53.343 に答える