javascript - ExtJS - 保存树面板的状态。

Question

TLDR 我希望 EXTJS 的树面板记住其之前的设置。 ExtJS-3.2.1

<小时/>

我之前见过 ExtJS-2.x.x 这样做:See here on the extjs forums 。
但看起来它们几乎毫无生气，上面有帖子询问这个问题或类似问题，但长达 6 个月没有回复。我想我会把它带到这里。

我需要能够让我的树面板记住以前打开的文件夹以及选中的框。它是异步树面板。请注意，这都是客户端脚本。

面板如下:

 var layerTree = new Ext.tree.TreePanel({
   border: true,
   region: "east",
   title: 'LayersTree',
   width: 250,
   split: true,
   collapsible: true,
   collapsed: true,
   iconCls: 'treePanelIcon',
   enableDD: true,
   autoScroll: true,
   //pulls in layers and their attributes//
   root: new Ext.tree.AsyncTreeNode({ leaf: false,
     loaded: false,
     expanded: true,
     text: 'Tree Root',
     children: treeLayers
   })

我正在使用 ExtJS-3.2.1、GeoExt、OpenLayers。

有人以前做过这个或者知道怎么做吗？ (在extjs-3.2.1中)
(最好有一个插件，但任何答案都值得赞赏)

有人知道如何使用extjs的保存状态功能来绑定(bind)cookie吗？

Answer 1

我知道这不能完全回答您的所有问题，但我最近主要是在服务器端完成此操作。要知道的关键是，即使您使用 AsyncTreeNodes，您仍然可以在节点中指定 children 属性，该属性将包含另一个节点数组。

因此，在 TreePanel 的 TreeLoader 实例调用的 URL 函数中，我确保将正在加载的节点的“路径”保存在数据库中(我们的重点是在服务器上保留此状态)。因此，我在该数据库中保存了加载节点及其父节点的级别和值。

为此，我向加载器 beforeLoad 事件添加了一个监听器，并在加载器的 baseParams 属性中设置该信息。

然后我这样做，以便加载器调用的服务器上的相同函数，如果加载根节点的子节点，也将递归调用自身来收集子节点(基于我在数据库中保存的内容)。因此，返回到根节点加载器的实际 JSON 如下所示:

[
    {
        "x3id": "",
        "text": "[blank value]",
        "iconCls": "",
        "leaf": false,
        "expanded": true,
        "children": [
            {
                "x3id": "",
                "text": "[blank value]",
                "iconCls": "",
                "leaf": false,
                "expanded": true,
                "children": [
                    {
                        "x3id": "",
                        "text": "[blank value]",
                        "iconCls": "",
                        "leaf": false,
                        "expanded": true,
                        "children": [
                            {
                                "x3id": false,
                                "text": "False",
                                "iconCls": "",
                                "leaf": false,
                                "expanded": true,
                                "children": [
                                    {
                                        "x3id": 0,
                                        "text": "0",
                                        "iconCls": "fakeleaf",
                                        "leaf": true,
                                        "expanded": true,
                                        "children": [

                                        ],
                                        "expandable": false 
                                    },
                                    {
                                        "x3id": 1,
                                        "text": "1",
                                        "iconCls": "fakeleaf",
                                        "leaf": true,
                                        "expanded": true,
                                        "children": [

                                        ],
                                        "expandable": false 
                                    } 
                                ] 
                            } 
                        ] 
                    } 
                ] 
            } 
        ] 
    },
    {
        "x3id": "Wed, 19 May 2010 16:17:00 -0400",
        "text": "05/19/2010 04:17:00 PM",
        "iconCls": "",
        "leaf": false,
        "expanded": false,
        "children": "" 
    }
]

请注意，状态将仅记住最后“加载”的节点，而不一定是最后选择和/或打开的节点。为此，您必须监听 TreePanel 的单击事件或其他内容来保存该信息。

所以，这当然不会处理我认为您正在使用的复选框，但如果您监听正确的事件，您可以回调服务器以保存此信息，然后添加已选中 属性添加到初始 JSON 中的 childs 中。希望这有帮助!