ExtJs6.2 Modern工具包：表单文本框标签绑定数据库存储值的最优方案

针对你在ExtJS 6.2 Modern工具包中遇到的动态表单标签问题，我分享几个经过实践验证的最佳方案，帮你优雅地从数据库加载并展示标签：

1. 先搞定标签数据的Store #

首先得把数据库里的标签数据加载到ExtJS的Store中，而且要保证这个Store在表单渲染前就准备好。你可以这样定义Store：

Ext.define('MyApp.store.FormLabels', {
    extend: 'Ext.data.Store',
    alias: 'store.formlabels',
    fields: ['fieldName', 'labelText'], // fieldName对应表单字段的name，labelText是要显示的标签
    autoLoad: true, // 或者在表单初始化时手动调用load()
    proxy: {
        type: 'ajax',
        url: '/api/getFormLabels', // 替换成你的后端接口，返回字段名和对应标签的JSON数据
        reader: {
            type: 'json',
            rootProperty: 'data'
        }
    }
});

2. 用ViewModel的计算属性动态绑定标签 #

这是最推荐的方式，利用ExtJS的MVVM架构来解耦标签获取逻辑。在表单对应的ViewModel里添加一个计算方法，根据字段名从Store中捞标签：

Ext.define('MyApp.view.MyFormModel', {
    extend: 'Ext.app.ViewModel',
    stores: {
        formLabels: {
            type: 'formlabels' // 引用上面定义的Store
        }
    },
    formulas: {
        getFieldLabel: function(get) {
            // 返回一个函数，接收字段名参数，返回对应的标签
            return function(fieldName) {
                var labelRecord = get('formLabels').findRecord('fieldName', fieldName);
                // 找不到标签时用字段名做 fallback
                return labelRecord ? labelRecord.get('labelText') : fieldName;
            };
        }
    }
});

然后在你的表单字段里，通过bind来动态获取标签：

{
    xtype: 'textfield',
    readOnly: true,
    scrollable: false,
    labelAlign: 'top',
    name: 'someName',
    bind: {
        label: '{getFieldLabel("someName")}', // 传入字段名，自动匹配标签
        value: '{SomeValue}'
    }
}

3. 封装自定义字段组件（适合大量重复场景） #

如果你的表单有很多字段都需要动态标签，重复写绑定逻辑太麻烦，可以封装一个自定义字段组件，自动处理标签获取：

Ext.define('MyApp.field.DynamicLabelTextField', {
    extend: 'Ext.field.Text',
    alias: 'widget.dynamiclabeltextfield',
    
    config: {
        labelFieldName: null // 配置对应数据库中的字段名
    },
    
    applyLabel: function(label) {
        // 如果没有手动设置label，就从Store中获取
        if (!label && this.getLabelFieldName()) {
            var labelStore = Ext.getStore('formlabels');
            if (labelStore && labelStore.isLoaded()) {
                var record = labelStore.findRecord('fieldName', this.getLabelFieldName());
                return record ? record.get('labelText') : this.getLabelFieldName();
            }
        }
        return label;
    },
    
    // 监听Store加载完成，重新更新标签
    initialize: function() {
        this.callParent();
        var labelStore = Ext.getStore('formlabels');
        if (labelStore && !labelStore.isLoaded()) {
            labelStore.on('load', this.updateLabel, this);
        }
    }
});

使用这个自定义组件时就简单多了：

{
    xtype: 'dynamiclabeltextfield',
    readOnly: true,
    scrollable: false,
    labelAlign: 'top',
    labelFieldName: 'someName', // 指定要匹配的字段名
    name: 'someName',
    bind: '{SomeValue}'
}

4. 几个关键注意点 #

• 确保Store提前加载：如果Store还没加载完就渲染表单，标签会显示默认值。你可以在Store的load事件触发后再渲染表单，或者在绑定里加个加载状态提示：bind: { label: '{formLabels.loaded ? getFieldLabel("someName") : "加载中..."}' }
• 多语言支持扩展：如果需要多语言，只要在数据库里存储多语言版本的标签，然后在Store加载时根据当前语言过滤数据即可。
• 动态表单场景：如果表单结构也是动态的，可以直接从后端获取包含标签的字段配置，然后用Ext.widget()动态生成表单组件，这种方式灵活性更高。

内容的提问来源于stack exchange，提问作者Learner