Clone an ExtJS Component

[ygpark2]

//Component 1
var comp1 = new Ext.form.TextField({});
 
//Component cloning...
var comp2 = comp1.cloneConfig();

I know this way but what if I have

{
      xtype: 'form',
      region:'center',
      labelWidth: 125,
      frame: true,
      title: 'Date Range',
      bodyStyle:'padding:5px 5px 0',
      labelPad: 20,
      layoutConfig: {
          labelSeparator: ''
      },
      defaults: {
          width: 230,
          msgTarget: 'side'
      },
      defaultType: 'datefield',
      items: [{
        fieldLabel: 'Start Date',
        name: 'startdt',
        id: 'startdt',
        vtype: 'daterange',
        endDateField: 'enddt' // id of the end date field
      },{
        fieldLabel: 'End Date',
        name: 'enddt',
        id: 'enddt',
        vtype: 'daterange',
        startDateField: 'startdt' // id of the start date field
      }]
    }

How can I clone this object?

More specifically, I concern about how to enhance the reusability of the components.
As the number of components used grows, I have found that it is annoying to do copy and paste and this job even increase the amounts of code line. so I wonder how other peoples work in managing a number of the components.

[jay@moduscreate.com]

If you have reusable bits of code, move them to classes, register xtypes

[ygpark2]

Your explanation is little bit harder to me to understand.

My case is that when I insert above form panel into several panels, I met some weird situation like duplicate contents, malfunction of event etc. I guess this problem is caused by copying the component. I believe extjs regard these components are the same components so I need to clone the component and make extjs distinguish these two components as well as dwindle the amount of code line.

[mdavis6890]

Jgarcia has a great video tutorial on exactly this subject. Check it out on tdg-I.com. That's what really got me started on extjs.

Look fornthe one about extending and abstract classes.

[mitchellsimoens]

Jgarcia has a great video tutorial on exactly this subject. Check it out on tdg-I.com. That's what really got me started on extjs.

Look fornthe one about extending and abstract classes.

Not to make Jay's head any bigger but agreed. Also check out his book (an upcoming books).

[jay@moduscreate.com]

Not to make Jay's head any bigger but agreed. Also check out his book (an upcoming books).

[jay@moduscreate.com]

Jgarcia has a great video tutorial on exactly this subject. Check it out on tdg-I.com. That's what really got me started on extjs.

Look fornthe one about extending and abstract classes.

Wow! That's great to hear . I'm glad the videos have provided some value to you

[mitchellsimoens]

You and your images. Google Image search pretty handy for ya? ...sorry, off topic of this thread now

[gby]

Your explanation is little bit harder to me to understand.

My case is that when I insert above form panel into several panels, I met some weird situation like duplicate contents, malfunction of event etc.

You copy a form panel which contains fields with id config. Components id's need to be unique for you entire page. If not weird things can happen... Anyway stick to Jay's advice on classes and xtypes and your life will get much easier

[mdavis6890]

Yeah, and after you're done watching the one about abstract classes, watch the one about Ext.getCmp and stop using hard-coded ids at all.