Sorting a column in a ExtJS TreePanel changes order of records of the nodes not just leafs

Question

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

Tisza

Answer 1

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.com/#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()
});

Spoonerism

Nice, this appears to work. I thought I had the same, something not right on my end. I am going to check it now. Will be back shortly. – Tisza

Sure. Let me know if you have any further question. – Spoonerism

I found this to be an error in extjs 4, it works with >= 5 – Tisza