Sencha Architect迁移后EXTjs绑定式界面标签翻译失效排查

已将Sencha Architect从v4.X迁移至v5.7，同时把EXTjs从v5.1升级到v7.6版本。迁移后发现UI里的标签只有通过text: 'Nr.'直接指定的能正常显示，而用bind: { text: '{name}'}绑定方式的标签无法加载翻译内容。

GridView示例代码 #

columns: [
    {
        xtype: 'gridcolumn',
        width: 70,
        dataIndex: 'number',
        text: 'Nr.',
        filter: {
            type: 'number'
        }
    },
    {
        xtype: 'gridcolumn',
        flex: 1,
        minWidth: 130,
        width: '',
        dataIndex: 'name',
        bind: {
            text: '{name}'
        },
        filter: {
            type: 'string'
        }
    },
]

de.json配置："name" : "Name"，且在浏览器控制台执行相关命令能获取到正确的翻译字符串，期望迁移后语言翻译行为保持不变。

• 绑定语法需适配EXTjs 7.x：EXTjs 7.x的本地化绑定逻辑和5.x不同，直接bind: { text: '{name}' }不会自动关联翻译文件。需要改用明确指向本地化键的语法，比如：

  bind: {
      text: '{locale.name}'
  }
  

  或者直接通过API获取翻译值：

  text: Ext.LocaleManager.get('name')
  

• 检查ViewModel的本地化配置：确保视图对应的ViewModel中开启了本地化支持，添加locale: true配置，或者关联了正确的locale store，这样绑定上下文才能访问到翻译键值。

• 修正GridColumn的绑定上下文：GridColumn在7.x中的绑定上下文默认不直接关联全局本地化对象，可在ViewModel中定义计算属性：

  Ext.define('MyApp.view.MyViewModel', {
      extend: 'Ext.app.ViewModel',
      alias: 'viewmodel.myview',
      locale: true,
      formulas: {
          translatedName: function(get) {
              return get('locale.name');
          }
      }
  });
  

  然后在GridColumn中绑定该计算属性：

  bind: {
      text: '{translatedName}'
  }
  

• 确认本地化文件加载时机：确保de.json在Grid视图渲染前完成加载。可以在应用启动时通过异步加载逻辑等待本地化文件加载完毕后再初始化视图，避免绑定翻译值时内容还未初始化。

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