Ext JS 4: Повторное использование класса радиогрупп в Ext JS 4

Question

Я пытаюсь повторно использовать класс радиогруппы, который я создал, но я не могу заставить его работать. Вот мой код:

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

Wh при этом происходит загрузка страницы, и все выглядит правильно. Однако, когда я нажимаю радиокнопку в «группе 1», а затем щелкаю радиокнопку в «группе 2», я теряю нажатую кнопку в «группе 1». Я думал, что радиокнопки отработаны от свойства «name», и если у них другое свойство имени, они будут в основном в другой группе ... таким образом, я не должен терять нажатую кнопку группы 1. В основном, я пытаюсь создать this jsfiddle code, повторно используя класс, который я сделал. Это возможно?

Приятно отметить, что если я использую код класса вместо использования класса, я могу получить свои результаты, но это не очень хорошая практика, потому что это то, что классы пытаются устранить.

Answer 1

Это работает для меня ... благодаря bizcasfri на форумах Sencha.

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 ... это уловка, чтобы все!