ExtJS 3.2 只能添加一次面板

Question

我对 ExtJS 非常陌生。我正在尝试在脚本期间添加删除面板，但我只能添加一次面板。当我尝试再次添加它时，它会收到错误

TypeError: b.getPositionEl(...).dom is undefined
Ext.layout.ContainerLayout<.isValidParent()
 ext-all.js:7
Ext.layout.ContainerLayout<.renderAll()
 ext-all.js:7
Ext.layout.ContainerLayout<.onLayout()
 ext-all.js:7
Ext.layout.AutoLayout<.onLayout()
 ext-all.js:7
Ext.layout.ContainerLayout<.layout()
 ext-all.js:7
Ext.Container<.doLayout()
 ext-all.js:7
Ext.Container<.doLayout()
 ext-all.js:7
restart()
 RunScript:138
h.Event.prototype.fire()
 ext-all.js:7
h.Observable.prototype.fireEvent()
 ext-all.js:7
.onClick()
 keyscript-all.js:4
I()

我基本上只是删除并添加面板，以防按下取消按钮。当我按下继续按钮时，一切都显示正常，新面板显示并呈现收集的数据，并且不显示任何错误。但是一旦我按下取消按钮，我想要删除的面板就消失了，但是一旦它尝试添加 optionPanel，上面提到的错误就会显示出来。但是，我可以添加一个完全不同的面板，它不会显示错误。

var workPanel = new CR.FormPanel({
    id: 'workPanel',
    title: 'Bad Address Workflow',
    region: 'center',
    frame: true,
    labelWidth: 300,
    autoScroll: true,
    bodyStyle: {
      padding: '5px',
      font: '12px arial,tahoma,helvetica,sans-serif'
    },
    buttons:[
        {
            text: 'Post',
            listeners: {
                click: doPost
            }
        },
        {
            text: 'Cancel',
            listeners: {
                click: restart
            }
        }
    ],
    buttonAlign: 'left'
});

var optionPanel = new CR.FormPanel({
    id: 'optionPanel',
    title: 'Bad Address Workflow',
    region: 'center',
    frame: true,
    labelWidth: 175,
    bodyStyle:'padding:5px 5px 0',
    defaults: {
      width: 230
    },
    items: [
      {
        xtype: 'crOptionField',
        crColumnDescription: 'Choose Bad Address Workflow',
        crColumnName: 'workflowOptions',
        crOptions: [
          ["",""],
          ["0","Set Bad Address"],
          ["1","Remove Bad Address"]
        ]
      }
    ],
    buttons: [
      {
        text: 'Continue',
        listeners: {
            click: function(button,event){
                var fields = optionPanel.find('crColumnName','workflowOptions');

                if(parseInt(fields[0].crGetNewContents()) === 0){
                    workflow = 0;
                    getMemberData();
                }else if(parseInt(fields[0].crGetNewContents()) === 1){
                    workflow = 1;
                    getMemberData();
                }else{
                    CR.Core.displayExceptions({ items: ['You have not selected an option.'] });
                }
            }
        }
      }
    ],
    buttonAlign: 'left'
});

var container = new Ext.Container({
    id: 'container',
    frame: true,
    region: 'center',
    bodyStyle:'padding:5px 5px 0',
    defaults: {
        xtype: 'container'
    }
});

Ext.onReady(function(){
    
   container.add(optionPanel);         
   CR.Core.viewPort = new Ext.Viewport({
    layout: 'border',
    region: 'center',
    items: [container]
   });   

});

function restart(){    
    container.remove(workPanel);
    container.add(optionPanel);
    CR.Core.viewPort.doLayout();
}

function getMemberData(){
    
    container.remove(optionPanel);
    container.add(workPanel);
    CR.Core.viewPort.doLayout();
    
    //My data collection process
}

非常感谢任何帮助。

Answer 1

是的，您可以在 container 中添加多次。你得到错误

TypeError: b.getPositionEl(...).dom is undefined

此错误的原因是当您使用 remove 方法从视图中删除 component 时。它将从dom 中永久删除component。当您再次尝试添加时，它将undefined，因此它正在创建错误TypeError: b.getPositionEl(...).dom is undefined。

对于此解决方案，您需要始终从function 创建component 和return。

在这个FIDDLE中，我使用您的代码创建了一个演示并进行了一些修改。我希望这将指导您或帮助您实现您的要求。

代码片段

Ext.onReady(function() {
    //ReSet  view set optionPanel
    function restart() {
        container.remove(Ext.getCmp('workPanel'));
        container.add(optionPanel());
        doLayout();
    }
    //Remove optionPanel and add workPanel in container
    function getMemberData() {
        container.remove(Ext.getCmp('optionPanel'));
        container.add(workPanel());
        doLayout();
    }
    //update layout of view
    function doLayout() {
        container.doLayout();
    }
    //create and return work flow panel
    var workPanel = function() {
        return new Ext.FormPanel({
            title: 'Bad Address Workflow',
            id: 'workPanel',
            region: 'center',
            frame: true,
            labelWidth: 300,
            autoScroll: true,
            bodyStyle: {
                padding: '5px',
                font: '12px arial,tahoma,helvetica,sans-serif'
            },
            buttons: [{
                text: 'Post'
            }, {
                text: 'Cancel',
                listeners: {
                    click: restart
                }
            }],
            buttonAlign: 'left'
        });
    }
    //create and return option panel

    var optionPanel = function() {
        return new Ext.FormPanel({
            id: 'optionPanel',
            title: 'Bad Address Workflow',
            region: 'center',
            frame: true,
            labelWidth: 175,
            bodyStyle: 'padding:5px 5px 0',
            defaults: {
                width: 230
            },
            items: [
                // create the combo instance
                new Ext.form.ComboBox({
                    typeAhead: true,
                    triggerAction: 'all',
                    lazyRender: true,
                    mode: 'local',
                    name: 'workflowOptions',
                    itemId: 'workflowOptions',
                    store: new Ext.data.ArrayStore({
                        fields: [
                            'myId',
                            'displayText'
                        ],
                        data: [
                            ["", ""],
                            ["0", "Set Bad Address"],
                            ["1", "Remove Bad Address"]
                        ]
                    }),
                    valueField: 'myId',
                    displayField: 'displayText'
                })
            ],
            buttons: [{
                text: 'Continue',
                listeners: {
                    click: function(button, event) {
                        //Get value of seleted value in combotbox 
                        //using get component method
                        var value = Ext.getCmp('optionPanel').getComponent('workflowOptions').getValue();

                        if (value === "0") {
                            workflow = 0;
                            getMemberData();
                        } else if (value === "1") {
                            workflow = 1;
                            getMemberData();
                        } else {
                            Ext.Msg.alert('Info', 'You have not selected an option.')
                        }
                    }
                }
            }],
            buttonAlign: 'left'
        })
    };
    //Main container that contains option and workflow panel.
    var container = new Ext.Container({
        renderTo: Ext.getBody(),
        frame: true,
        region: 'center',
        bodyStyle: 'padding:5px 5px 0',
        defaults: {
            xtype: 'container'
        },
        items: [optionPanel()]
    });
});

Answer 2

我可以推荐你使用 hide() 和 show() 方法而不是 remove() 方法。