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
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()
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With