1. #1
    Ext User
    Join Date
    Jan 2011
    Posts
    3
    Vote Rating
    0
    ygpark2 is on a distinguished road

      0  

    Default Clone an ExtJS Component

    Clone an ExtJS Component


    Code:
    //Component 1
    var comp1 = new Ext.form.TextField({});
     
    //Component cloning...
    var comp2 = comp1.cloneConfig();
    I know this way but what if I have
    Code:
    {
          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.

  2. #2
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,360
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


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

  3. #3
    Ext User
    Join Date
    Jan 2011
    Posts
    3
    Vote Rating
    0
    ygpark2 is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha User
    Join Date
    Oct 2010
    Posts
    159
    Vote Rating
    0
    mdavis6890 is on a distinguished road

      0  

    Default


    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.

  5. #5
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,004
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by mdavis6890 View Post
    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).
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #6
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,360
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    Not to make Jay's head any bigger but agreed. Also check out his book (an upcoming books).

  7. #7
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,360
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Quote Originally Posted by mdavis6890 View Post
    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

  8. #8
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,004
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by jgarcia@tdg-i.com View Post
    You and your images. Google Image search pretty handy for ya? ...sorry, off topic of this thread now
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  9. #9
    Ext User
    Join Date
    Jan 2011
    Location
    Poland
    Posts
    6
    Vote Rating
    0
    gby is on a distinguished road

      0  

    Default


    Quote Originally Posted by ygpark2 View Post
    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

  10. #10
    Sencha User
    Join Date
    Oct 2010
    Posts
    159
    Vote Rating
    0
    mdavis6890 is on a distinguished road

      0  

    Default


    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.

Similar Threads

  1. How to clone a Field?
    By zhoujianghao in forum Ext GWT: Help & Discussion (1.x)
    Replies: 6
    Last Post: 11 Jul 2012, 2:12 AM
  2. An Open Source Meebo Clone with EXTJS 2.0
    By atreyu in forum Community Discussion
    Replies: 2
    Last Post: 16 Nov 2010, 3:23 AM
  3. Clone
    By ibralnet in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 10 Feb 2009, 3:22 AM
  4. what is the name component used in http://extjs.com/products/extjs/ ?
    By wiyanto in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 19 Nov 2008, 7:35 AM

Thread Participants: 4

Tags for this Thread