Question

我创建了一个Ext.tree.Panel视图。

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

现在在视图创建时，使用以下url请求TreeStore数据，没有start和limit params，而是使用nodeParam：

ucis.json?node=root

如果用Ext.data.Store替换Ext.data.TreeStore，将发送以下URL：

ucis.json?offset=0&limit=10

问题是：树库支持是否启动并限制pagingtoolbar参数？

Answer 1

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

当把树想象为缩进列表时，显然会有带叶子的页面，这些页面既不是根也不是父母已经发送到客户端（因为它们不在您请求的页面上）。但TreeStore不像缩进列表那样工作;它适用于根节点和子节点。这就是为什么TreeStore没有内置分页支持的原因。此外，PagingToolbar只能使用节点列表，而不能使用树。

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

当将每个节点的子节点视为列表时，没有内置方法可以自动将节点的1000个子节点拆分为页面。但是，您可以扩展TreeStore以实现这一点;对它没有严格的技术边界。但是你必须使用BufferedRenderer扩展TreeGrid，这并不像听起来那么容易。最大的障碍是使用pagingToolbar，你将不能轻易地使用它或从中扩展，因为它绑定到网格并使用它，但你需要在每个节点的子列表上分页。因为，如果您的根有一个包含1000个节点的列表并且您打开其中一个节点并且有500个子节点，那么pagingToolbar将如何知道您想要翻页的哪个节点的子节点？

Answer 2

回答我自己的问题：

是的，可以使用store.load从viewcontroller发送start和limit参数（例如，在afterrender事件上）

store.load({
    params: {
        start: 0,
        limit: store.pageSize
    }
});

TreeStore不会在第一次加载时发送这些参数，因为它不支持从框中分页。

是否可以使用Extjs 5 TreeStore在ajax请求中发送start和limit参数？

2 个答案: