javascript - 是否可以使用 Extjs 5 TreeStore 在 ajax 请求中发送启动和限制参数?

标签 javascript extjs

我创建了一个 Ext.tree.Panel View 。

Ext.define('MyApp.requests.view.QueryRequestsGridView', {
    extend: 'Ext.tree.Panel',
    useArrows: true,
    rootVisible: false,
    singleExpand: true,
    bind: {
        store: '{queryRequestsGrid}'
    },
    viewConfig:{
        markDirty: false
    },
    columns: [
        { text: 'Id', dataIndex: 'id', flex: 3},
        { xtype: 'treecolumn', text: 'Name', dataIndex: 'name', flex: 6},
        { text: 'ControlType', dataIndex: 'controlType', flex: 4, sortable: false},
        { text: 'Description', dataIndex: 'description', flex: 6}
    ],
    dockedItems: [{
            xtype: 'pagingtoolbar',
            bind: {
                store: '{queryRequestsGrid}'
            },
            displayInfo: true
        }]
    }]
});

正如我从文档中看到的,Ext.tree.Panel 的存储应该是 Ext.data.TreeStore。

Ext.define('MyApp.requests.model.QueryRequestsGridModel', {
    extend: 'Ext.data.TreeModel',
    fields: [
        {name: 'id'},
        {name: 'name'},
        {name: 'controlType'},
        {name: 'description'}
    ]
});

Ext.define('MyApp.requests.store.QueryRequestsGridStore', {
    extend: 'Ext.data.TreeStore',
    model: 'MyApp.requests.model.QueryRequestsGridModel',
    pageSize: 10,
    alias: 'store.queryRequestsGrid',
    root: {
        expanded: false
    },
    remoteSort: true,
    proxy: {
        startParam: 'start',
        limitParam: 'limit',
        pageParam: undefined,
        sortParam: undefined,
        noCache: false,
        type: 'ajax',
        url: 'ucis.json'
    }
});

现在,在 View 创建时,使用以下 url 请求 TreeStore 数据,不带 start 和 limit 参数,而是使用 nodeParam:

ucis.json?node=root

如果用 Ext.data.Store 替换 Ext.data.TreeStore,将发送以下 url:

ucis.json?offset=0&limit=10

问题是:树存储是否支持启动和限制 pagingtoolbar 参数?

最佳答案

您可以轻松地对列表进行分页。但我担心树分页的概念并不明确。

当将树想象成一个缩进列表时,显然会有一些页面的叶子既不是根,也没有已发送给客户端的父页面(因为它们不在您请求的页面上)。但 TreeStore 的工作方式与缩进列表不同。它与根节点和子节点一起使用。这就是 TreeStore 没有内置分页支持的原因。此外,PagingToolbar 只能处理节点列表,不能处理树。

根据 Pagination in Ext Tree ,TreeStore不需要完整的树;它可以处理未完全加载的树,并且可以在扩展节点时动态获取某个节点的子节点。这就是你正在使用的。

当将每个节点的子节点视为一个列表时,没有内置方法可以自动将节点的 1000 个子节点拆分为页面。但是,您可以扩展 TreeStore 以实现这一点;没有硬性的技术界限反对它。但是您还必须使用 BufferedRenderer 来扩展 TreeGrid,这并不像听起来那么容易。最大的障碍是使用 pagingToolbar,您将无法轻松使用它或从中扩展,因为它绑定(bind)到网格并与其一起工作,但是您需要在每个节点的子列表上分页。因为,如果您的根节点有一个包含 1000 个节点的列表,并且您打开其中一个包含 500 个子节点的节点,那么 pagingToolbar 如何知道您想要分页浏览哪个节点的子节点?

关于javascript - 是否可以使用 Extjs 5 TreeStore 在 ajax 请求中发送启动和限制参数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34397226/

相关文章:

javascript - HTML <range> 初始值为 jQuery

javascript - 谷歌饼图不适合容器

javascript - onmousedown 改变光标;可能需要控制事件冒泡

javascript - 为什么 jQuery .index() 函数的行为不像我在这里期望的那样?

javascript - ExtJS 现代 : Painted Event is not triggered in iOS 13. 4+ WKWebview

javascript - Ext JS 通过回调访问 View 和存储

javascript - 在 Sencha Touch selectfield 中填充图标

javascript - 在javascript中获取URL中的单个参数

java - ExtJS JsonStore 和 Netty

javascript - Ext.Panel 项目未正确渲染