我正在ExtJs 6中开发一个新的应用程序，我们在不同的屏幕上有几个网格，显示相似或相同的数据。我想定义一个“数据字典”，它将集中从我们的内部数据成员名称到它们的显示名称（网格中的标题，表单上的标签），以及可能的其他数据属性，如默认列宽。
这一定是一个常见的问题，但我一直无法找到其他人如何做到这一点的任何例子。我最初的尝试是定义一个单例类来保存映射，我遇到了一些技术问题（在another question中）。但是我发现ExtJs中的正确解决方案是将这些数据保存在商店中，即使它是静态加载的数据。
但是，我不清楚如何在网格的标题配置中引用商店。我是否必须动态设置标头？ （没有必要从服务器加载商店，因为我的数据字典是静态定义的。）我发现this post似乎建议在渲染器中设置标题，但这看起来真的很丑......
其他人如何解决这个问题的一个例子真的很棒。
答案 0 :(得分：1)
我在另一个javascript文件中定义了一个全局Message对象，该文件是在 ExtJS app.js文件之前从index.html 加载的;这样在执行ExtJS代码之前加载了javascript文件，并且数据在Ext定义期间已经可用。
<script type="text/javascript" src="translations.js"></script>
<!-- The line below must be kept intact for Sencha Command to build your application -->
<script id="microloader" type="text/javascript" src=".sencha/app/microloader/development.js"></script>
对象是这样的：
if(browser_language == "DE")
Message = {
ADD: "Hinzufügen",
...
YES: "Ja"
}
else
Message = {
ADD: "Add",
...
YES: "Yes"
}
Message.getValue = function(str) {
if(typeof Message[str]=="string") return Message[str];
console.log("Translation string "+str+" missing.");
return str;
}
这样，我可以通过我的ExtJS应用程序随处使用它们：
Ext.define('MyApp.view.AddWindow',{
extend:'Ext.Window',
title:Message.getValue("ADD"),
...
});
并且已正确替换。
答案 1 :(得分：0)
我建议过去偶然发现的两个选项。也许一个或两个都不适合你。
我创建了一个新文件app\utils\Config.js，并将其包含在Application.js的要求部分中。该文件定义了一个单例类：
Ext.define('MyApp.utils.Config',{
singleton: true,
config : {
proxyBaseUrl: 'http://www.example.com',
autoRefreshInterval: 10 * 1000,
componentTypes: [
['application', 'application'],
['documentation', 'documentation'],
['configuration', 'configuration'],
]
},
constructor : function(config){
this.initConfig(config);
}
});
我得到了像MyApp.utils.Config.getProxyBaseUrl()这样的已定义参数。
注意：componentTypes表示combobox中使用的商店的数据。
注2：我还有一个Methods.js文件。
为网格的metachange事件添加此处理程序：
grid.getStore().on('metachange', function (store, meta) {
grid.reconfigure(store, meta.columns);
});
当我加载网格存储时，服务器会以类似于
的json响应{
"metaData":{
"columns":[
{
"header":"Parameter",
"dataIndex":"paramter_name",
"width":150
},
{
"header":"Column 2 Name",
"dataIndex":"22",
"sortable":false,
"minWidth":180,
"flex":1
},
{
"header":"Column 3 Name",
"dataIndex":"0",
"sortable":false,
"minWidth":180,
"flex":1
}
]
},
"data":[
{
"paramter_name":"data_sample1",
"22":"data_sample2",
"0":"data_sample3"
}
]
}
注意：如果您不想使用此方法，并且希望在客户端进行网格配置，则可以：