ExtJS 4.2.1, исчезновение дерева ...

Question

Я работаю с ExtJS 4.2.1

У меня есть кнопка для создания панели.

Эта панель содержит мою панель дерева, пять флажков ниже и, наконец, одну действительную кнопку (чтобы закрыть панель дерева и подтвердить тот факт, что мы проверили некоторые узлы) и одну кнопку отмены (только для того, чтобы нарисовать древовидную панель).

Я могу сделать свою панель открытой, и она отлично работает. Но если я нажму на мою отмену или мою действительную кнопку, панель скроется (ok), и в следующий раз, когда я попытаюсь показать ее, она больше не содержит мою деревенскую панель, только пять флажков и две кнопки (внимание, два панели разные, панель содержит мою панель).

Я не понимаю, потому что нет причин для его исчезновения. Когда я проверяю дерево с помощью console.log(), я вижу, проходя мимо treepanel.store.tree.root, что моя древесная пачка все еще существует и правильно заполнена. Когда я проходил через treepanel.view.all, я вижу, что на моем представлении присутствуют правильные элементы. Но когда я проверяю treepanel.body.dom с хром-отладкой, я не вижу, где находится элемент (обычный, когда вы проходите через dom с мышью при отладке хром, вы можете увидеть соответствующую часть страницы по цвету).

Вот заинтересованная часть моего кода:

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

         } 
        }] 
       }); 

Я не знаю, если это на самом деле довольно четко ... Во всяком случае, любая идея может быть приветствуется! Как эта деревня исчезнет с моей панели и все еще существует!

Спасибо

Answer 1

Вы звоните Ext.create в кнопках мыши Функции событий каждый раз. Это означает, что в первый раз, когда вы его создаете, все в порядке. Но когда вы снова нажмете кнопку, она создаст другую панель с той же конфигурацией, только у вас не может быть treeSelector в обоих случаях, поскольку она уже находится где-то в другом месте. Измените код на что-то вроде:

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