Форма ExtJS с именами массивов

Я не буду создавать форму контакта с пользователем, с двумя вкладками, содержащими те же поля, но на разных языках. Использование MVC и ExtJS 4.0.7.

Я не буду повторно использовать панель userinfo .. и просто даю ей paramether langKey = en/fr

Виджет вкладки с информацией о пользователе выглядит следующим образом:

Ext.define('MyApp.view.user.FormUserInfo', {
     extend: 'Ext.Panel',
     alias: 'widget.userinfo', 
     defaultType: 'textfield',

     items: [
     { 
         name: 'first_name['+langKey+']',
     }, {
         name: 'last_name['+langKey+']',  
     }]
 });

И форма загружает его так:

Ext.define('MyApp.view.user.Form', {
    extend: 'Ext.FormPanel',
    xtype: 'form',
    items: [
    {
        xtype: 'tabpanel',  
        activeTab: 2,
        items:[
        {
            xtype: 'userinfo',
            cls: 'en',
            tabConfig: {
                title: 'Contact Details(EN)'
            }
        },{
            xtype: 'userinfo',
            cls: 'de',
            tabConfig: {
                title: 'Contact Details(DE)'
            } 
        }]// /TabPanel.items
    }]// /FormPanel.items
});

Фактически форма содержит 10 + полей и 2 или более языков. Мне нужен хороший контроль над данными.

Любой способ передать переменную при использовании виджета или свойства, которое я могу использовать? Я попытался использовать класс панели ( cls ) 'first_name [' + this.cls + ']' , но область была неправильной или что-то (и немного уродлива).

0
nl ja de
Мне не нужно переводить представление, мне нужно добавить несколько флагов в имена полей и разделить их позже.
добавлено автор d.raev, источник
добавлено автор CD.., источник

1 ответы

Один простой способ сделать это - добавить пользовательское свойство конфигурации на свою информационную панель пользователя, а затем применить настраиваемое значение конфигурации к именам полей в initComponent ().

Пример:

Ext.define('UserInfo', {
    extend: 'Ext.Panel',
    alias: 'widget.userinfo', 
    defaultType: 'textfield',
    langKey: 'en',
    initComponent: function() {
        var me = this;
        Ext.apply(me, {
            items: [
             { 
                 fieldLabel: 'First Name '+me.langKey,
                 name: 'first_name['+me.langKey+']',
             }, {
                 fieldLabel: 'Last Name '+me.langKey,
                 name: 'last_name['+me.langKey+']',  
             }]            
        });
        me.callParent( arguments );
    }

});

Затем вы можете пройти через пользовательскую конфигурацию, как и с любым другим:

{
    xtype: 'userinfo',
    lankKey: 'en',
    tabConfig: {
        title: 'Contact Details(EN)'
    }
}

Вот живой пример этого.

2
добавлено
спасибо многому человеку! он работает идеально! и вы дали мне несколько идей для рефакторинга :)
добавлено автор d.raev, источник