Results 1 to 7 of 7

Thread: TabPanel with Multiple Copies of Form

  1. #1
    Sencha User theWallflower's Avatar
    Join Date
    Oct 2013
    Location
    Minnesota
    Posts
    10

    Default Answered: TabPanel with Multiple Copies of Form

    Hi, newbie to ExtJS here.

    I have an application where I search for an Item, then I want to display each of those Items in a separate tab with its own Form. When I dynamically add a tab, the first time, it works fine. But when I add the next tab, the data gets loaded into the first tab, and the new tab's fields are blank.

    I think the problem is that there is ID conflict, but I'm not sure the best way to change IDs dynamically and retain all the code that edits the form.

    Code to add
    Code:
    var tabId = 'tab' + rec.data.id;
    var tabFound = this.tabExists(tabId);
    if(!tabFound){
     var tab = this.getTabPanel().add({
      title: rec.data.id + " - " + rec.data.description,
      itemId: tabId,
            closable: true,
            xtype: 'itemdetailspage'
     );
         
     this.getTabPanel().setActiveTab(tab);
             
             
     tab.down('form[itemId=itemEditForm]').fireEvent('loadpageevent', rec);   
    }else{
       this.getTabPanel().setActiveTab(tabFound);
    }

  2. Well, I decided to resort to living example:

    WARNING! Techniques used in the example for components instantiating and binding are the greatest of the worst practices! Don't use them. Only form binding idea is useful!

  3. #2
    Sencha User
    Join Date
    Sep 2011
    Posts
    574
    Answers
    59

    Default

    You are on a wrong path.
    Your forms do not differ from each other - they have same fields that displayed at same places.
    Instead of duplicating components, you should switch data, that is binded to one form.

  4. #3
    Sencha User theWallflower's Avatar
    Join Date
    Oct 2013
    Location
    Minnesota
    Posts
    10

    Default

    I'm not sure if I can switch data. The requirements say that there should be one tab for searching. Clicking on a search result opens a new tab with that Item's detail. And you can open multiple tabs.

    It seems bad programming to switch the data around in the form each time the user clicks a tab. I'm not even sure how I'd go about doing that.

  5. #4
    Sencha User
    Join Date
    Sep 2011
    Posts
    574
    Answers
    59

    Default

    Don't think those are tabs - think those are views. On the one view you have search. On the second - details form. And also you have a list of selected items. Once user clicks 'Search' - open first view. Once he clicks on any of the items there - add it to selection and open second view with this item bound. If he clicks another item from the selected list - highlight it and bind it to the second view.

  6. #5
    Sencha User theWallflower's Avatar
    Join Date
    Oct 2013
    Location
    Minnesota
    Posts
    10

    Default

    I'm sorry, ettavolt, but that doesn't sound like it solves my problem either. Maybe I need a more concrete example of what you're saying. But I need to have more than two views (tabs). One is for search which will never close. The others are for each of the search results a user can edit.

    scshot.jpg

  7. #6
    Sencha User
    Join Date
    Sep 2011
    Posts
    574
    Answers
    59

    Default

    Well, I decided to resort to living example:

    WARNING! Techniques used in the example for components instantiating and binding are the greatest of the worst practices! Don't use them. Only form binding idea is useful!

  8. #7
    Sencha User theWallflower's Avatar
    Join Date
    Oct 2013
    Location
    Minnesota
    Posts
    10

    Default

    Yes, this worked for me. I had to manipulate the CSS quite a bit to get them to look like tabs, but this was the solution I used. Thanks very much.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •