Page 1 of 4 123 ... LastLast
Results 1 to 10 of 32

Thread: [4.0.7] TreePanel; Error when reloading the treeStore

    You found a bug! We've classified it as a bug in our system. We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Mar 2011
    Posts
    2

    Default [4.0.7] TreePanel; Error when reloading the treeStore

    REQUIRED INFORMATION




    Ext version tested:
    • Ext 4.0.7-gpl

    Browser versions tested against:
    • Google Chorme 14.0.835.186
    • IE8
    • FF 3.6.23 (firebug 1.7.3 installed)

    Description:
    • After altering a node in tree panel (creating, deleting, or editing a node) tree back to load the store to see the changes in the tree, I when load store tree give me an error.
      I tried version 4.0.2a and the problem does not appear. But version 4.0.7 the problem was found.

    Steps to reproduce the problem:
    • Load the tree with data from the store (the default)
    • Add, edit or delete a tree node (or simply recharge treestore)
    • Manually loading tree data: Ex: treeStore.load ();

    The result that was expected:
    • View changes made to the database to create, edit or delete a node. (reload data intreePanel)
    The result that occurs instead:
    • In Firebug: url is undefined
      Break On This Error: return url + (url.indexOf('?') === -1 ? '?' : '&') + s;
    • In chrome: Uncaught TypeError: Cannot call method 'indexOf' of undefined
    • File: ext-all-debug.js:5301
    Test Case:

    Code:
    //Namespaces
    Ext.namespace('ModulesConfigBundle.data');
    //TreeStore
    
    
    ModulesConfigBundle.data.AttributeTreeStore = function() {
        var store = Ext.create('Ext.data.TreeStore', {
            model: 'Attribute',
            proxy: {
                type: 'ajax',
                api: {
                    read: 'some_url.php'
                },
                reader: {
                    type: 'json',
                    successProperty: 'success',
                    messageProperty: 'msg'
                }
            },
            folderSort: true
        });
        
        return store;
    };
    
    
    
    
    storeTree = ModulesConfigBundle.data.AttributeTreeStore();
    var panel = Ext.create('Ext.panel.Panel', {
        height: 400,
        border: false,
        renderTo: 'panelAttribute',    
        layout:'border',
        defaults: {
            collapsible: false,
            split: true
        },
        items: [
            showTreeAttribute(),
            showGridValueAttribute()
        ]
    });
    
    
    function showTreeAttribute()
    {
        //TreePanel
        var tree = Ext.create('Ext.tree.Panel', {
            region:'west',
            title: 'Atributos',
            width: 200,
            height: 380,
            useArrows: false,
            store: storeTree,
            multiSelect: false,
            singleExpand: false,
            root: { expanded: true, text: ".", data:[] }, // <- Inline root
            //toolbar
            tbar: [{
                xtype: 'button', 
                iconCls:'icon-application-add',
                tooltip: {title:'New Attribute', width: 150},
                width:28,
                handler: function() {
                    showFormAttribute();
                }
            },{
                xtype: 'button', 
                iconCls:'icon-application-edit',
                tooltip: {title:'Editar attribute', width: 180},
                width:28,
                style: {margin: '0'},
                handler: function() {
                    var selection = this.up().up().getSelectionModel().getSelection()[0];
                    if (selection)
                    {
                        showFormAttribute(selection);
                    }
                    else
                    {
                        Ext.MessageBox.alert('Notificación', 'Debe seleccionar un atributo!');
                    }
                }
            },{
                xtype: 'button', 
                width:28,
                iconCls:'icon-application-delete',
                tooltip: {title:'Eliminar el atributo seleccionado', width: 185},
                handler: function() {
                    //obtenemos el nodo seleccionado
                    var selection = this.up().up().getSelectionModel().getSelection()[0];
                    //Solo si hay un nodo seleccionado y es distinto de root
                    if (selection && selection.data.attId)
                    {
                        Ext.MessageBox.confirm('Confirmación', '¿Seguro de eliminar el atributo y toda la rama de dependencias?', function(btn, text){
                            if (btn == 'yes')
                            {
                                selection.remove();
                                var attId = selection.data.attId;
                                //eliminar por ajax el nodo
                                Ext.Ajax.request({
                                    url: '{{ path('config_attribute_delete') }}',
                                    params: {
                                        attId: attId
                                    },
                                    success: function(response){
                                        var text = Ext.decode(response.responseText);
                                        Ext.MessageBox.alert('Confirmación', text.msg);
                                    }
                                });
                            }
                        });
                    }
                    else
                    {
                        Ext.MessageBox.alert('Notificación', 'Esta intentando eliminar el nodo raíz o no ha seleccionado un atributo!');
                    }
                }
            }],
            //columnas
            columns: [{
                xtype: 'treecolumn',
                text: 'Descripción',
                flex: 2,
                sortable: true,
                dataIndex: 'attDescription'
            }],
            //eventos
            listeners: 
            {
                itemclick: function(view, record, item, index, e)
                {
                    //set selected node_id
                    selectedNodeId = record.data.attId;
                }
            }
        });
        
        return tree;
    }
    
    
    //Show attribute form
    function showFormAttribute(data)
    {
       var win;
       if (!win) 
       {
           //creamos el formulario
            var form = Ext.widget('form', {
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                border: false,
                bodyPadding: 10,
    
    
                fieldDefaults: {
                    labelWidth: 100,
                    labelStyle: 'font-weight:bold'
                },
                defaults: {
                    margins: '0 0 10 0'
                },
                //campos del formulario
                //hidden con el attId del atributo que se quiere actualizar/editar
                items: [{            
                    xtype: 'hidden',
                    name: 'attId'
                },{
                    xtype: 'textfield',
                    name: 'attDescription',
                    fieldLabel: 'Descripción',
                    allowBlank: false
                }],
                //botones del formulario (cancelar, guardar)
                buttons: [{
                    text: 'Cancelar',
                    handler: function() {
                        this.up('form').getForm().reset();
                        this.up('window').hide();
                    }
                }, {
                    text: 'Guardar',
                    handler: function() {
                        //validación del formulario
                        if (this.up('form').getForm().isValid()) 
                        {
                            //submit del formulario
                            this.up('form').getForm().submit({
                                url: '{{ path('config_attribute_save') }}',
                                params: { 'parentId' : selectedNodeId },
                                submitEmptyText: false,
                                waitMsg: 'Guardando...',
                                success: function(form, action){
                                    
                                    Ext.MessageBox.alert('Confirmación', action.result.msg);
                                    //success true; "reload treePanel"
                                    var parentNode;
                                    var record = form.getRecord();
                                    if (record)
                                    {
                                        node = storeTree.getNodeById(record.data.attId).parentNode;
                                    }
                                    else
                                    {
                                        node = storeTree.getNodeById(selectedNodeId);
                                    }
                                    
                                    if (node && node.data.expanded == false)
                                    {
                                        node.expand();
                                    }
                                    else
                                    {
                        /****************** Here the problem is triggered ****************/
                                        storeTree.load();
                            /*****************************************************************/
                                    }
                                }
                            });
                            this.up('window').hide();
                        }
                    }
                }]
            });
            
            //Creamos la ventana para el mostrar el formulario
            win = Ext.widget('window', {
                title: 'Atributos',
                closeAction: 'hide',
                width: 300,
                height: 120,
                minHeight: 120,
                layout: 'fit',
                resizable: false,
                modal: true,
                items: form
            });
        }
        //si data no está vacia, quiere decir que es un update y poblamos el formulario con los datos del record del store
        if (data)
        {
            form.loadRecord(data);
        }
        //mostramos la ventana
        win.show();
    }
    Operating System:
    • Fedora 14 (laughlin)
    • Windows Seven Ultimate 64bit

  2. #2
    Ext JS Premium Member
    Join Date
    Sep 2011
    Posts
    62

    Default

    We are seeing this as well. We have a ticket open but didn't have a light-weight way to reproduce it. Thanks for this and hopefully it will get fixed soon.

  3. #3
    Sencha User
    Join Date
    Mar 2011
    Posts
    2

    Default

    Thank's !!

  4. #4
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    @ExtJSNinjas... can you give me the URL of your bug so I can merge these?
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  5. #5
    Ext JS Premium Member
    Join Date
    Sep 2011
    Posts
    62

    Default

    We actually put in a support ticket for this since it is a pretty big deal for us. It is #6115.

  6. #6

    Default

    Is there any further discussion going on? How can I follow the the support ticket that ExtJSNinjas has mentioned?

  7. #7

    Default doRequest "destroy" operation

    We're seeing the same problem here. This is a bit of a show-stopper for us, so will be staying with 4.0.6 for now. Would love to see this fixed!

    From my limited debugging, seems to be something to do with a "destroy" operation being sent in to the doRequest method of Ext.data.proxy.Ajax. In 4.0.6, the only time doRequest is called on a TreeStore reload is for a "read" operation on the root node.

    In 4.0.7-gpl, the first time doRequest is called seems to be for a "destroy" operation on the first child node under the tree's root... this then fails with Uncaught TypeError: Cannot call method 'indexOf' of undefined, and that's as far as I got. Though if it hadn't failed, I guess it would have continued on executing "destroy" operations on each and every record/node in the tree before actually re-reading the data from the server.

    Should a per-node "destroy" operation even be executed during a reload? My store doesn't implement access to a server-side destroy method, but if it did, I'd actually be pretty glad it had failed here! I definitely don't want to delete every node's entry from the database just because I'm refreshing my tree!

    -- neverness

  8. #8
    Ext JS Premium Member
    Join Date
    Sep 2011
    Posts
    62

    Default

    Here's the response we got from Sencha support. It looks good to me so far.


    Code:
    Ext.override(Ext.data.TreeStore, {
        load: function(options) {
            options = options || {};
            options.params = options.params || {};
     
            var me = this,
                node = options.node || me.tree.getRootNode(),
                root;
     
            // If there is not a node it means the user hasnt defined a rootnode yet. In this case lets just
            // create one for them.
            if (!node) {
                node = me.setRootNode({
                    expanded: true
                });
            }
     
            if (me.clearOnLoad) {
                // this is what we changed.  added false
                node.removeAll(false);
            }
     
            Ext.applyIf(options, {
                node: node
            });
            options.params[me.nodeParam] = node ? node.getId() : 'root';
     
            if (node) {
                node.set('loading', true);
            }
     
            return me.callParent([options]);
        }
    });
    Then set "clearOnLoad: false" on the tree store.

  9. #9
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,199

    Default

    I have the same problem.I want the clearOnLoad on true. The store should remove the data with that option before load.

    Clearing the tree before reloading solves the problem for me.

    Code:
    clearTree: function(treePanel) {
            var delNode;
         
    
            while (delNode = treePanel.getRootNode().childNodes[0]) {
                treePanel.getRootNode().removeChild(delNode);
            }
        },
    The proxy tries to make a destroy request before loading store.

  10. #10

    Default

    Thanks for sharing, ExtJSNinjas

Page 1 of 4 123 ... LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •