ExtJS4: Use Panel, Window, or Container?

Question

I am working on an application where my requirement is to develop the following screens:

1. Add screen to accept user input( form panel )
2. View details screen to display the user input( grid panel)
3. Edit screen to edit the user input ( not sure if it should be form or window).

I have a 'itemdblclick' listener for the grid panel..so when the user double clicks on a grid row, the edit screen has to open up with the details populated in the fields.

I want to use a common class for both add and edit screens, But the issue here is, If I extend a Window, the edit screen comes up but not add screen Whereas If I extend a Panel, then the add screen opens up but edit screen does not come up..

Ext.define('ELM.view.cl.Edit',{                   
extend:'Ext.window.Window',
...

Ext.define('ELM.view.cl.Edit',{
extend : 'Ext.form.Panel',
...

Note: I have a tab panel in which I am adding the add and view screen as different tabs, whereas edit screen is just a window.

As far as I know, probably the tabpanel cannot have window as a child component.

Please tell me what is wrong here? Should I extend a 'container' instead and may be specify 'formpanel' and 'window' in some other place. ? How do I achieve my requirement? Any references will help..

Thanks in advance

Answer 1

I solved this problem by defining the form extending a form panel:

Ext.define('ELM.view.cl.Edit',{
extend : 'Ext.form.Panel',
alias: 'widget.cledit',
...

and then to display the form in the edit window. I create a new Window and then add the form panel that I just created as a child element of the window. That is like this,

 Ext.define('ELM.view.cl.EditWindow',{                   
    extend:'Ext.window.Window',
   items: [
          {
             xtype: 'cledit'
          }
         ]
});

Hope it might help someone :)