ExtJS - 保存树面板的状态。

发布于 2024-09-03 07:21:01 字数 1014 浏览 5 评论 0原文

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


我之前见过 ExtJS-2.xx 这样做:请参阅 extjs 论坛
但看起来它们几乎毫无生气,上面有帖子询问这个问题或类似问题,但长达 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 的保存状态功能绑定到 cookie 吗?

TLDR I want my treepanel from EXTJS to remember its previous settings. ExtJS-3.2.1


I have seen this done before for ExtJS-2.x.x :See here on the extjs forums.

But as seen as they are pretty much lifeless, with threads on there asking this question or similar with no reply for up to 6months. I thought I would bring it here.

I need to be able to get my treePanel to remember previous opened folders and which boxes are checked. It is async treePanel. Note that this is all client side script.

Panel is as follows:

 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
   })

Am using ExtJS-3.2.1, GeoExt, OpenLayers.

Anyone done this before or know how to do it? (in extjs-3.2.1)
(Preferably with a plugin but any answer is appreciated)

Anyone know how to use the save state function of extjs to bind to a cookie?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

虚拟世界 2024-09-10 07:21:01

我知道这不能完全回答您的所有问题,但我最近主要是在服务器端完成此操作。要知道的关键是,即使您使用 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 的单击事件或其他内容来保存该信息。

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

I know this won't answer all of your question exactly but I have done this recently mostly all on the server-side of things. The key thing to know is that even if you use AsyncTreeNodes, you can still specicify in the nodes the children property which will contain another array of nodes.

So, in the URL function called by the TreeLoader instance of my TreePanel I made sure to save the 'path' of the node being loaded in a the database (the point for us was to persist this state on the server). So I save in that database what level and value of the loaded node and it's parents.

To do this I added a listener to the loader beforeLoad event and set that information in the loader's baseParams property.

Then I made it so that this same function on the server that is called by the loader, if loading the root Node's children, will also recursively call itself to gather the children nodes (based on what I saved in the database). So the actual JSON returned to the loader for the root node looks like this:

[
    {
        "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": "" 
    }
]

Note that the state will then remember only the last 'loaded' nodes, not necessarily the last selected and/or opened. To do so you'd have to listen to the click event of the TreePanel or something to save that information.

So of course this won't handle the checkboxes which I think you are using, but if you listen to the right event you could make a callback to the server to save this information and then add the checked property to the childrens in the initial JSON.
Hope this helps!

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文