对ExtJS TreePanel中的列进行排序会更改节点记录的顺序,而不仅仅是叶子

Question

我已经设法实现了一个treepanel,一切似乎都在工作.我有这样的数据(见下文).我的字段我"命名",其中包含"ItemA","ProductA"之类的节点和"Iron",它是一个叶子和一个名为"Available"的属性,它是真/假(布尔但表示为字符串) .

单击布尔值的排序列时,它会对它们进行排序,但整体排序.即我只想对每组中的布尔值进行排序.目前它将它们分类为一组项目.所以ItemB下的节点改变顺序,而不仅仅是布尔列的顺序.我希望这是有道理的.

我将列模型设置为此

        sortType: Ext.data.SortTypes.asUCString

我也尝试在treepanel中更改true和false之间的"folderSort"属性,但它没有任何区别.

有任何想法吗？

这是我的数据示例,可以更好地将其可视化.

 ItemA
    ProductA
       Iron        true

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

Answer 1

据我所知,你不仅可以对叶子进行排序,而不是对节点进行排序.因此,您可以指定叶子和节点模型,然后将"可用"属性设置为叶子.请检查这个小提琴:https://fiddle.sencha.com/#fiddle/upv

如果这不是您正在寻找的或者无法更改您的树梢模型,请更改小提琴并添加您的树梢模型.希望能帮助到你.

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