json - Extjs 树面板 store.load() 问题-6ren

json - Extjs 树面板 store.load() 问题

转载作者：行者123 更新时间：2023-12-05 04:16:46

我发现很多树的例子是通过静态存储中的根数据加载的，或者是通过加载数据 TreeView 的树存储加载的，最终提前加载树。

我的要求是树最初是空的，没有数据，所以我在树存储上使用 removeAll 来实现它，即使最初加载了 tee。

我正在使用 ExtJs V 5.0.1。

接下来点击按钮，我通过 store.load 方法加载树。

保存在php rest服务输出的json文件中的树数据。

单击按钮后树加载正常。问题是所有折叠或展开事件都只能起作用。在我的例子中，第一个元素展开后将折叠一次，然后不会展开。同样对于折叠的子元素，一旦展开就不会折叠。

在下面添加我的代码

Ext.define('TestTheme2.controller.Controller', {
extend: 'Ext.app.Controller',

requires: [
    'Ext.window.MessageBox'
],

stores: [

],

config: {
    isGridInspected: false
},

refs: {
    treeGrid: '#treegrid'
},

control: {        

    "#treegrid":{
        afterrender: 'afterViewRender'
    },
    "#loadButton":{

        click:'onBtnClick'
    }


},   

afterViewRender: function(component, eOpts){
    this.getTreeGrid().getStore().removeAll();
},

onBtnClick: function(){
    this.getTreeGrid().getStore().load();
}

});

我的查看代码

Ext.define('TestTheme2.view.MyTreeGrid', {
extend: 'Ext.tree.Panel',
alias: 'widget.MyTreeGrid',


requires: [
    'TestTheme2.store.MyStore',
    'Ext.tree.View',
    'Ext.grid.column.Check',
    'Ext.tree.Column',
    'Ext.grid.column.Widget',
    'Ext.button.Button',
    'Ext.menu.Menu',
    'Ext.menu.Item',
    'Ext.data.*',
    'Ext.grid.*',
    'Ext.tree.*',
],


itemId: 'treegrid',
width: '',
title: '',
allowDeselect: true,
enableColumnHide: false,
rowLines: true,
scroll: 'vertical',
sortableColumns: false,
store: 'MyStore',
rootVisible: false,

viewConfig: {
    itemId: 'mytreeview2',
    enableTextSelection: false,
    markDirty: false,
    stripeRows: true,
    animate: true
},
columns: [
    {
        xtype: 'checkcolumn',
        itemId: 'mycheck',
        width: 50,
        sortable: false,
        dataIndex: 'mark',
        text: ''
    },
    {
        xtype: 'treecolumn',
        width: 120,
        sortable: false,
        dataIndex: 'year',
        text: 'Year',
        flex: 1
    },
    {
        xtype: 'gridcolumn',
        width: 120,
        sortable: false,
        dataIndex: 'week',
        text: 'Week'
    },
    {
        xtype: 'gridcolumn',
        width: 110,
        sortable: false,
        dataIndex: 'startdate',
        text: 'Start Date'
    },
    {
        xtype: 'gridcolumn',
        width: 110,
        sortable: false,
        dataIndex: 'enddate',
        text: 'End Date'
    }
]

});

我的商店代码

Ext.define('TestTheme2.store.MyStore', {
extend: 'Ext.data.TreeStore',

requires: [
    'TestTheme2.model.MyModel'
],

constructor: function(cfg) {
    var me = this;
    cfg = cfg || {};
    me.callParent([Ext.apply({
        storeId: 'MyStore',
        model: 'TestTheme2.model.MyModel',
        proxy: {
            type: 'ajax',
            url: '../../PhpWS/MockRestFlow?Service=MyService&type=byweek'               
        }
    }, cfg)]);
}

});

我的模型代码

Ext.define('TestTheme2.model.MyModel', {
extend: 'Ext.data.Model',

requires: [
    'Ext.data.field.Field'
],

fields: [        
    {
        name: 'year'
    },
    {
        name: 'week'
    }
    {
        name: 'startdate'
    },
    {
        name: 'enddate'
    }
    {
        name: 'mark'
    }

]

});

我的 Json 文件

