`
ybbkd2
  • 浏览: 33166 次
社区版块
存档分类
最新评论

extjs5 使用 treepanel 、treeStore、Proxy

阅读更多

一直想使用 extjs5 treeStroe with Proxy 方式一次性load 所有树形结构数据,结果没成功,
treeStroe 在每次点击展开的时候都会发起请求到后台,url里面还增加node参数。
只能做成异步加载了。每次只load 当前节点的子节点。


Ext.define('publicweb.store.MenuTreeStore', {
    extend: 'Ext.data.TreeStore',

    requires: [
        'Ext.data.proxy.Ajax',
        'Ext.data.reader.Json'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            storeId: 'MenuTreeStore',
            autoLoad: false,
            proxy: {
                type: 'ajax',
                url: 'menu.json',
                reader: {
                    type: 'json',
                    rootProperty: 'items'
                }
            }
        }, cfg)]);
    }
});


treepanel:

     {
                    xtype: 'treepanel',
                    store: 'MenuTreeStore',
                    viewConfig: {

                    }
      }
分享到:
评论

相关推荐

    extjs4 MVC2 TreePanel动态JSON实现

    根据提供的文件信息,我们可以深入探讨如何在ExtJS4框架中使用MVC2模式下的TreePanel组件结合动态JSON数据实现树形结构的展示与交互。以下将详细解释代码中涉及的关键概念和技术要点: ### 1. 创建TreeStore实例 ...

    Extjs TreeStore+pagingToolbar 分页

    TreeStore是ExtJS中用于表示树形数据结构的组件,它可以与各种UI组件(如TreePanel)配合使用,展示层级化的数据。在这个主题中,我们将深入探讨如何结合TreeStore和pagingToolbar实现分页功能。 在传统的表格数据...

    extjs中Ext.Panel和TreePanel 组件动态加载本地页面数据

    在这个例子中,`TreePanel`使用`TreeStore`从`tree_data.json`加载数据,并且隐藏了根节点。 标签“源码”和“工具”暗示了这篇博客可能还讨论了EXTJS的源代码以及如何使用EXTJS作为开发工具来实现动态加载功能。...

    extjs4中panel的accordion布局以及treepanel导航

    1. 创建一个TreeStore,指定数据源和加载策略(例如,使用`proxy`配置项设置远程数据源)。 2. 在TreePanel中关联这个TreeStore,并配置必要的属性,如`rootVisible`(是否显示根节点)、`displayField`(显示节点...

    extjs tree

    5. 绑定事件:可以为TreePanel绑定各种事件,如`itemclick`、`itemexpand`等,以响应用户的操作。 以下是一个简单的ExtJS TreePanel示例代码: ```javascript Ext.application({ name: 'MyApp', launch: ...

    extjs 树型分页组件

    在EXTJS中,可以使用`TreeStore`类,并设置`paging`属性为`true`。还需要定义`proxy`,通常使用`AjaxProxy`或`RestProxy`,并配置相应的URL,用于向服务器请求数据。 3. 数据模型与分页参数 在`TreeStore`中,每个...

    extjs开发tree效果

    这可以通过配置store的`proxy`实现,通常使用AjaxProxy。 在描述中提到,这个示例是基于Java的。在实际开发中,后端服务器通常使用Java编写,通过RESTful API提供JSON数据给前端的ExtJS应用。树数据可能包含层级...

    JavaScript的ExtJS框架中数面板TreePanel的用法实例解析_.docx

    2. 如果数据需要从服务器动态获取,可以利用`Ext.tree.TreeLoader`或`Ext.data.TreeStore`的`proxy`配置来实现。以下是一个简单的例子,展示如何从Servlet获取JSON数据: ```javascript var tree = Ext.create('Ext....

    extjs 树 搜索

    总的来说,EXTJS的树形搜索功能是通过结合TreePanel、TreeStore和过滤机制实现的,它提供了灵活的搜索选项,能够满足不同场景下的数据查找需求。通过深入理解和运用这些知识点,我们可以构建出功能强大、用户体验...

    Extjs的tree

    在ExtJS中,可以使用`Ext.data.proxy.WCF`作为数据代理,配置WCF的服务地址和方法,以异步方式加载树数据。 7. **自定义节点** 除了基本的文本和图标,节点还可以包含其他组件,如按钮、输入框等,以增强交互性。...

    Extjs4 多选下拉树

    我们需要创建一个`Ext.data.TreeStore`,并指定它的`root`、`proxy`(通常是`AjaxProxy`)以及`model`,确保数据能正确加载到TreePanel中。 5. **Default Selection**: 默认值选中可以通过在初始化TreePanel时设置`...

    ExtJS samples

    在给定的“ExtJS samples”压缩包中,我们可以期待找到关于如何使用ExtJS的TreePanel和TreeNode的相关示例。TreePanel是ExtJS中的一个组件,用于展示层次结构的数据,而TreeNode则是TreePanel的基本构建块,代表树形...

    extjs 写的动态加载、增删改查、拖拽Tree(完整版)

    动态加载通常通过配置`rootVisible: false`、`loadMask: true`以及设置`treeStore`的`proxy`和`autoload`属性来实现,同时配合使用`treeStore.load()`方法来异步加载数据。 接下来是增删改查(CRUD)操作。在ExtJS ...

    extjs的tree的使用

    动态加载可以通过在`Ext.data.TreeStore`中设置`proxy`和`autoLoad`属性来实现。 ### 自定义事件与交互 ExtJS的Tree组件还提供了一系列事件,如`beforeitemexpand`、`itemexpand`、`itemcollapse`等,这些事件可以...

    动态加载树Extjs + asp.net

    总结来说,动态加载树ExtJS + ASP.NET的实现涉及到前端的ExtJS TreePanel、TreeStore,以及后端的ASP.NET服务。通过这种方式,我们可以创建高效、响应式的树形界面,同时减少不必要的网络传输,提升应用性能。

    extjs tree 异步加载树型

    对于异步加载,一般使用 `ajax` 类型的 proxy,并设置 `url` 参数指向服务器端接口。 2. **TreeModel**:定义树节点的数据结构,包括 id、text、children 等属性。在异步加载中,children 属性通常为空或未定义,...

    tree 动态树 extjs ajax

    它使用TreeStore来存储和管理数据,而TreeStore可以通过Ajax proxy与服务器进行通信,获取JSON格式的树数据。 **Ajax集成** Ajax(Asynchronous JavaScript and XML)是实现Web应用异步通信的技术,允许在不刷新...

    extjs-tree.zip_extjs tree

    这个"extjs-tree.zip"文件包含了使用Java编写的ExtJS异步树形控件的示例代码,旨在帮助开发者快速理解和应用这一功能。ExtJS是Sencha公司开发的一个前端框架,广泛应用于构建富互联网应用程序(RIA)。 在ExtJS中,...

    extjs tree示例

    在本示例中,我们将探讨如何使用ExtJS来创建、访问和操作一个树形结构,特别是在数据库操作方面,如添加和删除树节点。这涉及到JavaScript编程,特别是ExtJS框架的理解,以及与后台数据库(例如Access)的交互。 ...

    ExtJs在struts2.0.x下实现动态树的解决方案

    在前端,使用ExtJs创建TreePanel,并配置它的store指向Struts2 Action的URL,以获取动态数据。例如: ```javascript var treeStore = Ext.create('Ext.data.TreeStore', { proxy: { type: 'ajax', url: '/...

Global site tag (gtag.js) - Google Analytics