1. #1
    Sencha User
    Join Date
    Mar 2013
    Posts
    26
    Vote Rating
    0
    phickey is on a distinguished road

      0  

    Default Unanswered: Grid does not size properly

    Unanswered: Grid does not size properly


    Hi Guys,

    I have created a page that contains 2 grids. The problem is that the grids do not take the complete space in the layout. I have included the UiBinder files and the onModuleLoad method as well as a screen shot.

    Is there a correct way to get the grids to use the complete screen real-estate, it seams very straight forward problem, so I am not sure why it is so un-intuitive to program?

    Screen Shot 2013-04-02 at 5.22.40 PM.jpg

    ================= OnModuleLoad
    public void onModuleLoad() {
    Viewport viewport = new Viewport();
    viewport.add(new DatasetAdministration());
    viewport.setEnableScroll(true);
    RootLayoutPanel.get().add(viewport);
    }

    ======================DatasetAdministation
    <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
    <ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:client='urn:import:com.sencha.gxt.widget.core.client'
    xmlns:container='urn:import:com.sencha.gxt.widget.core.client.container'
    xmlns:control='urn:import:com.firecracker.hotelsfa.client.system.dataset.screen'>


    <!-- Create the messages interface for i18n !-->
    <ui:with type="com.firecracker.hotelsfa.client.system.dataset.screen.DatasetAdministrationMessages"
    field="messages"/>


    <!-- Create the dataset administration service !-->
    <ui:with type="com.firecracker.hotelsfa.client.system.dataset.DatasetAdminServiceAsync"
    field="datasetAdminServiceAsync"/>


    <!-- Create the user administration tab item config !-->
    <ui:with type="com.sencha.gxt.widget.core.client.TabItemConfig" field="userAdministrationTabItemConfig">
    <ui:attributes text="{messages.userAdministrationLabel}" enabled="true"/>
    </ui:with>


    <!-- Create the region administration tab item config !-->
    <ui:with type="com.sencha.gxt.widget.core.client.TabItemConfig" field="regionAdministrationTabItemConfig">
    <ui:attributes text="{messages.regionAdministrationLabel}" enabled="true"/>
    </ui:with>


    <!-- Create the location administration tab item config !-->
    <ui:with type="com.sencha.gxt.widget.core.client.TabItemConfig" field="locationAdministrationTabItemConfig">
    <ui:attributes text="{messages.locationAdministrationLabel}" enabled="true"/>
    </ui:with>


    <!-- Create the horizontal container layout data !-->
    <ui:with type="com.sencha.gxt.widget.core.client.container.HorizontalLayoutContainer.HorizontalLayoutData"
    field="horizontalLayoutData">
    <ui:attributes width="1" height="1"/>
    </ui:with>


    <!-- Create the vertical container layout data !-->
    <ui:with type="com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData"
    field="verticalLayoutData">
    <ui:attributes width="1" height="1"/>
    </ui:with>


    <!-- Create the widget !-->
    <container:HorizontalLayoutContainer>
    <container:child layoutData="{horizontalLayoutData}">
    <controlatasetGrid datasetAdminServiceAsync="{datasetAdminServiceAsync}" ui:field="datasetGrid"/>
    </container:child>
    <container:child layoutData="{horizontalLayoutData}">
    <container:VerticalLayoutContainer>
    <container:child layoutData="{verticalLayoutData}">
    <controlatasetDetails ui:field="datasetDetails"/>
    </container:child>
    <container:child layoutData="{verticalLayoutData}">
    <client:PlainTabPanel>
    <client:child config="{userAdministrationTabItemConfig}">
    <control:UserAdministration datasetAdminServiceAsync="{datasetAdminServiceAsync}"
    ui:field="userAdministration"/>
    </client:child>
    <client:child config="{regionAdministrationTabItemConfig}">
    <control:RegionAdministration datasetAdminServiceAsync="{datasetAdminServiceAsync}"
    ui:field="regionAdministration"/>
    </client:child>
    <client:child config="{locationAdministrationTabItemConfig}">
    <control:LocationAdministration datasetAdminServiceAsync="{datasetAdminServiceAsync}"
    ui:field="locationAdministration"/>
    </client:child>
    </client:PlainTabPanel>
    </container:child>
    </container:VerticalLayoutContainer>
    </container:child>
    </container:HorizontalLayoutContainer>
    </ui:UiBinder>


    ============================DatasetDetails
    <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
    <ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:client='urn:import:com.sencha.gxt.widget.core.client'
    xmlns:container='urn:import:com.sencha.gxt.widget.core.client.container'
    xmlns:field='urn:import:com.sencha.gxt.widget.core.client.form'>


    <!-- Create the messages interface for i18n !-->
    <ui:with type="com.firecracker.hotelsfa.client.system.dataset.screen.DatasetDetailsMessages" field="messages"/>


    <!-- Create the number properties editor !-->
    <ui:with type="com.sencha.gxt.widget.core.client.form.NumberPropertyEditor" field="datasetIdPropertyEditor"/>


    <!-- Create the widget !-->
    <client:FramedPanel headingText="{messages.datasetProperties}">
    <container:VerticalLayoutContainer>
    <container:child>
    <field:FieldLabel text="{messages.datasetIdLabel}">
    <field:widget>
    <field:NumberField editor="{datasetIdPropertyEditor}" readOnly="true"
    emptyText="{messages.datasetIdLabel}..." ui:field="datasetId"/>
    </field:widget>
    </field:FieldLabel>
    </container:child>
    <container:child>
    <field:FieldLabel text="{messages.datasetNameLabel}">
    <field:widget>
    <field:TextField emptyText="{messages.datasetNameLabel}..." ui:field="datasetName"/>
    </field:widget>
    </field:FieldLabel>
    </container:child>
    <container:child>
    <field:FieldLabel text="{messages.validUntilLabel}">
    <field:widget>
    <fieldateField emptyText="{messages.validUntilLabel}..." ui:field="validUntil"/>
    </field:widget>
    </field:FieldLabel>
    </container:child>
    </container:VerticalLayoutContainer>
    </client:FramedPanel>
    </ui:UiBinder>




    ================================DatasetGrid
    <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
    <ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:container='urn:import:com.sencha.gxt.widget.core.client.container'
    xmlns:toolbar='urn:import:com.sencha.gxt.widget.core.client.toolbar'
    xmlns:button='urn:import:com.sencha.gxt.widget.core.client.button'
    xmlns:grid='urn:import:com.sencha.gxt.widget.core.client.grid'>


    <!-- Create the messages interface for i18n !-->
    <ui:with type="com.firecracker.hotelsfa.client.system.dataset.screen.DatasetGridMessages" field="messages"/>


    <!-- Create the dataset store for the grid !-->
    <ui:with type="com.sencha.gxt.data.shared.ListStore" field="datasetStore"/>


    <!-- Create the column model !-->
    <ui:with type="com.sencha.gxt.widget.core.client.grid.ColumnModel" field="columnModel"/>


    <!-- Create the grid view !-->
    <ui:with type="com.sencha.gxt.widget.core.client.grid.GridView" field="gridView">
    <ui:attributes stripeRows="true" columnLines="true"/>
    </ui:with>


    <!-- Create the container layout data !-->
    <ui:with type="com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData"
    field="verticalLayoutData">
    <ui:attributes width="1" height="1"/>
    </ui:with>


    <!-- Create the widget !-->
    <container:VerticalLayoutContainer>
    <container:child>
    <toolbar:ToolBar>
    <button:TextButton text="{messages.createDatasetAction}" ui:field="createDatasetButton"/>
    <button:TextButton text="{messages.deleteDatasetAction}" ui:field="deleteDatasetButton"/>
    </toolbar:ToolBar>
    </container:child>
    <container:child layoutData="{verticalLayoutData}">
    <grid:Grid store="{datasetStore}" cm="{columnModel}" view="{gridView}" ui:field="datasetGrid"/>
    </container:child>
    </container:VerticalLayoutContainer>
    </ui:UiBinder>







    ==============================LocationAdministration
    <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
    <ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:container='urn:import:com.sencha.gxt.widget.core.client.container'
    xmlns:toolbar='urn:import:com.sencha.gxt.widget.core.client.toolbar'
    xmlns:button='urn:import:com.sencha.gxt.widget.core.client.button'>


    <!-- Create the widget !-->
    <container:VerticalLayoutContainer>
    <container:child>
    <toolbar:ToolBar>
    <button:TextButton>Create</button:TextButton>
    <button:TextButton>Delete</button:TextButton>
    </toolbar:ToolBar>
    </container:child>
    </container:VerticalLayoutContainer>
    </ui:UiBinder>





    =============================RegionAdministration
    <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
    <ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:container='urn:import:com.sencha.gxt.widget.core.client.container'
    xmlns:toolbar='urn:import:com.sencha.gxt.widget.core.client.toolbar'
    xmlns:button='urn:import:com.sencha.gxt.widget.core.client.button'>


    <!-- Create the widget !-->
    <container:VerticalLayoutContainer>
    <container:child>
    <toolbar:ToolBar>
    <button:TextButton>Create</button:TextButton>
    <button:TextButton>Delete</button:TextButton>
    </toolbar:ToolBar>
    </container:child>
    </container:VerticalLayoutContainer>
    </ui:UiBinder>






    ==========================UserAdministration
    <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
    <ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:container='urn:import:com.sencha.gxt.widget.core.client.container'
    xmlns:toolbar='urn:import:com.sencha.gxt.widget.core.client.toolbar'
    xmlns:button='urn:import:com.sencha.gxt.widget.core.client.button'
    xmlns:grid='urn:import:com.sencha.gxt.widget.core.client.grid'>


    <!-- Create the messages interface for i18n !-->
    <ui:with type="com.firecracker.hotelsfa.client.system.dataset.screen.UserAdministrationMessages" field="messages"/>


    <!-- Create the dataset store for the grid !-->
    <ui:with type="com.sencha.gxt.data.shared.ListStore" field="userStore"/>


    <!-- Create the column model !-->
    <ui:with type="com.sencha.gxt.widget.core.client.grid.ColumnModel" field="columnModel"/>


    <!-- Create the grid view !-->
    <ui:with type="com.sencha.gxt.widget.core.client.grid.GridView" field="gridView">
    <ui:attributes stripeRows="true" columnLines="true"/>
    </ui:with>


    <!-- Create the container layout data !-->
    <ui:with type="com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData"
    field="verticalLayoutData">
    <ui:attributes width="1" height="1"/>
    </ui:with>


    <!-- Create the widget !-->
    <container:VerticalLayoutContainer>
    <container:child>
    <toolbar:ToolBar>
    <button:TextButton text="{messages.createUserAction}" ui:field="createUserButton"/>
    <button:TextButton text="{messages.deleteUserAction}" ui:field="deleteUserButton"/>
    </toolbar:ToolBar>
    </container:child>
    <container:child layoutData="{verticalLayoutData}">
    <grid:Grid store="{userStore}" cm="{columnModel}" view="{gridView}" ui:field="userGrid"/>
    </container:child>
    </container:VerticalLayoutContainer>
    </ui:UiBinder>

  2. #2
    Ext GWT Premium Member icfantv's Avatar
    Join Date
    Sep 2011
    Location
    Superior, CO
    Posts
    411
    Answers
    20
    Vote Rating
    21
    icfantv will become famous soon enough icfantv will become famous soon enough

      0  

    Default


    I don't see the actual values for your vertical layout data, so I can't say if this is it or not. If you want the grid to take up the full height and width OF THE REMAINING SPACE you need to use 1.0, 1.0 for your width/height.

    Remember, values < 0 use actual component width/height, values between 0 and 1 (inclusive) are treated as percentages, and values > 1 are treated as a width/height in pixels.

    I suspect your vertical layout data is off for your grid.

  3. #3
    Sencha User
    Join Date
    Mar 2013
    Posts
    26
    Vote Rating
    0
    phickey is on a distinguished road

      0  

    Default


    Hi icfantv,

    Did you mean the in the section marked
    ================================DatasetGrid section

    If so, you will notice the code in the UiBinder. I have added it here:

    <!-- Create the container layout data !-->
    <ui:with type="com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData"
    field="verticalLayoutData">
    <ui:attributes width="1" height="1"/>
    </ui:with>

    <container:child layoutData="{verticalLayoutData}">
    <grid:Grid store="{datasetStore}" cm="{columnModel}" view="{gridView}" ui:field="datasetGrid"/>
    </container:child>

    Did you have other layout data in mind?



  4. #4
    Ext GWT Premium Member icfantv's Avatar
    Join Date
    Sep 2011
    Location
    Superior, CO
    Posts
    411
    Answers
    20
    Vote Rating
    21
    icfantv will become famous soon enough icfantv will become famous soon enough

      0  

    Default


    Ahhh. I did miss that. You can see how given the volume of code that was included. In the future, please consider using the #-sign button in the tool bar to paste in code. It will format it, and make it scrollable. Like this:

    Code:
    public class Foo {
    
      public Foo() {
        System.out.println("hi there!")
      }
    }
    Ok, before doing anything else, what happens if you resize your browser window which should force your UI to redraw. Are they rendered correctly or incorrectly?

    Also, did you mean to use RootLayoutPanel instead of RootPanel? Typically, web applications shouldn't scroll at the topmost level as it can create a poor UX.

    My next thought is that if you're sure your VLC and VLD is working correctly, then the container in which your VLC is being placed is not doing what you expect. UiBinder is not my forte, can you please explain the layout structure of your app?

    Looking at your screenshot, assuming it is complete, it looks like you have a left side and a right side. The left side contains a row of buttons and then a grid. The right side contains a FramedPanel (should this be a ContentPanel instead?) and a TabPanel.

    The way I would structure this app is if the left side has a fixed width, use an HLC giving the left an HLD of, say, 200.0, 1.0 and the right a 1.0, 1.0 so it takes all the remaining space.

    For the left side contents, I'd use a VLC with the button row using a VLD of 1.0, -1.0 and the grid using a VLD of 1.0, 1.0.

    For the right side contents, it's tough to determine (because I don't know UiBinder) if the TabPanel is part of the FramedPanel but if so, I'd create a FramedPanel with one VLC and give the FieldLabel area a VLD of 1.0, -1.0 and the TabPanel a VLD of 1.0, 1.0.

    Give that a try and see what happens.

    We're doing slightly more complex layouts than this, albeit not via UiBinder, and have not had any issues short of us initially not understanding layouts.

  5. #5
    Sencha User
    Join Date
    Mar 2013
    Posts
    26
    Vote Rating
    0
    phickey is on a distinguished road

      0  

    Default


    Hi icfantv,

    Thanks for the quick reply and the tip on the code format.
    1. When I resize the browser there is no change in the grid.
    2. I used the RootLayoutPanel for the post about. I have also used the RootPanel to test the difference, and still I get the error outcome
    3. Sure the layout is as follows:
      • RootLayoutPanel
      • ----Viewport
      • --------DatasetAdministration [IsWidget]
      • ------------HorizontalLayoutContainer
      • ----------------DatasetGrid [IsWidget] (HorizontalLayoutData(1, 1))
      • --------------------VerticalLayoutContainer
      • ------------------------Toolbar
      • ------------------------Grid (VerticalLayoutData(1, 1))
      • ----------------VerticalLayoutContainer (HorizontalLayoutData(1, 1))
      • --------------------DatasetDetails [IsWidget] (VerticalLayoutData(1, 1))
      • --------------------PlainTabPanel (VerticalLayoutData(1, 1))
      • ------------------------UserAdministration [IsWidget]
      • ------------------------RegionAdministration [IsWidget]
      • ------------------------LocationAdministration [IsWidget]
    4. I have changed the above to
      • RootLayoutPanel
      • ----Viewport
      • --------DatasetAdministration [IsWidget]
      • ------------HorizontalLayoutContainer
      • ----------------DatasetGrid [IsWidget] (HorizontalLayoutData(200, 1))
      • --------------------VerticalLayoutContainer
      • ------------------------Toolbar (VerticalLayoutData(1, -1))
      • ------------------------Grid (VerticalLayoutData(1, 1))
      • ----------------VerticalLayoutContainer (HorizontalLayoutData(1, 1))
      • --------------------DatasetDetails [IsWidget] (VerticalLayoutData(1, -1))
      • --------------------PlainTabPanel (VerticalLayoutData(1, 1))
      • ------------------------UserAdministration [IsWidget]
      • ------------------------RegionAdministration [IsWidget]
      • ------------------------LocationAdministration [IsWidget]
    Neither had an effect.

  6. #6
    Ext GWT Premium Member icfantv's Avatar
    Join Date
    Sep 2011
    Location
    Superior, CO
    Posts
    411
    Answers
    20
    Vote Rating
    21
    icfantv will become famous soon enough icfantv will become famous soon enough

      0  

    Default


    UPDATE: you're sure none of those widgets have an explicit size set on them?

    Hmmm, that looks right. My only other suggestion at this point would be to try and load this into as basic a configuration as possible. I.e., put it in an onModuleLoad and build it from there with actual components and not UiBinder.

    Also, what version of GXT are you using? What browser/platform/version?
    Last edited by icfantv; 3 Apr 2013 at 1:17 PM. Reason: added additional question.

  7. #7
    Sencha User
    Join Date
    Mar 2013
    Posts
    26
    Vote Rating
    0
    phickey is on a distinguished road

      0  

    Default


    It seams that the HLC containing a VLC is the problem. Here is what I have noticed.

    The height is incorrect if you place the widgets as follows:
    HLC -> VLC -> Toolbar, Grid

    If however you do this:
    HLC -> FramedPanel -> VLC -> Toolbar, Grid

    Then all is well. It is very unfortunate. I am using GXT 3.0.1, Safari/OSX/Lion Server

  8. #8
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,731
    Answers
    109
    Vote Rating
    90
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    That outline is fantastic - thanks for the great writeup. The XML is harder to read, especially without any backing Java - any of those backing classes could be rigged in a number of ways that would confuse matters, but making them IsWidget and returning the root node from the uibinder's createAndBind should about do it.

    When using Viewport, RootPanel or RootLayoutPanel should be interchangable, but might be worth trying just RootPanel instead. RootLayoutPanel is GWT's idea of Viewport, but it doesn't correctly wire up the initial sizes.

    Other ideas: what is in your HTML file? We can't see the browser itself - does it have scrollbars despite the Viewport?

    Does anything else in the app talk to RootPanel?

    Finally, have you tried opening Firebug or Chrome's Inspector to watch the resize happen? Does any element get a new size applied when the browser changes? You should see each link in the layout chain get sizes from its parent (granted your left panel will have a fixed width, but should change height).

  9. #9
    Ext GWT Premium Member icfantv's Avatar
    Join Date
    Sep 2011
    Location
    Superior, CO
    Posts
    411
    Answers
    20
    Vote Rating
    21
    icfantv will become famous soon enough icfantv will become famous soon enough

      0  

    Default


    Hmmm, you shouldn't have to add it to a FramedPanel to get the behavior...If you use SimpleContainer (and again, you shouldn't have to) instead does it still work?

    We are doing the reverse and adding HLCs to a VLC and are not experiencing issues but we're working on an example to see if this is a bug.

  10. #10
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,731
    Answers
    109
    Vote Rating
    90
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    HLC -> VLC -> Grid should not be a problem, provided you have good (i.e. not -1) layout data objects in there. Here's a quick sample:

    Tree:
    RootPanel
    ==Viewport
    ====HLC
    ======Grid (HLD w=200, h=1.0)
    ======VLC (HLD w=1.0, h=1.0)
    ========Toolbar (VLD w=1.0, h=-1)
    ========Grid (VLD w=1.0, h=1.0)

    Code:
    public class NestedLCs implements EntryPoint {
    
      @Override
      public void onModuleLoad() {
        ListStore<String> store = new ListStore<String>(new ModelKeyProvider<String>() {
          @Override
          public String getKey(String item) {
            return item;
          }
        });
        store.add("testing");
        store.add("nesting containers");
        store.add("directly to see if it works");
        store.add("More stuff1");
        store.add("More stuff2");
        store.add("More stuff3");
        store.add("More stuff4");
        store.add("More stuff5");
        store.add("More stuff6");
        ColumnConfig<String, String> column1 = new ColumnConfig<String, String>(new ValueProvider<String, String>() {
          @Override
          public String getPath() {
            return ".";
          }
          public String getValue(String object) {
            return object;
          }
          public void setValue(String object, String value) {
            //no-op
          }
        }, 200, "Only Column");
        List<ColumnConfig<String, ?>> list = new ArrayList<ColumnConfig<String,?>>();
        list.add(column1);
        ColumnModel<String> columns1 = new ColumnModel<String>(list);
    
    
        Viewport vp = new Viewport();
    
        HorizontalLayoutContainer hlc = new HorizontalLayoutContainer();
    
        //left grid region
        Grid<String> grid1 = new Grid<String>(store, columns1);
        hlc.add(grid1, new HorizontalLayoutData(200, 1));
    
        //right grid region
        VerticalLayoutContainer vlc = new VerticalLayoutContainer();
    
        ToolBar toolbar = new ToolBar();
        toolbar.add(new TextButton("button"));
        vlc.add(toolbar, new VerticalLayoutData(1, -1));
        
        Grid<String> grid2 = new Grid<String>(store, columns1);
        vlc.add(grid2, new VerticalLayoutData(1, 1));
    
        hlc.add(vlc, new HorizontalLayoutData(1, 1));
    
    
        vp.setWidget(hlc);
        RootPanel.get().add(vp);
      }
    
    }
    Only tested in 3.0.4 so far, will test 3.0.1 now, but neither HLC nor VLC has been modified since 3.0.1.

Thread Participants: 2