0

我不会构建用户联系表，其中包含 2 个包含相同字段但使用不同语言的选项卡。使用 MVC 和 ExtJS 4.0.7。

我不会重用userinfo面板 .. 只是给它一个参数 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+']'，但范围是错误的或其他东西（而且有点难看）。

4

1 回答 1

2

一种简单的方法是将自定义配置属性添加到用户信息面板，然后将自定义配置值应用于 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 回答