1. #1
    Ext User
    Join Date
    Apr 2010
    Posts
    11
    Vote Rating
    0
    joejoemetoo is on a distinguished road

      0  

    Post Strange behavior when working with Grouped Tabs

    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:
    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?
    Last edited by joejoemetoo; 8 Apr 2010 at 3:38 PM. Reason: wrong title given

  2. #2
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,664
    Vote Rating
    7
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      0  

    Default


    you can edit / delete your post at any moment.
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  3. #3
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,266
    Vote Rating
    121
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    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
    @aconran
    Sencha Architect Development Team

  4. #4
    Ext User
    Join Date
    Apr 2010
    Posts
    11
    Vote Rating
    0
    joejoemetoo is on a distinguished road

      0  

    Post Ok, let me ask you differently ...

    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:
    Code:
    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.

  5. #5
    Ext User
    Join Date
    Apr 2010
    Posts
    11
    Vote Rating
    0
    joejoemetoo is on a distinguished road

      0  

    Default Grid panels are flaky

    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
    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.

  6. #6
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    20
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


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

  7. #7
    Ext JS Premium Member
    Join Date
    Mar 2010
    Posts
    6
    Vote Rating
    0
    JackTripp is on a distinguished road

      0  

    Default


    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.
    Attached Files

  8. #8
    Ext User
    Join Date
    Apr 2010
    Posts
    11
    Vote Rating
    0
    joejoemetoo is on a distinguished road

      0  

    Post Problem solved

    Problem solved


    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.
    Last edited by joejoemetoo; 9 Apr 2010 at 6:30 PM. Reason: missed somehting

  9. #9
    Ext JS Premium Member
    Join Date
    Mar 2010
    Posts
    6
    Vote Rating
    0
    JackTripp is on a distinguished road

      0  

    Default


    Quote Originally Posted by JackTripp View Post
    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?

  10. #10
    Ext JS Premium Member
    Join Date
    Mar 2010
    Posts
    6
    Vote Rating
    0
    JackTripp is on a distinguished road

      0  

    Default


    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.