Question

我正在使用ExtJS 4.2.1

我有一个按钮可以显示一个面板。

这个面板包含我的treepanel，下面有五个复选框，最后是一个有效按钮（关闭treepanel并确认我们检查了一些节点的事实）和一个取消按钮（只是为了cose the treepanel）。

我可以让我的面板出现，它工作正常。但是，如果我点击我的取消或我的有效按钮，面板将隐藏（确定），下次我尝试显示它不再包含我的treepanel，只有五个复选框和两个按钮（注意，两个面板是不同的，面板包含我的treepanel）。

我不明白，因为它没有理由消失。当我查看带有console.log() treepanel.store.tree.root的树梢时，我可以看到，treepanel.view.all经过我的树梢仍然存在且已正确填充。当我通过treepanel.body.dom时，我可以看到我视图中存在正确的元素。但是当我用chrome调试检查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(); } }] });时，我无法看到元素的位置（普通的当你通过chrome调试时使用鼠标调用dom时，你可以看到页面的相应部分有颜色）。

以下是我的代码的相关部分：

{{1}}

我不知道它是否真的很明确...... 无论如何，任何想法都可以欢迎！这个treepanel怎么能从我的面板中消失并且仍然存在！

谢谢

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

ExtJS 4.2.1，treepanel消失

1 个答案: