8 Apr 2010 5:41 AM #1
Strange behavior when working with Grouped Tabs
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:
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:
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.
Last edited by joejoemetoo; 8 Apr 2010 at 3:38 PM. Reason: wrong title given
8 Apr 2010 7:57 AM #2
you can edit / delete your post at any moment.vg Steffen
Release Manager of TYPO3 4.5
8 Apr 2010 9:19 AM #3
What type of layout is the component you developed contained in?
Are there any errors thrown? What version of Ext are you running?Aaron Conran
8 Apr 2010 5:12 PM #4
Ok, let me ask you differently ...
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]
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.
8 Apr 2010 5:52 PM #5
Grid panels are flaky
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
This one contains a List View within a Window - loads fine
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.
9 Apr 2010 11:34 AM #6
Can you provide the code for the GroupTabPanel that you are embedding this inside of?
9 Apr 2010 12:28 PM #7
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.
9 Apr 2010 6:29 PM #8
Problem solvedDid 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
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.
Last edited by joejoemetoo; 9 Apr 2010 at 6:30 PM. Reason: missed somehting
13 Apr 2010 9:55 AM #9
13 Apr 2010 2:29 PM #10
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.