1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    1
    Vote Rating
    0
    mkawczynski07@gmail.com is on a distinguished road

      0  

    Default After upgrade to 4.2 beta window with tree store didnt open again

    After upgrade to 4.2 beta window with tree store didnt open again


    After upgrade to 4.2 beta window with tree store didn't open again
    I've made upgrade my app to extjs 4.2. After that window with treestore open correctly, close and if i try to reopen it i have error:

    Code:
    TreeStore panel:
    Code:
    Ext.define('app.view.organizationstructure.Tree', {
        extend: 'Ext.tree.Panel',
        alias: 'widget.organizationstructuretree',
        
        id: 'organization-structure-tree',
        
        border : 0,
        
        initComponent: function() {
            var me = this;
            Ext.applyIf(me, {
                store :  'OrganizationStructureTree',
                title: app.Txt.get('organizationStructure.treeTitle'),
                displayField: 'text',
                removeMenu : app.Util.getRemoveContextMenu(me.onContextMenuRemoveClick, me),
                viewConfig: {
                    loadingText:  vSpeed.Txt.get('global.loading'),
                    rootVisible: false,
                    plugins: [
                    app.Util.getDragAndDropTreeViewPlugin()
                    ],
                    listeners: {
                        beforedrop: {
                            fn: me.onTreeViewDragAndDropPluginBeforeDrop,
                            scope: me
                        },
                        drop:{
                            fn: me.onTreeViewDragAndDropPluginDrop,
                            scope: me
                        }
                    }
                },
                listeners: {
                    beforeitemcontextmenu: {
                        fn: me.onTreepanelBeforeItemContextMenu,
                        scope: me
                    }
                }
            });
    
    
            me.callParent(arguments);
        },
        
        onTreeViewDragAndDropPluginBeforeDrop: function(node, data, overModel, dropPosition, dropFunction, options){
            data.records[0] = Ext.App.getController('organizationstructure.Tree')
            .createNodeFromOrganizationElement(data.records[0]);
        },
        
        onTreeViewDragAndDropPluginDrop: function(){
            this.fireEvent('afterElementDropOnTree');
        },
        
        onTreepanelBeforeItemContextMenu: function(tablepanel, record, item, index, e, options) {
            e.stopEvent();
            if(record.data.parentId!='root'){
                this.removeMenu.recordToRemove = record;
                this.removeMenu.showAt(e.getXY());
            }
        },
        
        onContextMenuRemoveClick: function(){
            var me = this;
            app.Msg.confirmMessage({
                msg: vSpeed.Txt.get('organizationStructure.removeElementFromTreeConfirmMsg'),
                title: vSpeed.Txt.get('organizatonsStructure.removeElementFromTreeTitle'),
                confirm: function() {
                    me.fireEvent('removeElementFromTree', me.removeMenu.recordToRemove);
                },
                scope : me
            });
        }
    });
    Store:
    Code:
    Ext.define('app.store.OrganizationStructureTree', {
        extend: 'Ext.data.TreeStore', 
    
    
        requires: [
        'app.model.OrganizationStructureTree'
        ],
    
    
        constructor: function(cfg) {
            var me = this;
            cfg = cfg || {};
            me.callParent([Ext.apply({
                clearOnLoad : true,
                root : {
                    expanded: false
                },
                autoLoad : false,
                model: 'app.model.OrganizationStructureTree',
                proxy: {
                    type: 'ajax',
                    api: {
                        create  : app.Config.getConfigOption('organizationStructureCreateUrl'),
                        read: app.Config.getConfigOption('organizationStructureReadUrl'),
                        update: app.Config.getConfigOption('organizationStructureUpdateUrl'),
                        destroy : app.Config.getConfigOption('organizationStructureDeleteUrl')
                    },
                    reader: {
                        type: 'json',
                        successProperty: 'success'
                    }
                }
            }, cfg)]);
        }
    });
    Model :
    Code:
    Ext.define('app.model.OrganizationStructureTree', {
        extend: 'Ext.data.Model',
    
    
        fields: [
        {
            name: 'text',
            type: 'string'
        },
        {
            name: 'id',
            type : 'string'
        }
        ]
    });
    Thanks for any help.

  2. #2
    Sencha Premium Member
    Join Date
    Jun 2012
    Posts
    3
    Vote Rating
    0
    agallaher is on a distinguished road

      0  

    Default


    I'm seeing the same issue in 4.1.3.

    From what I can tell, this issue is that the TreeView inside of the TreePanel is listening to the beforefill and fillcomplete events from the TreeStore. When the TreePanel is destroyed (on close of the window the first time) the original TreeView is sticks around and is still listening to the TreeStore. When a new TreePanel and TreeView are created (on second open of the window), the second TreeView also subscribes to the TreeStore's beforefill and fillcomplete events. However since the first TreeView is still listening, it catches the event first and throws an error because the original TreePanel has been destroyed (along with its store).

    It may not be ideal, but overriding the onBeforeFill and onFillComplete methods of Ext.tree.View to check if the store exists seems resolve the issue:

    Code:
    onBeforeFill: function (treeStore, fillRoot) {
            if (!this.store) return;
    Code:
    onFillComplete: function (treeStore, fillRoot, newNodes) {
            if (!this.store) return;
    Edit: I ended up adding the following to my patches.js
    Code:
    Ext.require('Ext.tree.View', function () {
        Ext.override(Ext.tree.View, {
            onUnbindStore: function (store) {
                var me = this,
                    treeStore = me.panel.getStore();
                treeStore.un({
                    scope: me,
                    beforefill: me.onBeforeFill,
                    fillcomplete: me.onFillComplete,
                    beforebulkremove: me.beginBulkUpdate,
                    bulkremovecomplete: me.endBulkUpdate
                });
                me.setMaskBind(null);
            }
        });
    });

  3. #3
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,146
    Vote Rating
    673
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Looks like a dupe of this: http://www.sencha.com/forum/showthread.php?247255

    Should be fixed for 4.2 (post B2).
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

Thread Participants: 2