PDA

View Full Version : Using a Tree (column) indide a grid....



tobias@hunique.nl
9 Oct 2013, 5:44 AM
Hello everyone,

I've been able to create a grid (dynamically, great feature btw) but now i would like to implement it inside my grid form, is this possible? I have been looking around but see no example of this, or can really find an answer through any search engine... i've added some images to make my wishes clear.. 46249
46248

Then i have tried the following for my store creation


var category_store = Ext.create('Ext.data.TreeStore', { proxy: {
type: 'ajax',
url: base_url + 'categoryList'
},
sorters: [{
property: 'leaf',
direction: 'ASC'
}, {
property: 'text',
direction: 'ASC'
}]
});




this works fine, i can see my call in firebug and the data looks as it should.

but then the issue lays in the grid section...

header: 'Categories', dataIndex: 'text',
width: 180,
editor: {
xtype:'treecolumn',
allowBlank: false,
editable:false,
triggerAction: 'all',
id:'categories',
store: category_store,
valueField:'id',
displayField:'text',
minListWidth: 300,
mode: 'local',
triggerAction: 'all',
emptyText:'Select categories',
selectOnFocus:true
}


i have also tried to create :


var tree = Ext.create('Ext.tree.Panel', {
store: category_store,
rootVisible: false,
lines: false,
useArrows: true,
listeners: {
itemclick: function(view, node) {
if(node.isLeaf()) {
// some functionality to open the leaf(document) in a tabpanel
} else if(node.isExpanded()) {
node.collapse();
} else {
node.expand();
}
}
}
});


and then add that ass the store but that also doesn't seem to work... is this at all possible?
If so, what should i try next, i have pretty much ran out of ideas....

Thanks in advance for any help you can give me!

israelroldan
14 Oct 2013, 1:07 PM
Sadly, there's no out of the box way to do this, but I'd suggest you to create your own fieldtype, by extending TriggerField (http://docs-origin.sencha.com/extjs/3.4.0/#!/api/Ext.form.TriggerField) and showing the tree when the field is clicked, an similar implementation to DatePicker, but with a tree.