1. #1
    Ext User
    Join Date
    Jun 2010
    Posts
    8
    Vote Rating
    0
    ProggerPete2 is on a distinguished road

      0  

    Default Dynamically adding and removing a form field

    Dynamically adding and removing a form field


    I have an application where I have a nice big grid of fields.

    I'd like to edit those fields.

    I've got to the point where I can move around the fields using the cursor keys and start editing by typing.

    When the user first starts typing I'm creating a TextField and inserting it in the appropriate spot.

    Now comes the tricky part, when the user is done editing (they have hit enter) I want to remove the TextField from the DOM. I could call destroy, but I'd much rather reuse the TextField next time, rather than recreate it from scratch.

    I can't see an easy way to do this, I can get naughty and call remove on the fields underlying Element and it will be removed from the DOM. Then I need to start mantaining the rendered flag, then the event handlers get themselves in a not. Basically it starts to feel hard, which is not what I've been told Ext is about.

    Am I missing something? Does Ext consider reuse of FormFields or am I coding in a throw away world?

  2. #2
    Sencha User
    Join Date
    Sep 2007
    Posts
    13,971
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    Are you sure you use GXT? there is nothing like destroy in GXT.

  3. #3
    Ext User
    Join Date
    Jun 2010
    Posts
    8
    Vote Rating
    0
    ProggerPete2 is on a distinguished road

      0  

    Default oops

    oops


    my bad. Will repost more sensibly.

  4. #4
    Sencha User
    Join Date
    Sep 2007
    Posts
    13,971
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    i will move it, no need to repost

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    58
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Removing (with autoDestroy as false) does not remove the item's rendered Element from the DOM.

    You will have to than add it to a hidden, offscreen Container, and call doLayout on that Container to force the item's Element to be re-homed into the hidden Container.

  6. #6
    Ext User
    Join Date
    Jun 2010
    Posts
    8
    Vote Rating
    0
    ProggerPete2 is on a distinguished road

      0  

    Default


    =)

    So I've got

    option 1 - open can of worms
    option 2 - just destroy and recreate every time.

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    58
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    option 3 - remove and add to a Container which is hidden.

    Much more efficient.

  8. #8
    Ext User
    Join Date
    Jun 2010
    Posts
    8
    Vote Rating
    0
    ProggerPete2 is on a distinguished road

      0  

    Default


    So add it once to a div or something and then just shuffle the div about? I'm not a huge fan of having a bunch of stuff in my DOM on the off chance I might need it some day, but it will most likely work... I'll have a play.

  9. #9
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    58
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    I thought you said "I'd much rather reuse the TextField next time, rather than recreate it from scratch."

  10. #10
    Ext User
    Join Date
    Jun 2010
    Posts
    8
    Vote Rating
    0
    ProggerPete2 is on a distinguished road

      0  

    Default


    condedev1 - Nice hijack.

    Animal - You don't need to leave something in the DOM to reuse it. I usually create my objects, add them to the DOM when I'm using them, then pull them out and leave them sitting in memory, waiting to be re-inserted.

Similar Threads

  1. Adding and Removing Accordion Elements Dynamically
    By ogradyjd in forum Ext 2.x: Help & Discussion
    Replies: 16
    Last Post: 12 Dec 2008, 8:59 AM
  2. [2.2] Dynamically adding/cloning/removing fields of a form
    By arnold in forum Community Discussion
    Replies: 2
    Last Post: 7 Nov 2008, 12:09 AM
  3. dynamically adding and removing menus
    By holli in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 23 Oct 2007, 2:10 PM
  4. Dynamically adding / removing checkboxes
    By jeffita in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 9 Aug 2007, 12:30 PM
  5. Adding and Removing rows dynamically from a grid
    By sonic64 in forum Ext 1.x: Help & Discussion
    Replies: 28
    Last Post: 9 Apr 2007, 8:51 PM

Thread Participants: 3