PDA

View Full Version : Sorting a TreePanel



putty
22 May 2013, 10:45 PM
I have a TreePanel with a drag drop plugin, I need to be able to control the the order of the tree nodes via drag drop and sync them back to the server. I can drag drop the nodes order however the store never registers any change to sync.

Question
How do configure a TreeSrore and TreePanel so that they will sync tree node order changes?

Tree

Ext.define('MyApp.view.SectionTree', { extend: 'Ext.tree.Panel',
alias: 'widget.section_tree',


requires: [
'MyApp.view.ClearTriggerField',
'MyApp.view.NewMenu'
],


maxWidth: 400,
minWidth: 150,
width: 250,
bodyBorder: false,
collapsible: true,
header: false,
titleCollapse: false,
hideHeaders: true,
store: 'DocumentTree',
animate: false,
folderSort: true,
lines: false,
rootVisible: false,
useArrows: true,


initComponent: function() {
var me = this;


Ext.applyIf(me, {
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'clear_trigger_field'
},
{
xtype: 'tbfill'
},
{
xtype: 'button',
text: 'New',
menu: {
xtype: 'new_menu'
}
}
]
}
],
viewConfig: {
autoScroll: true,
stripeRows: true,
plugins: [
Ext.create('Ext.tree.plugin.TreeViewDragDrop', {
allowParentInserts: true,
nodeHighlightOnDrop: true,
nodeHighlightOnRepair: true
})
],
listeners: {
nodedragover: {
fn: me.onViewNodeDragOver,
scope: me
},
beforedrop: {
fn: me.onTreeViewDragDropBeforeDrop,
scope: me
}
}
},
listeners: {
itemcontextmenu: {
fn: me.onTreepanelItemContextMenu,
scope: me
}
}
});


me.callParent(arguments);
},


onTreeViewDragDropBeforeDrop: function(node, data, overModel, dropPosition, dropHandlers, eOpts) {
var dragNodeName = data.records[0].data.text;
var dragNodeType = data.records[0].data.object_type;
var dropNodeName = overModel.data.text;




//wait until confirmation complete
dropHandlers.wait = true;


Ext.Msg.show({
title: 'Confirm Move',
width : 400,
msg: 'Are you sure you want to move <b>' + dragNodeType + ' ' + dragNodeName + '</b> to <b>' + dropNodeName + '</b>?',
buttons: Ext.Msg.YESNO,
closable: false,
fn: function (btn) {
if(btn == "yes") {
dropHandlers.processDrop();
}
}
});


},


onViewNodeDragOver: function(targetNode, position, dragData, e, eOpts) {
return true;
},


onTreepanelItemContextMenu: function(dataview, record, item, index, e, eOpts) {
e.stopEvent();
this.contextRecord = record;


var menu = Ext.create('MyApp.view.TreeContextMenu', {});


menu.showAt(e.getXY());
}


});

Store

Ext.define('MyApp.store.DocumentTree', { extend: 'Ext.data.TreeStore',


requires: [
'MyApp.model.Tree'
],


constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
sortRoot: 'order',
autoLoad: false,
autoSync: true,
model: 'MyApp.model.Tree',
remoteFilter: true,
remoteSort: true,
storeId: 'DocumentTreeStore',
proxy: {
type: 'ajax',
url: '/api/document_tree/',
reader: {
type: 'json'
}
},
sorters: {
property: 'order'
}
}, cfg)]);
}
});

Model

Ext.define('MyApp.model.Tree', { extend: 'Ext.data.Model',


fields: [
{
name: 'id'
},
{
name: 'text'
},
{
name: 'leaf'
},
{
name: 'cls'
},
{
name: 'icon'
},
{
name: 'object_id'
},
{
name: 'object_type'
},
{
name: 'disabled'
},
{
name: 'order'
}
]
});

slemmon
24 May 2013, 11:53 AM
I suspect you'll need to key off of the treeStore's move (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.TreeStore-event-move) event to trigger the communication to the server.