Question

ExtJS 6.0.2：

我需要向我的服务器发送我的树面板索引顺序的任何更改。

阅读完本文后：Ext 4.2 Using proxy to save tree以及此ExtJs Store.save()?和How to save JSON file when use it as ExtJs grid store以及一些令人困惑的Sencha文档......

1）我需要在Store的代理中配置一个编写器。结果：没什么。

2）我需要在我的商店中设置autoSync:true。结果：没什么。

3）我需要设置fields属性。结果：没什么。

4）我需要将index属性放入fields属性。结果：我的服务器检测到一个呼叫，但请求参数列表中没有任何内容。

5）需要将rootProperty:'data'属性放在writer中。结果：哇！我的服务器检测到一个JSON字符串，其中包含我交换的2个节点。

data = [{"index":5,"id":"6"},{"index":4,"id":"12"}]

一切都很好，但我注意到了一个附带效应：两个交换节点被两个父节点取代，非常奇怪的事情开始发生......

我做错了什么？

在：

尝试交换Parking和Continentes后：

我的商店：

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!");
        }
    }

});

我的树：

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();
        }    

    }
});

JSON树响应：

[{"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"}]

Answer 1

经过一些研究：http://alvinalexander.com/source-code/software-dev/sencha-store-ajax-json-proxy-readerwriter-example和how to get Extjs 4 store's request data on beforeload event?我改变了我的商店：

添加了全局变种：ope

已添加到代理：extraParams : { 'operation': ope }

添加了一个监听器：

listeners : {
    write: function(store, operation, opts){
        ope = operation.action;
        alert(ope);
    }
}

我可以看到操作是update但似乎ope var在发送之前没有采取操作值，因为它在服务器端是空的（空）。

找到方法：删除url并将api添加到代理：

    api: {
        read: 'getLayersTreeNode',
        create: 'createLayersTreeNode',
        update: 'updateLayersTreeNode',
        destroy: 'destroyLayersTreeNode'
    }

对于每个操作，我在服务器端处理不同的操作。将发回一个空的JSON以避免弄乱树。

更改节点顺序后保存树面板

1 个答案: