Strange behavior when working with Grouped Tabs

[joejoemetoo]

I'm using Ext Designer to build an interface. When exporting the code and previewing the interface in a browser, all looks well. See screenshot below:
Picture 1.jpg

However, when incorporating the code into the Grouped Tabs example that comes with ExtJS, (which I'm using as a starting point to prototype the interface), the interface renders incorrectly when viewing it in a browser. The fields within the Field Set disappear for no apparent reason. See screen shot below:
Picture 2.jpg

It appears as though the Grid Panel is the culprit. If I remove the Grid Panel, it works fine. If I replace the Grid Panel with a List View it works fine. I tried deleting the Grid Panel and creating a brand new one, it too fails. It appears as though the Grouped Tabs example project doesn't like the Grid Panel.

I cannot work out what's going wrong. I have spent countless hours trying to solve the problem and I cannot work it out.

Any ideas?

[steffenk]

you can edit / delete your post at any moment.

[aconran]

What type of layout is the component you developed contained in?

Are there any errors thrown? What version of Ext are you running?

[joejoemetoo]

Ok, let me ask you differently ...

I am using the Grouped Tabs example as a starting point for the prototype. I'd like to display an interface I have created using Ext Designer inside a tab of the Grouped Tab.

So, I have two files generated by Ext Designer - Checkout.ui.js and Checkout.js

I have tried within the sub-tab:

items: [new Checkout]

Which kind of works, it displays something (as you can see from my screen shots), but it doesn't display correctly.

I'm assuming that this is the wrong approach. How do I get the interface to load correctly.

OK, even if this is the wrong approach - I have tried copying and pasting the code from the ui.js file, which also doesn't display correctly.

To answer your questions:

The interface I developed is contained in a Container.

I'm using the latest version of ExtJS - just downloaded it 3 days ago.

My browser (Safari) is reporting an error:
TypeError: Result of expression 'this.ds' [undefined] is not an object.
in file: ext-all.js:19

However, this same error is reported when using the mockup files that Ext Generates (which render correctly to the browser), so I'm not sure if it's anything to be concerned about.

Thanks.

[joejoemetoo]

OK - I'm convinced that the issue has something to do with Grid Panels - they seem to be flaky to me.

I have created two Ext Designer projects, showing a window in both projects, one with a Grid Panel, the other with a List View - when exporting the projects, the one containing the Grid Panel does not load at all - shows a blank page, the other one that contains the List View displays fine.

Ok - here are the projects:

This one contains a Grid Panel within a Window - fails to load, shows blank page
1.xds

This one contains a List View within a Window - loads fine
2.xds


This supports my earlier comments - that Grid Panels are causing my interface to render incorrectly as per my original screen shots. When removing the grid panels, my interface worked fine - I'm convinced there's something wrong with Grid Panels.

[Jamie Avins]

Can you provide the code for the GroupTabPanel that you are embedding this inside of?

[JackTripp]

I'm having a very similar issue with corruption in the output code when using grouped tabs. When you preview or export the project, the active tab works correctly but all other tabs are corrupt. You can select a different tab and preview / export and that tab will export correctly but all the other tabs, including the one that previously exported correctly, are now corrupt. I am very new to extjs and so it may be an issue with the way the windows are created, but it looks like a bug to me.

[joejoemetoo]

Did you add a store to the gridpanel? Edit: I saw that you did not add a store in 1.xds
Probably this problem: http://www.extjs.com/forum/showthread.php?t=96521

Thanks ExtKD - you were right, the grid panel needed a store - the interface now loads correctly.

Problem solved!

I agree with the comments of another poster in the thread you mentioned - that Ext Designer should warn users when exporting or handle it some how so that we don't get caught out.

[JackTripp]

I'm having a very similar issue with corruption in the output code when using grouped tabs. When you preview or export the project, the active tab works correctly but all other tabs are corrupt. You can select a different tab and preview / export and that tab will export correctly but all the other tabs, including the one that previously exported correctly, are now corrupt. I am very new to extjs and so it may be an issue with the way the windows are created, but it looks like a bug to me.

I'm still seeing this issue with other similar windows. Is there something I'm missing with the nested hbox/vbox layout?

[JackTripp]

Ahhh I think I figured it out. The designer does not like you specifying your own heights and widths. If you use align: stretch and flex to fill out the space it seems to fix the issue.