{
            text: '.',
            children: [
                {
                    year: 2014,
                    week: 33,
                    synergyid: '',
                    startdate: '01/11/2014',
                    enddate: '02/11/2014',
                    mark: false,
                    expanded: true,
                    children: [
                        {
                            year: 2014,
                            week: 33,
                            startdate: '03/11/2014',
                            enddate: '04/11/2014',
                            mark: false,
                            leaf: true
                        },
                        {
                            year: 2014,
                            week: 33,
                            startdate: '05/11/2014',
                            enddate: '06/11/2014',
                            mark: false,
                            leaf: true
                        },
                        {
                            year: 2014,
                            week: 33,
                            startdate: '07/11/2014',
                            enddate: '08/11/2014',
                            mark: false,
                            leaf: true
                        }
                    ]
                },
                {
                    year: 2014,
                    week: 34,
                    startdate: '09/11/2014',
                    enddate: '10/11/2014',
                    expanded: false,
                    mark: false,
                    children: [
                        {
                            year: '2014',
                            week: 34,
                            startdate: '11/11/2014',
                            enddate: '12/11/2014',
                            mark: false,
                            leaf: true
                        },
                        {
                            year: 2014,
                            week: 34,
                            startdate: '13/11/2014',
                            enddate: '14/11/2014',
                            mark: false,
                            leaf: true
                        },
                        {
                            year: 2014,
                            week: 34,
                            startdate: '15/11/2014',
                            enddate: '16/11/2014',
                            mark: false,
                            leaf: true
                        }
                    ]
                },
                {
                    year: 2014,
                    week: 35,
                    startdate: '17/11/2014',
                    enddate: '18/11/2014',
                    mark: false,
                    expanded: false,
                    children: [
                        {
                            year: 2014,
                            week: 35,
                            startdate: '19/11/2014',
                            enddate: '20/11/2014',
                            mark: false,
                            leaf: true
                        },
                        {
                            year: 2014,
                            week: 35,
                            startdate: '21/11/2014',
                            enddate: '22/11/2014',
                            mark: false,
                            leaf: true
                        },
                        {
                            year: 2014,
                            week: 35,
                            startdate: '23/11/2014',
                            enddate: '24/11/2014',
                            mark: false,
                            leaf: true
                        }
                    ]
                },
                {
                    year: 2014,
                    week: 36,
                    startdate: '17/11/2014',
                    enddate: '18/11/2014',
                    mark: false,
                    expanded: false,
                    children: [
                        {
                            year: 2014,
                            week: 36,
                            startdate: '19/11/2014',
                            enddate: '20/11/2014',
                            mark: false,
                            leaf: true
                        },
                        {
                            year: 2014,
                            week: 36,
                            startdate: '21/11/2014',
                            enddate: '22/11/2014',
                            mark: false,
                            leaf: true
                        },
                        {
                            year: 2014,
                            week: 36,
                            startdate: '23/11/2014',
                            enddate: '24/11/2014',
                            mark: false,
                            leaf: true
                        }
                    ]
                },
                {
                    year: 2014,
                    week: 37,
                    startdate: '17/11/2014',
                    enddate: '18/11/2014',
                    mark: false,
                    expanded: false,
                    children: [
                        {
                            year: 2014,
                            week: 37,
                            startdate: '19/11/2014',
                            enddate: '20/11/2014',
                            mark: false,
                            leaf: true
                        },
                        {
                            year: 2014,
                            week: 37,
                            startdate: '21/11/2014',
                            enddate: '22/11/2014',
                            mark: false,
                            leaf: true
                        },
                        {
                            year: 2014,
                            week: 37,
                            startdate: '23/11/2014',
                            enddate: '24/11/2014',
                            mark: false,
                            leaf: true
                        }
                    ]
                },
                {
                    year: 2014,
                    week: 37,
                    startdate: '17/11/2014',
                    enddate: '18/11/2014',
                    mark: false,
                    expanded: false,
                    children: [
                        {
                            year: 2014,
                            week: 37,
                            startdate: '19/11/2014',
                            enddate: '20/11/2014',
                            mark: false,
                            leaf: true
                        },
                        {
                            year: 2014,
                            week: 37,
                            startdate: '21/11/2014',
                            enddate: '22/11/2014',
                            mark: false,
                            leaf: true
                        },
                        {
                            year: 2014,
                            week: 37,
                            startdate: '23/11/2014',
                            enddate: '24/11/2014',
                            mark: false,
                            leaf: true
                        }
                    ]
                }
            ]
        }

最佳答案

与其在渲染后删除存储值并在单击按钮时再次加载存储，不如试试下面我在帖子中看到的方法，

