在ExtJS TreePanel中对列进行排序会改变节点的记录顺序，而不仅仅是叶子节点的顺序。

Question

在ExtJS TreePanel中对列进行排序会改变节点的记录顺序，而不仅仅是叶子节点的顺序。

javascriptextjsextjs4.1extjs4.2

8

我已经成功实现了一个树形面板，一切似乎都正常。我的数据如下所示。我的字段是“name”，其中包含像“ItemA”、“ProductA”这样的节点以及“铁”这样的叶子和一个名为“Available”的属性，它是true/false（布尔值但表示为字符串）。

当单击布尔列进行排序时，它会对它们进行排序，但会将它们整体排序。即我只想在每个组中对布尔值进行排序。目前，它似乎按项组对它们进行排序。因此，ItemB下面的节点会改变顺序，而不仅仅是布尔列的顺序。希望这有意义。

我将列模型设置为：

        sortType: Ext.data.SortTypes.asUCString

我也尝试在treepanel中将“folderSort”属性从true改为false，但没有任何区别。

有什么想法吗？

这是我的数据示例，以便更好地可视化它。

 ItemA
    ProductA
       Iron        true

 ItemB
    Product123
       House       true
       Garage      false
       Misc        false
    Product1443
       HouseF      true
       NewItem     false

- Martin

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Semih Gokceoglu · Accepted Answer

据我理解，您想对叶子节点进行排序而不是节点。因此，您可以指定您的叶子和节点模型，然后将“available”属性设置为叶子。请检查这个 fiddle：https://fiddle.sencha.com/#fiddle/upv。

如果这不是您想要的，或者无法更改您的 treepanel 模型，请更改该 fiddle 并添加您的 treepanel 及其模型。希望能有所帮助。

Ext.define('model.ItemsRoot', {
    extend: 'Ext.data.TreeModel',
    childType: 'model.Items',
    fields: [{
        name: 'text',
        mapping: 'name'
    },{
        name: 'Available',
        type: 'boolean'
    }]
});
Ext.define('model.Items', {
    extend: 'Ext.data.TreeModel',
    childType: 'model.Products',
    fields: [{
        name: 'text',
        mapping: 'name'
    }]
});
Ext.define('model.Products', {
    extend: 'Ext.data.TreeModel',
    childType: 'model.ItemNames',
    fields: [{
        name: 'text',
        mapping: 'name'
    }]
});
Ext.define('model.ItemNames', {
    extend: 'Ext.data.TreeModel',
    fields: [{
        name: 'text',
        mapping: 'name'
    }]
});
var treeStore = Ext.create('Ext.data.TreeStore', {
    model: 'model.ItemsRoot', 
    root: {
        text: '',
        expanded: true,
        children: [{
            name: "Item A",
            expanded: true,
            children: [{
                name: "Product A",
                expanded: true,
                children: [{
                    name: "Iron",
                    leaf: true,
                    Available: true
                }]
            }]
        }, {
            name: "Item B",
            expanded: true,
            children: [{
                name: "Product B",
                expanded: true,
                children: [{
                    name: "House",
                    Available: false,
                    leaf: true
                }, {
                    name: "Garage",
                    leaf: true,
                    Available: true
                }, {
                    name: "Misc",
                    leaf: true,
                    Available: false
                }]
            }, {
                name: "Product C",
                expanded: true,
                children: [{
                    name: "House F",
                    leaf: true,
                    Available: true
                }, {
                    name: "New Item",
                    leaf: true,
                    Available: false
                }]
            }]
        }]
    }
});
var treePanel = Ext.create('Ext.tree.Panel', {
    store: treeStore,
    rootVisible: false,
    columns: [{
        xtype: 'treecolumn', //this is so we know which column will show the tree
        text: 'Items',
        flex: 2,
        sortable: true,
        dataIndex: 'name'
    }, {
        //xtype: 'checkcolumn',
        header: 'Available',
        dataIndex: 'Available',
        //stopSelection: false,
        //menuDisabled: true,
        editor: {
            xtype: 'checkbox',     
        }
    }],
    renderTo: Ext.getBody()
});