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

[mkawczynski07@gmail.com]

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:

[COLOR=red !important]Uncaught TypeError: Cannot call method 'indexOf' of null ext-all-debug_4_2_beta.js:120467[/COLOR]
[COLOR=red !important]Ext.define.onBeforeFill[/COLOR]ext-all-debug_4_2_beta.js:120467
[COLOR=red !important]Ext.define.fire[/COLOR]ext-all-debug_4_2_beta.js:9537
[COLOR=red !important]continueFireEvent[/COLOR]ext-all-debug_4_2_beta.js:20722
[COLOR=red !important]fireEvent[/COLOR]ext-all-debug_4_2_beta.js:20700
[COLOR=red !important]Ext.define.fillNode[/COLOR]ext-all-debug_4_2_beta.js:69360
[COLOR=red !important]Ext.define.onProxyLoad[/COLOR]ext-all-debug_4_2_beta.js:69403
[COLOR=red !important]Ext.define.processResponse[/COLOR]ext-all-debug_4_2_beta.js:63769
[COLOR=red !important](anonymous function)[/COLOR]ext-all-debug_4_2_beta.js:63973
[COLOR=red !important]Ext.apply.callback[/COLOR]ext-all-debug_4_2_beta.js:7097
[COLOR=red !important]Ext.define.onComplete[/COLOR]ext-all-debug_4_2_beta.js:31537
[COLOR=red !important]Ext.define.onStateChange[/COLOR]ext-all-debug_4_2_beta.js:31487
[COLOR=red !important](anonymous function)[/COLOR]ext-all-debug_4_2_beta.js:2047

TreeStore panel:

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:

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 :

Ext.define('app.model.OrganizationStructureTree', {
    extend: 'Ext.data.Model',


    fields: [
    {
        name: 'text',
        type: 'string'
    },
    {
        name: 'id',
        type : 'string'
    }
    ]
});

Thanks for any help.

[agallaher]

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:

onBeforeFill: function (treeStore, fillRoot) {
        if (!this.store) return;

onFillComplete: function (treeStore, fillRoot, newNodes) {
        if (!this.store) return;

Edit: I ended up adding the following to my patches.js

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

[evant]

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

Should be fixed for 4.2 (post B2).