1. #1
    Sencha User
    Join Date
    Jul 2010
    Posts
    33
    Vote Rating
    0
    charles.bourasseau is on a distinguished road

      0  

    Default Tree store insert, update id

    Tree store insert, update id


    I insert new node to the TreeStore like this:

    Code:
    var form = this.getComponent('Form').getForm();
    var store = Ext.getStore('Store');
    var parentNode = this.parentNode;
    var child = this.node ? this.node : MyApp.model.Node.create();
    
    
    form.updateRecord(child);
    parentNode.appendChild(child);
    The child is correctly added to the store and sent to the server (autoSync true).
    The response of the server looks like this:
    Code:
    {
    "id":"4f86955df24634440f000014",
    "type":"file",
    "icon":"/images/icons/page.png",
    "expanded":true
    }
    When I take a look to the nodes after the request with Ext.getStore('FileBrowserStore').tree.root.firstChild... the id is MyApp.model.Node-ext-record-5 but it should be 4f86955df24634440f000014.

    The proxy of the store is configure like that:

    Code:
    proxy: {
                    type: 'rest',
                    url: '/node',
                    reader: {
                        type: 'json',
                        idProperty: 'id'
                    },
                    writer: {
                        type: 'json',
                        nameProperty: 'text'
                    }
                },
    Am I doing something wrong ?

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,154
    Vote Rating
    475
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Are you using a model for your proxy? If not, does adding idProperty to your writer help? Are the records still dirty?

    Regards,
    Scott.

  3. #3
    Sencha User
    Join Date
    Jul 2010
    Posts
    33
    Vote Rating
    0
    charles.bourasseau is on a distinguished road

      0  

    Default


    Thanks for your answer

    Yes i'm using a model for the proxy.

    I even tried to set idProperty to the writer and it does not worked.

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,154
    Vote Rating
    475
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Can you create a small working example so we can take a look? The returned record id should be updated.

    Scott.

  5. #5
    Sencha User
    Join Date
    Jul 2010
    Posts
    33
    Vote Rating
    0
    charles.bourasseau is on a distinguished road

      0  

    Default


    Hi,

    Here is the model:

    Code:
    Ext.define('MyApp.model.Node', {
        extend: 'Ext.data.Model',
    
    
        fields: [
            {
                name: 'id',
                type: 'string'
            },
            {
                name: 'type',
                type: 'string'
            },
            {
                name: 'status',
                type: 'string'
            },
            {
                name: 'text',
                type: 'string'
            }
        ],
    
    
        isDirectory: function() {
            return this.get('type') == 'directory';
        },
    
    
        isFile: function() {
            return this.get('type') == 'file';
        },
    
    
        read: function(callback) {
            Ext.Ajax.request({
                url: '/filebrowser/readFile',
                method: 'GET',
                params: {
                    path: this.getServerPath(),
                    encoding: 'utf-8'
                },
                success: function(response){
                    var jsonResp = Ext.JSON.decode(response.responseText);
                    callback(jsonResp.data, jsonResp);
                }
            });
        },
    
    
        getServerId: function() {
            return this.get('id').match('(.*?)\/')[1];
        },
    
    
        getServerPath: function() {
            return this.get('id').match('.*?\/(.*)')[1];
        },
    
    
        getName: function() {
            return this.get('text');
        }
    
    
    });
    The Store:

    Code:
    Ext.define('MyApp.store.FileBrowserStore', {
        extend: 'Ext.data.TreeStore',
        requires: [
            'MyApp.model.Node'
        ],
    
    
        constructor: function(cfg) {
            var me = this;
            cfg = cfg || {};
            me.callParent([Ext.apply({
                autoLoad: true,
                autoSync: true,
                storeId: 'MyJsonTreeStore1',
                model: 'MyApp.model.Node',
                proxy: {
                    type: 'rest',
                    url: '/filebrowser',
                    reader: {
                        type: 'json',
                        idProperty: 'id'
                    },
                    writer: {
                        type: 'json',
                        nameProperty: 'text'
                    }
                },
                sorters: {
                    property: 'text'
                },
                listeners: {
                    write: {
                        fn: me.onTreestoreWrite,
                        scope: me
                    }
                }
            }, cfg)]);
        },
    
    
        onTreestoreWrite: function(store, operation, options) {
            store.sort('text', 'ASC');
            Ext.Array.each(operation.records, function(record, index, array){
                console.log(record);
            });
        }
    
    
    });
    And the TreePanel:

    Code:
    Ext.define('MyApp.view.MyTreePanel', {
        extend: 'Ext.tree.Panel',
        alias: 'widget.mytreepanel',
    
    
        id: 'FileBrowserTree',
        width: 188,
        stateId: 'id',
        title: 'File Browser',
        forceFit: false,
        hideHeaders: true,
        store: 'FileBrowserStore',
        rootVisible: false,
        useArrows: false,
    
    
        initComponent: function() {
            var me = this;
    
    
            Ext.applyIf(me, {
                root: {
                    text: 'Tree',
                    id: 'root',
                    expanded: true
                },
                viewConfig: {
                    listeners: {
                        itemcontextmenu: {
                            fn: me.onTreeviewItemContextMenu,
                            scope: me
                        }
                    }
                }
            });
    
    
            me.callParent(arguments);
        },
    
    
        onTreeviewItemContextMenu: function(dataview, record, item, index, e, options) {
            e.stopEvent();
            var contextMenu = Ext.create('widget.FileBrowserContextMenu', {
                record: record
            });
            contextMenu.showAt(e.xy);
        }
    
    
    });
    And here is an example of response from the server:

    Code:
    {
      "id":"4f86955df24634440f000014/home/ec2-user/newfile2",
      "type":"file",
      "icon":"/images/icons/page.png",
      "expanded":true
    }

Thread Participants: 1

Tags for this Thread