Question

I’m having a problem where I would like to remove a FormPanel from a Window.

Here is my Form which is being loaded in a Window:

myForm = new Ext.FormPanel({
    frame: true,
    width: '100%',
    id: 'myform',
    layout: 'form',
    autoHeight: true,
    autoDestroy: false,
    region: 'center',
    monitorValid: true,
    items: [{
        xtype: 'textfield',
        id: 'mytextfield',
        fieldLabel: 'My Label',

    }]
 });

MyWindow =  new Ext.Window({
  title: 'MyWindow',  
    layout: 'auto',
    resizable: false,
  width: 717, 
    autoheight:true,
  id:'mywindow',
    closeAction:'hide',
  closable: true,
    items:[Ext.getCmp("myform")]


  });

Now I want to remove this form and have to show another form, and I’m doing like this somewhere else:

MyWindow.removeAll();
MyWindow.add(Ext.getCmp("myAnotherForm"));

But this gives me error "Uncaught TypeError: Cannot read property 'events' of undefined" in ext-all-debug.js.

Is there anything, I’m missing here ?

Thanks.

Answer 1

You can remove the form and add another form by using the following code:

Ext.onReady(function() {
    var btn = new Ext.Button({
        id : 'button',
        width : 100,
        height : 30,
        text : 'click me',
        listeners : {
            click : function(){
                var myanother = myAnotherForm;
                var anotherbtn = btn1;
                Mywindow.removeAll();
               Mywindow.add(myanother);
                Mywindow.add(anotherbtn);
                Mywindow.doLayout();
            }
        }
    });
    var btn1 = new Ext.Button({
        id : 'button1',
        width : 100,
        height : 30,
        text : 'Another button'
    });
    myAnotherForm = new Ext.FormPanel({
    frame: true,
    width: '100%',
    id: 'myanotherform',
    layout: 'form',
    autoHeight: true,
    autoDestroy: false,
    region: 'center',
    monitorValid: true,
    items: [{
        xtype: 'textfield',
        id: 'mytextfield',
        fieldLabel: 'My Another Label',
    }]
 });    
    myForm = new Ext.FormPanel({
    frame: true,
    width: '100%',
    id: 'myform',
    layout: 'form',
    autoHeight: true,
    autoDestroy: false,
    region: 'center',
    monitorValid: true,
    items: [{
        xtype: 'textfield',
        id: 'mytextfield',
        fieldLabel: 'My Label',
    }]
 });    
    var Mywindow = new Ext.Window({  
        title: 'MyWindow',       
        layout: 'auto',    
        resizable: false,  
        width: 317,     
        autoheight:true,   
        id:'mywindow',     
        closeAction:'hide',   
        closable: true,
        items : [myForm,btn]    
    });
    Mywindow.show();
});

The working sample for the above is follows:

http://jsfiddle.net/kesamkiran/MVewR/1/

    * Click on 'click me' button then you will get the another form with another button.If you want to change only form,then you can remove the button.