Hybrid View

  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
    Vote Rating
    21
    Answers
    20
    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
    Vote Rating
    21
    Answers
    20
    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
    Vote Rating
    21
    Answers
    20
    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.

Thread Participants: 2