View Full Version : TabPanel with Multiple Copies of Form

3 Oct 2013, 7:03 AM
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

var tabId = 'tab' + rec.data.id;
var tabFound = this.tabExists(tabId);
var tab = this.getTabPanel().add({
title: rec.data.id + " - " + rec.data.description,
itemId: tabId,
closable: true,
xtype: 'itemdetailspage'


tab.down('form[itemId=itemEditForm]').fireEvent('loadpageevent', rec);

3 Oct 2013, 10:00 PM
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 Oct 2013, 5:09 AM
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.

6 Oct 2013, 10:07 PM
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.

7 Oct 2013, 6:01 AM
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.


7 Oct 2013, 9:36 PM
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!

9 Oct 2013, 7:55 AM
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.