Question

我正在ExtJs 6中开发一个新的应用程序，我们在不同的屏幕上有几个网格，显示相似或相同的数据。我想定义一个“数据字典”，它将集中从我们的内部数据成员名称到它们的显示名称（网格中的标题，表单上的标签），以及可能的其他数据属性，如默认列宽。

这一定是一个常见的问题，但我一直无法找到其他人如何做到这一点的任何例子。我最初的尝试是定义一个单例类来保存映射，我遇到了一些技术问题（在another question中）。但是我发现ExtJs中的正确解决方案是将这些数据保存在商店中，即使它是静态加载的数据。

但是，我不清楚如何在网格的标题配置中引用商店。我是否必须动态设置标头？（没有必要从服务器加载商店，因为我的数据字典是静态定义的。）我发现this post似乎建议在渲染器中设置标题，但这看起来真的很丑......

其他人如何解决这个问题的一个例子真的很棒。

Answer 1

我在另一个javascript文件中定义了一个全局Message对象，该文件是在 ExtJS app.js文件之前从index.html 加载的;这样在执行ExtJS代码之前加载了javascript文件，并且数据在Ext定义期间已经可用。

<script type="text/javascript" src="translations.js"></script>  <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"), ... });

并且已正确替换。

Answer 2

我建议过去偶然发现的两个选项。也许一个或两个都不适合你。

1.第一个类似于 Alexander

建议的那个

我创建了一个新文件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文件。

2.动态加载网格配置

为网格的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"
      }
   ]
}

注意：如果您不想使用此方法，并且希望在客户端进行网格配置，则可以：

创建另一个使用本地.json文件的商店
在商店之间切换

ExtJs 6定义用于网格标题的全局数据字典的最佳方法是什么？

2 个答案:

1.第一个类似于 Alexander

2.动态加载网格配置