ExtJS 4.2.1, treepanel disappearing

Question

I am working with ExtJS 4.2.1

I have a button to make appear a panel.

This panel is containing my treepanel, five checkboxes below, and finally one valid button (to close the treepanel and valid the fact that we checked some nodes) and one cancel button (just to cose the treepanel).

I can make my panel appear and it works fine. But if I click on my cancel or my valid button, the panel will hide (ok), and next time I try to show it it doesn't contain my treepanel anymore, only the five checkboxes and the two buttons (attention, the two panels are different, the panel is containing my treepanel).

I don't understand because there is no reason for it to disappear. When I check the treepanel with some console.log() I can see, passing by treepanel.store.tree.root that my treepanel still exists and is properly filled. When I pass through treepanel.view.all I can see the right elements are present in my view. But when I check treepanel.body.dom with chrome debugging I can't see where the element is (ordinary when you pass over the dom with the mouse on chrome debugging you can see the corresponding part of the page colored).

Here is the concerned part of my code:

var button = Ext.get('ProductSelectionButton');
var treeSelector = createTree('stAddAction.do?action=product_tree_selector', 550, 490, '', 'lbl_st_tree_selection_empty', true, 'productlist');

 button.on('click', function(){
    treeSelector.store.proxy.url = 'stAddAction.do?action=product_tree_selector';
    treeSelector.store.reload();
    var productPanel = Ext.create('Ext.FormPanel',{
                fieldDefaults:{
                    labelWidth: 75 // label settings here cascade unless overridden
                },
                frame:true,
                title: document.getElementById('applicability').innerHTML + ' - ' + document.getElementById('lbl_st_product_tree_win').innerHTML,
                style:'padding: 5px 5px 0; margin-top: 0;',
                width: 550,

                items: [treeSelector, 
                {
                    xtype: 'checkboxgroup',
                    items: [
                        {boxLabel: document.getElementById('lbl_status_deleted').innerHTML, name: 'status_2', checked: false, ctCls:'check-status-2',
                            listeners: {
                            change: function(newValue, oldValue, eOpts ){
                                if(newValue.checked){
                                    // To show items with status 2 which is Deleted status
                                    Ext.Array.remove(statusToHide, "2");
                                    ProductList.showIdsStatus(2);
                                }
                                else{
                                    // To hide items with status 2 which is Deleted status
                                    Ext.Array.push(statusToHide, "2");
                                    ProductList.hideIdsStatus(2);
                                }
                            }
                        },
                        ... four others checkboxes
                }],
                 buttons: [{
                    icon : 'img/st_little_valid.png',
                    style:'width:20px!important;',
                    handler: function(){

                            var data = '',
                            selNodes = treeSelector.getCheckedNodes(treeSelector.getRootNode());
                            precedentlyCheckedNodes = selNodes;
                            xhr = getXhr();
                            xhr.onreadystatechange = function(){
                                if (xhr.readyState == 4 && xhr.status == 200) {
                                    var myLoad = eval(myDataGrid);
                                    productgrid.store.loadData(myLoad);
                                    productgrid.getView().refresh();
                                    win.hide();
                                    enableSave();
                                }
                            }
                            var params = "action=set_iceproduct&datatoadd=" + data + "&datatoremove=" + strUnchecked;
                            xhr.open("POST", "stAddAction.do", true);
                            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                            xhr.setRequestHeader('Content-length', params.length);

                            xhr.send(params);
                        }
                    },

                    {
                        icon : 'img/st_little_cancel.png',
                        handler: function(){
                    /* restore all nodes how they were before (checked or unchecked) */
                            treeSelector.verifyCheckedNodes(precedentlyCheckedNodes);
                            win.hide();

                    /* Only expand the first level */
                            treeSelector.collapseAll();
                            treeSelector.getRootNode().expand();

                        }
                    }]
               });

I don't know if it really is quite explicit... Anyway, any idea could be welcomed! How can this treepanel disappear from my panel and still exist!

Thank you

Answer 1

You are calling Ext.create in the buttons click event function every time. This means that the first time you create it, it's okay. But when you click the button again, it will create another panel with the same configuration, only you can't have treeSelector in both because it is already somewhere else. Change your code to something like:

var button = Ext.get('ProductSelectionButton');
var treeSelector = createTree('stAddAction.do?action=product_tree_selector', 550, 490, '', 'lbl_st_tree_selection_empty', true, 'productlist');

 button.on('click', function(button){
    treeSelector.store.proxy.url = 'stAddAction.do?action=product_tree_selector';
    treeSelector.store.reload();
    if(!button.productPanel)
    {
        button.productPanel = Ext.create('Ext.FormPanel',{
            fieldDefaults:{
                labelWidth: 75 // label settings here cascade unless overridden
            },
            frame:true,
            title: document.getElementById('applicability').innerHTML + ' - ' + document.getElementById('lbl_st_product_tree_win').innerHTML,
            style:'padding: 5px 5px 0; margin-top: 0;',
            width: 550,

            items: [
                treeSelector, 
                {
                    xtype: 'checkboxgroup',
                    items: [
                        {boxLabel: document.getElementById('lbl_status_deleted').innerHTML, name: 'status_2', checked: false, ctCls:'check-status-2',
                            listeners: {
                            change: function(newValue, oldValue, eOpts ){
                                if(newValue.checked){
                                    // To show items with status 2 which is Deleted status
                                    Ext.Array.remove(statusToHide, "2");
                                    ProductList.showIdsStatus(2);
                                }
                                else{
                                    // To hide items with status 2 which is Deleted status
                                    Ext.Array.push(statusToHide, "2");
                                    ProductList.hideIdsStatus(2);
                                }
                            }