只需定义一个最初没有子项的空扩展根，然后您可以随时加载商店:

 Ext.create('Ext.data.TreeStore', {
    model: '...',
    proxy: {
        type: 'ajax',
        reader: {
            type: 'json',
            root: 'data'
    },
    api: {
        read : 'some url'
    }
    folderSort: true,
    rootVisible: false,
    root: {expanded: true, text: "", "data": []} // <- Inline root
});

在显式 .load 之后，内联根被覆盖。希望对您有所帮助。

关于json - Extjs 树面板 store.load() 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26353163/

文章推荐： llvm 通过 : How to insert a variable using existing variable value

文章推荐： php - LDAP 身份验证的 DN 语法无效

文章推荐： linq - 使用 Linq 按数组内的数组分组

文章推荐： time - N+N/2+N/4...迭代运行时间

树结构之MongoDb 使用的到底是 B 树，还是 B+ 树？
关于 B 树与 B+ 树，网上有一个比较经典的问题：为什么 MongoDb 使用 B 树，而 MySQL 索引使用 B+ 树? 但实际上 MongoDb 真的用的是 B 树吗?
c# - 持久(基于磁盘)R 树(或 R* 树)
如何将 R* Tree 实现为持久(基于磁盘)树？保存 R* 树索引或保存叶值的文件的体系结构是什么？注意:此外，如何在这种持久性 R* 树中执行插入、更新和删除操作？注意事项二:我已经实现了一个
java - 给定另一个 AST 树，在 Java 中创建一个 AST 树
目前，我正在努力用 Java 表示我用 SML 编写的 AST 树，这样我就可以随时用 Java 遍历它。我想知道是否应该在 Java 中创建一个 Node 类，其中包含我想要表示的数据，以及一个数
c++ - C++ 中任何好的范围查询库(使用 K-D 树、四叉树或 R 树)
我之前用过这个库http://www.cs.umd.edu/~mount/ANN/ .但是，它们不提供范围查询实现。我猜是否有一个 C++ 范围查询实现(圆形或矩形)，用于查询二维数据。谢谢。最佳
为什么MySQL数据库索引选择使用B+树?
在进一步分析为什么MySQL数据库索引选择使用B+树之前，我相信很多小伙伴对数据结构中的树还是有些许模糊的，因此我们由浅入深一步步探讨树的演进过程，在一步步引出B树以及为什么MySQL数据库索引选择
数据结构-树，三探之代码实现
书接上回，今天和大家一起动手来自己实现树。相信通过前面的章节学习，大家已经明白树是什么了，今天我们主要针对二叉树，分别使用顺序存储和链式存储来实现树。 01、数组实现我们在上一节中说过，
数据结构-树，再探
书节上回，我们接着聊二叉树，N叉树，以及树的存储。 01、满二叉树如果一个二叉树，除最后一层节点外，每一层的节点数都达到最大值，即每个节点都有两个子节点，同时所有叶子节点都在最后一层，则这个
数据结构-树，初探
树是一种非线性数据结构，是以分支关系定义的层次结构，因此形态上和自然界中的倒挂的树很像，而数据结构中树根向上树叶向下。什么是树？ 01、定义树是由n（n>=0）个元素节点组成的
操作系统的那棵“树”---06
操作系统的那棵“树” 今天从一颗开始，我们看看如何从小树苗长成一颗苍天大树。运转CPU CPU运转起来很简单，就是不断的从内存取值执行。 CPU没有好好运转 IO是个耗费时间的活，如果CPU在取值
r - 从物种列表制作简单的系统发育树状图(树)
我想为海洋生物学类(class)制作一个简单的系统发育树作为教育示例。我有一个具有分类等级的物种列表: Group <- c("Benthos","Benthos","Benthos","Be
c++ - 树，无法正确删除节点
我从这段代码中删除节点时遇到问题，如果我插入数字 12 并尝试删除它，它不会删除它，我尝试调试，似乎当它尝试删除时，它出错了树的。但是，如果我尝试删除它已经插入主节点的节点，它将删除它，或者我插入数字
haskell - 如何在Haskell中实现B+树？
B+ 树的叶节点链接在一起。将 B+ 树的指针结构视为有向图，它不是循环的。但是忽略指针的方向并将其视为链接在一起的无向叶节点会在图中创建循环。在 Haskell 中，如何将叶子构造为父内部节点的子
GWT 树，开幕事件
我在 GWT 中使用树控件。我有一个自定义小部件，我将其添加为 TreeItem: Tree testTree = new Tree(); testTree.addItem(myWidget); 我想
c - 树/链表结构的遍历
它有点像混合树/链表结构。这是我定义结构的方式 struct node { nodeP sibling; nodeP child; nodeP parent; char
c - 树:使用队列进行层序遍历
我编写了使用队列遍历树的代码，但是下面的出队函数生成错误，head = p->next 是否有问题？我不明白为什么这部分是错误的。 void Levelorder(void) { node *tmp,
javascript - 将平面数组解析为嵌套结构(树)
例如，我想解析以下数组: var array1 = ["a.b.c.d", "a.e.f.g", "a.h", "a.i.j", "a.b.k"] 进入: var json1 = { "nod
java - 树-路径总和
问题 -> 给定一棵二叉树和一个和，确定该树是否具有从根到叶的路径，使得沿路径的所有值相加等于给定的和。我的解决方案 -> public class Solution { public bo
带有列的 Java 树
我有一个创建 java 树的任务，它包含三列:运动名称、运动类别中的运动计数和上次更新。类似的东西显示在下面的图像上: 如您所见，有 4 种运动:水上运动、球类运动、跳伞运动和舞蹈运动。当我展开 sk
mysql - H2数据库中的B+树
我想在 H2 数据库中实现 B+ Tree，但我想知道，B+ Tree 功能在 H2 数据库中可用吗？最佳答案 H2 已经使用了 B+ 树(PageBtree 类)。关于mysql - H2数据库
java - 字符串数组(树)
假设我们有 5 个字符串数组: String[] array1 = {"hello", "i", "cat"}; String[] array2 = {"hello", "i", "am"}; Str

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

json - Extjs 树面板 store.load() 问题