0

2つのタブに同じフィールドが含まれているが、言語が異なるユーザー連絡フォームは作成しません。MVCとExtJS4.0.7の使用。

userinfoパネルを再利用するつもりはありません..そしてそれにparametherlangKey = 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+']'たが、スコープが間違っているか何かです（そして少し醜いです）。

4

1 に答える 1

2

これを行う簡単な方法の 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)'
    }
}

これがそのライブの例です。

于 2013-01-29T12:57:09.747 に答える