ExtJS 6.0.2:
I need to send to my server any changes in the index order of my Tree Panel.
After reading this: Ext 4.2 Using proxy to save tree and this ExtJs Store.save()? and How to save JSON file when use it as ExtJs grid store and some confusing Sencha docs...
1) I need to configure a writer in my Store's Proxy. Result: Nothing.
2) I need to set autoSync:true in my Store. Result: Nothing.
3) I need to set the fields property. Result: Nothing.
4) I need to put the index attribute into fields property. Result: My server detected a call, but nothing came with the request parameter list.
5) Need to put the rootProperty:'data' attribute in the writer. Result: Wow! My server detected a JSON string with the 2 nodes I swap.
data = [{"index":5,"id":"6"},{"index":4,"id":"12"}]
All good, but I've noticed a collateral effect: The two swapped nodes was replaced by the two parent nodes and very weird things start to happen...
What I'm doing wrong?
Before:
After try to swap Parking and Continentes:
My Store:
var layerStore = Ext.create('Ext.data.TreeStore', {
autoSync:true,
fields: [
{ name: 'index', type: 'int' },
{ name: 'text', type: 'string' },
{ name: 'serviceUrl', type: 'string' },
{ name: 'layerName', type: 'string' },
{ name: 'originalServiceUrl', type: 'string' }
],
proxy: {
type: 'ajax',
url: 'getLayersTreeNode',
reader: {
type: 'json'
},
writer: {
type:'json',
allowSingle:false,
encode:true,
rootProperty:'data'
}
},
root: {
text: 'Camadas',
id: 0,
index:0,
expanded: true
},
listeners : {
write: function(store, operation, opts){
alert("Fired!");
}
}
});
My Tree:
var layerTree = Ext.create('Ext.tree.Panel', {
store: layerStore,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop',
}
},
scrollable: true,
scroll: 'both',
height: 350,
width: 300,
flex:1,
useArrows: true,
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Expandir',
handler : layerTreeExpandir
}, {
text: 'Recolher',
handler : layerTreeRecolher
}]
}],
listeners: {
itemclick: layerTreeItemClick,
checkchange: function(node, checked, eOpts){
node.eachChild(function(n) {
node.cascadeBy(function(n){
n.set('checked', checked);
});
});
//check parent node if child node is check
p = node.parentNode;
var pChildCheckedCount = 0;
p.suspendEvents();
p.eachChild(function(c) {
if (c.get('checked')) pChildCheckedCount++;
p.parentNode.set('checked', !!pChildCheckedCount);
p.set('checked', !!pChildCheckedCount);
});
p.resumeEvents();
}
}
});
A JSON Tree response:
[{"checked":false,"cls":"","id":"1","idNodeParent":27,"index":0,"layerName":"osm:highway-label","leaf":true,"originalServiceUrl":"","serviceUrl":"http://192.168.25.25:8080/geoserver/osm/wms","text":"Nomes das Vias"},{"checked":false,"cls":"","id":"2","idNodeParent":27,"index":1,"layerName":"osm:vias","leaf":true,"originalServiceUrl":"","serviceUrl":"http://192.168.25.25:8080/geoserver/osm/wms","text":"Vias"},{"checked":false,"cls":"","id":"3","idNodeParent":27,"index":2,"layerName":"osm:placenames-medium","leaf":true,"originalServiceUrl":"","serviceUrl":"http://192.168.25.25:8080/geoserver/osm/wms","text":"Nomes de Localidades"},{"checked":false,"cls":"","id":"4","idNodeParent":27,"index":3,"layerName":"osm:parking-area","leaf":true,"originalServiceUrl":"","serviceUrl":"http://192.168.25.25:8080/geoserver/osm/wms","text":"Parking"},{"checked":false,"cls":"","id":"5","idNodeParent":27,"index":4,"layerName":"land","leaf":true,"originalServiceUrl":"","serviceUrl":"http://192.168.25.25:8080/geoserver/osm/wms","text":"Continentes"},{"checked":false,"cls":"","id":"24","idNodeParent":27,"index":5,"layerName":"osm:powergenerator","leaf":true,"originalServiceUrl":"","serviceUrl":"http://192.168.25.25:8080/geoserver/osm/wms?","text":"Geradores"}]
