javascript - Sorting a column in a ExtJS TreePanel changes order of records of the nodes not just leafs - Stack Overflow

admin管理员组

文章数量:1431000

I have managed to implement a treepanel and everything seems to be working. I have data like so ( see below). My fields I "name" which holds below things like "ItemA", "ProductA" which are nodes and the "Iron" which is a leaf and a property called "Available" which is true / false (boolean but represented as a string).

When clicking the sort column for the boolean, it sorts them but sorts then as whole. i.e. I would only want to sort the booleans in each group. Currently it sorts them as group of items it seems. So the nodes under ItemB change order, not just the order of the boolean column. I hope this makes sense.

I have the column model set to this

        sortType: Ext.data.SortTypes.asUCString

I have also tried changing the property of "folderSort" between true and false in the treepanel but it makes no difference.

Any ideas?

Here's an example of my data to try and visualize it better.

 ItemA
    ProductA
       Iron        true

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

I have managed to implement a treepanel and everything seems to be working. I have data like so ( see below). My fields I "name" which holds below things like "ItemA", "ProductA" which are nodes and the "Iron" which is a leaf and a property called "Available" which is true / false (boolean but represented as a string).

When clicking the sort column for the boolean, it sorts them but sorts then as whole. i.e. I would only want to sort the booleans in each group. Currently it sorts them as group of items it seems. So the nodes under ItemB change order, not just the order of the boolean column. I hope this makes sense.

I have the column model set to this

        sortType: Ext.data.SortTypes.asUCString

I have also tried changing the property of "folderSort" between true and false in the treepanel but it makes no difference.

Any ideas?

Here's an example of my data to try and visualize it better.

 ItemA
    ProductA
       Iron        true

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

• javascript
• extjs
• extjs4.1
• extjs4.2

Share Improve this question Follow edited Sep 29, 2018 at 20:00 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Sep 28, 2015 at 11:00 MartinMartin 24.3k6262 gold badges210210 silver badges330330 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8 +250

As I understand from your question, you can't only sort the leafs instead of nodes. So, you can specify your leaf and node models and then set the "available" property to leafs. Please check this fiddle: https://fiddle.sencha./#fiddle/upv

If that's not what you are looking for or it's not possible to change your treepanel model, please change the fiddle and add your treepanel with its model. Hope it helps.

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

本文标签：