如何在 ExtJS 中声明一个静态 HashMap？

Question

要求：

需要使用HashMap来存储特定的值。 首次将值设置为 HashMap，在屏幕刷新或导航后返回同一屏幕，需要在 UI 本身中保留 HashMap 中的值，无需创建后端/DB打电话。

声明和使用此 HashMap 以使其仅初始化一次但在屏幕刷新和导航时保留附加值的最佳方式是什么？

我们如何声明和初始化这个HashMap作为一个静态变量 ?

Answer 1

您可以使用带有 LocalStorage 代理的 ExtJS 存储部分实现它。 本地存储允许您将数据存储在浏览器空间中。在页面重新加载时，数据将是持久性的（仅在浏览器中的同一用户配置文件中）。

此商店数据将无法在其他浏览器中使用。如果您正在寻找跨浏览器工作的特定于用户的 HTTP 响应缓存，则它必须在服务器端。

以下是相同浏览器和相同用户配置文件的 POC 实现：

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.define('twitter', {
            extend: 'Ext.data.Model',
            fields: ['id', 'name'],
            proxy: {
                type: 'localstorage',
                id: 'twitter-Searches'
            }
        });

        //our Store automatically picks up the LocalStorageProxy defined on the Search model
        var store = new Ext.data.Store({
            model: "twitter"
        });

        //loads any existing Search data from localStorage
        store.load();

        console.log(store);

        Ext.create('Ext.panel.Panel', {
            renderTo: Ext.getBody(),
            items: [{
                xtype: 'grid',
                store: store,
                id: 'gridId',
                columns: [{
                    text: 'id',
                    flex: 1,
                    dataIndex: 'id'
                }, {
                    text: 'name',
                    flex: 1,
                    dataIndex: 'name'
                }],
                buttons: [{
                    text: 'Add new record',
                    handler: function () {
                        var grid = Ext.getCmp("gridId");
                        var record = {
                            //id: Math.random().toString(36).substring(7),
                            name: Math.random().toString(36).substring(7)
                        };

                        store.add(record);
                        store.sync();
                    }
                }, {
                    text: "Clear all",
                    handler: function () {
                        var grid = Ext.getCmp("gridId");
                        store.removeAll();
                        store.sync();

                    }
                }]
            }]
        });
    }
});

这里是相同的小提琴： https://fiddle.sencha.com/#view/editor&fiddle/2cgt

在 Fiddle 中，重新加载 fiddle 时，将从本地存储中获取数据。