extjs reuse object

Question

If I had:

var x  = new Ext.form.formPanel({
});

I wanted to reuse in two places, e.g.:

var panel1 = new Ext.panel({ items:[x] });
var panel2 = new Ext.panel({ items:[x] });

Have try method Ext.extend but it did not work. If I do that it only renders one time on the page.

Answer 1

Two Ext.form.FormPanel objects need to be created so you would have to do something similar to what's shown below:

var x  = new Ext.form.FormPanel({
});

var y  = new Ext.form.FormPanel({
});

var panel1 = new Ext.Panel({ items:[x] });
var panel2 = new Ext.Panel({ items:[y] });

Answer 2

you can create your own formPanel class and then create this every time you want

MyForm = Ext.extend(Ext.form.FormPanel, {
  title: 'My Personal Form',
  width: 400,
  height: 250,
  padding: 10,
  initComponent: function() {
    this.items = [
        {
            xtype: 'textarea',
            anchor: '100%',
            fieldLabel: 'Label'
        },
        {
            xtype: 'textfield',
            fieldLabel: 'Label',
            anchor: '100%'
        }
    ];
    MyForm.superclass.initComponent.call(this);
  }
});

var panel1 = new Ext.panel(new MyForm({id:'test1'}));
var panel2 = new Ext.panel(new MyForm());

I insert in the first panel a id property, but you can insert anything else. You can also change the standard configuration of your form overwriting the configuration

Answer 3

Hi Oniram,

I could see your answer in which we are creating two instances of the form object and assigning it to different Panels. I have a similar issue. I have a tree structures displayed in a tab panel. The node values are changed on runtime and the changed data is bynamically update to the node attributes. I need the same TreePanel object witht he changed values to be diaplayed on another tab. How can we do this?

Any help is appriciated.

Var treepan = new Ext.tree.TreePanel({
})

after some UI events the attributes for several nodes are changed.

If I can do some thing like

var panel1 = new Ext.panel({ items:[treepan] }); 
var panel2 = new Ext.panel({ items:[treepan] }); 

Then I can use the datachages to the tree all over.

Is there a way to achive this?