0

我正在使用 ExtJS 4.2.1

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

这个面板包含我的树形面板、下面的五个复选框，最后是一个有效按钮（用于关闭树形面板并验证我们检查了一些节点的事实）和一个取消按钮（仅用于关闭树形面板）。

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

我不明白，因为它没有理由消失。当我用一些console.log()我可以看到的东西检查树形面板时，经过treepanel.store.tree.root我的树形面板仍然存在并且被正确填充。当我通过时，treepanel.view.all我可以看到正确的元素出现在我的视图中。但是当我检查treepanel.body.domchrome 调试时，我看不到元素在哪里（通常当你在 chrome 调试中用鼠标越过 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();

                        }
                    }]
               });

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

谢谢

4

1 回答 1

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);
                                }
                            }
于 2013-07-25T14:26:48.510 回答