<!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:button="urn:import:com.sencha.gxt.widget.core.client.button" xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:gxt="urn:import:com.sencha.gxt.widget.core.client"> <ui:with type="com.sencha.gxt.core.client.util.Margins" field="margins5"> <ui:attributes top="5" right="5" bottom="5" left="5" /> </ui:with> <ui:with type="com.sencha.gxt.core.client.util.Margins" field="margins0"> <ui:attributes top="0" right="0" bottom="0" left="0" /> </ui:with> <ui:with type="com.sencha.gxt.core.client.util.Margins" field="margins0500"> <ui:attributes top="0" right="5" bottom="0" left="0" /> </ui:with> <ui:with type="com.sencha.gxt.core.client.util.Padding" field="padding5"> <ui:attributes top="5" right="5" bottom="5" left="5" /> </ui:with> <ui:with type="com.sencha.gxt.widget.core.client.container.BorderLayoutContainer.BorderLayoutData" field="westData"> <ui:attributes size="150" margins="{margins5}" /> </ui:with> <ui:with type="com.sencha.gxt.widget.core.client.container.MarginData" field="centerData"> <ui:attributes margins="{margins5}" /> </ui:with> <ui:with type="com.sencha.gxt.widget.core.client.container.BoxLayoutContainer.BoxLayoutData" field="buttonBoxLayoutData"> <ui:attributes margins="{margins5}" flex="1" /> </ui:with> <ui:with type="com.sencha.gxt.widget.core.client.container.BoxLayoutContainer.BoxLayoutData" field="boxLayoutDataMargins0500"> <ui:attributes margins="{margins0500}" /> </ui:with> <ui:with type="com.sencha.gxt.widget.core.client.container.BoxLayoutContainer.BoxLayoutData" field="boxLayoutDataMargins0500Flex1"> <ui:attributes margins="{margins0500}" flex="1" /> </ui:with> <ui:with type="com.sencha.gxt.widget.core.client.container.BoxLayoutContainer.BoxLayoutData" field="boxLayoutDataMargins0"> <ui:attributes margins="{margins0}" /> </ui:with> <ui:with type="com.sencha.gxt.widget.core.client.container.BoxLayoutContainer.BoxLayoutData" field="boxLayoutDataMargins0Flex1"> <ui:attributes margins="{margins0}" flex="1" /> </ui:with> <ui:with type="com.sencha.gxt.widget.core.client.container.BoxLayoutContainer.BoxLayoutData" field="boxLayoutDataMargins0Flex3"> <ui:attributes margins="{margins0}" flex="3" /> </ui:with> <g:ScrollPanel styleName="margin-10"> <gxt:ContentPanel headingText="HorizontalBox Example" pixelSize="600, 500"> <container:BorderLayoutContainer> <container:west layoutData="{westData}"> <container:VBoxLayoutContainer ui:field="buttonBox" padding="{padding5}" vBoxLayoutAlign="STRETCH"> <container:child layoutData="{buttonBoxLayoutData}"> <button:ToggleButton ui:field="spaced" allowDepress="false" text="Spaced" /> </container:child> <container:child layoutData="{buttonBoxLayoutData}"> <button:ToggleButton ui:field="multiSpaced" allowDepress="false" text="Multi-Spaced" /> </container:child> <container:child layoutData="{buttonBoxLayoutData}"> <button:ToggleButton ui:field="alignTop" allowDepress="false" text="Align: top" /> </container:child> <container:child layoutData="{buttonBoxLayoutData}"> <button:ToggleButton ui:field="alignMiddle" allowDepress="false" text="Align: middle" /> </container:child> <container:child layoutData="{buttonBoxLayoutData}"> <button:ToggleButton ui:field="alignBottom" allowDepress="false" text="Align: bottom" /> </container:child> <container:child layoutData="{buttonBoxLayoutData}"> <button:ToggleButton ui:field="alignStretch" allowDepress="false" text="Align: stretch" /> </container:child> <container:child layoutData="{buttonBoxLayoutData}"> <button:ToggleButton ui:field="alignStretchMax" allowDepress="false" text="Align: stretchmax" /> </container:child> <container:child layoutData="{buttonBoxLayoutData}"> <button:ToggleButton ui:field="flexAllEven" allowDepress="false" text="Flex: All even" /> </container:child> <container:child layoutData="{buttonBoxLayoutData}"> <button:ToggleButton ui:field="flexRatio" allowDepress="false" text="Flex: ratio" /> </container:child> <container:child layoutData="{buttonBoxLayoutData}"> <button:ToggleButton ui:field="flexStretch" allowDepress="false" text="Flex + Stretch" /> </container:child> <container:child layoutData="{buttonBoxLayoutData}"> <button:ToggleButton ui:field="packStart" allowDepress="false" text="Pack: start" /> </container:child> <container:child layoutData="{buttonBoxLayoutData}"> <button:ToggleButton ui:field="packCenter" allowDepress="false" text="Pack: center" /> </container:child> <container:child layoutData="{buttonBoxLayoutData}"> <button:ToggleButton ui:field="packEnd" allowDepress="false" text="Pack: end" /> </container:child> </container:VBoxLayoutContainer> </container:west> <container:center layoutData="{centerData}"> <gxt:ContentPanel headerVisible="false"> <container:CardLayoutContainer ui:field="layout"> <g:HTML> <p style="padding:10px;color:#556677;font-size:11px;">Select a configuration on the left</p> </g:HTML> <!-- Spaced --> <container:HBoxLayoutContainer padding="{padding5}" hBoxLayoutAlign="TOP"> <container:child layoutData="{boxLayoutDataMargins0500}"> <button:TextButton text="Button 1" /> </container:child> <container:child layoutData="{boxLayoutDataMargins0500Flex1}"> <g:Label /> </container:child> <container:child layoutData="{boxLayoutDataMargins0500}"> <button:TextButton text="Button 2" /> </container:child> <container:child layoutData="{boxLayoutDataMargins0500}"> <button:TextButton text="Button 3" /> </container:child> <container:child layoutData="{boxLayoutDataMargins0}"> <button:TextButton text="Button 4" /> </container:child> </container:HBoxLayoutContainer> <!-- Multi-Spaced --> <container:HBoxLayoutContainer padding="{padding5}" hBoxLayoutAlign="TOP"> <container:child layoutData="{boxLayoutDataMargins0500}"> <button:TextButton text="Button 1" /> </container:child> <container:child layoutData="{boxLayoutDataMargins0500Flex1}"> <g:Label /> </container:child> <container:child layoutData="{boxLayoutDataMargins0500}"> <button:TextButton text="Button 2" /> </container:child> <container:child layoutData="{boxLayoutDataMargins0500Flex1}"> <g:Label /> </container:child> <container:child layoutData="{boxLayoutDataMargins0500}"> <button:TextButton text="Button 3" /> </container:child> <container:child layoutData="{boxLayoutDataMargins0500Flex1}"> <g:Label /> </container:child> <container:child layoutData="{boxLayoutDataMargins0}"> <button:TextButton text="Button 4" /> </container:child> </container:HBoxLayoutContainer> <!-- Align: top --> <container:HBoxLayoutContainer padding="{padding5}" hBoxLayoutAlign="TOP"> <container:child layoutData="{boxLayoutDataMargins0500}"> <button:TextButton text="Button 1" /> </container:child> <container:child layoutData="{boxLayoutDataMargins0500}"> <button:TextButton text="Button 2" /> </container:child> <container:child layoutData="{boxLayoutDataMargins0500}"> <button:TextButton text="Button 3" /> </container:child> <container:child layoutData="{boxLayoutDataMargins0}"> <button:TextButton text="Button 4" /> </container:child> </container:HBoxLayoutContainer> <!-- Align: middle --> <container:HBoxLayoutContainer padding="{padding5}" hBoxLayoutAlign="MIDDLE"> <container:child layoutData="{boxLayoutDataMargins0500}"> <button:TextButton text="Button 1" /> </container:child> <container:child layoutData="{boxLayoutDataMargins0500}"> <button:TextButton text="Button 2" /> </container:child> <container:child layoutData="{boxLayoutDataMargins0500}"> <button:TextButton text="Button 3" /> </container:child> <container:child layoutData="{boxLayoutDataMargins0}"> <button:TextButton text="Button 4" /> </container:child> </container:HBoxLayoutContainer> <!-- Align: bottom --> <container:HBoxLayoutContainer padding="{padding5}" hBoxLayoutAlign="BOTTOM"> <container:child layoutData="{boxLayoutDataMargins0500}"> <button:TextButton text="Button 1" /> </container:child> <container:child layoutData="{boxLayoutDataMargins0500}"> <button:TextButton text="Button 2" /> </container:child> <container:child layoutData="{boxLayoutDataMargins0500}"> <button:TextButton text="Button 3" /> </container:child> <container:child layoutData="{boxLayoutDataMargins0}"> <button:TextButton text="Button 4" /> </container:child> </container:HBoxLayoutContainer> <!-- Align: stretch --> <container:HBoxLayoutContainer padding="{padding5}" hBoxLayoutAlign="STRETCH"> <container:child layoutData="{boxLayoutDataMargins0500}"> <button:TextButton text="Button 1" /> </container:child> <container:child layoutData="{boxLayoutDataMargins0500}"> <button:TextButton text="Button 2" /> </container:child> <container:child layoutData="{boxLayoutDataMargins0500}"> <button:TextButton text="Button 3" /> </container:child> <container:child layoutData="{boxLayoutDataMargins0}"> <button:TextButton text="Button 4" /> </container:child> </container:HBoxLayoutContainer> <!-- Align: stretchmax --> <container:HBoxLayoutContainer padding="{padding5}" hBoxLayoutAlign="STRETCHMAX"> <container:child layoutData="{boxLayoutDataMargins0500}"> <button:TextButton text="Button 1" /> </container:child> <container:child layoutData="{boxLayoutDataMargins0500}"> <button:TextButton text="Button 2" /> </container:child> <container:child layoutData="{boxLayoutDataMargins0500}"> <button:TextButton text="Button 3" /> </container:child> <container:child layoutData="{boxLayoutDataMargins0}"> <button:TextButton text="Button 4" /> </container:child> </container:HBoxLayoutContainer> <!-- Flex: All even --> <container:HBoxLayoutContainer padding="{padding5}" hBoxLayoutAlign="MIDDLE"> <container:child layoutData="{boxLayoutDataMargins0500Flex1}"> <button:TextButton text="Button 1" /> </container:child> <container:child layoutData="{boxLayoutDataMargins0500Flex1}"> <button:TextButton text="Button 2" /> </container:child> <container:child layoutData="{boxLayoutDataMargins0500Flex1}"> <button:TextButton text="Button 3" /> </container:child> <container:child layoutData="{boxLayoutDataMargins0Flex1}"> <button:TextButton text="Button 4" /> </container:child> </container:HBoxLayoutContainer> <!-- Flex: ratio --> <container:HBoxLayoutContainer padding="{padding5}" hBoxLayoutAlign="MIDDLE"> <container:child layoutData="{boxLayoutDataMargins0500Flex1}"> <button:TextButton text="Button 1" /> </container:child> <container:child layoutData="{boxLayoutDataMargins0500Flex1}"> <button:TextButton text="Button 2" /> </container:child> <container:child layoutData="{boxLayoutDataMargins0500Flex1}"> <button:TextButton text="Button 3" /> </container:child> <container:child layoutData="{boxLayoutDataMargins0Flex3}"> <button:TextButton text="Button 4" /> </container:child> </container:HBoxLayoutContainer> <!-- Flex + Stretch --> <container:HBoxLayoutContainer padding="{padding5}" hBoxLayoutAlign="STRETCH"> <container:child layoutData="{boxLayoutDataMargins0500Flex1}"> <button:TextButton text="Button 1" /> </container:child> <container:child layoutData="{boxLayoutDataMargins0500Flex1}"> <button:TextButton text="Button 2" /> </container:child> <container:child layoutData="{boxLayoutDataMargins0500Flex1}"> <button:TextButton text="Button 3" /> </container:child> <container:child layoutData="{boxLayoutDataMargins0Flex3}"> <button:TextButton text="Button 4" /> </container:child> </container:HBoxLayoutContainer> <!-- Pack: start --> <container:HBoxLayoutContainer padding="{padding5}" hBoxLayoutAlign="MIDDLE" pack="START"> <container:child layoutData="{boxLayoutDataMargins0500}"> <button:TextButton text="Button 1" /> </container:child> <container:child layoutData="{boxLayoutDataMargins0500}"> <button:TextButton text="Button 2" /> </container:child> <container:child layoutData="{boxLayoutDataMargins0500}"> <button:TextButton text="Button 3" /> </container:child> <container:child layoutData="{boxLayoutDataMargins0}"> <button:TextButton text="Button 4" /> </container:child> </container:HBoxLayoutContainer> <!-- Pack: center --> <container:HBoxLayoutContainer padding="{padding5}" hBoxLayoutAlign="MIDDLE" pack="CENTER"> <container:child layoutData="{boxLayoutDataMargins0500}"> <button:ToggleButton text="Button 1" /> </container:child> <container:child layoutData="{boxLayoutDataMargins0500}"> <button:ToggleButton text="Button 2" /> </container:child> <container:child layoutData="{boxLayoutDataMargins0500}"> <button:ToggleButton text="Button 3" /> </container:child> <container:child layoutData="{boxLayoutDataMargins0}"> <button:ToggleButton text="Button 4" /> </container:child> </container:HBoxLayoutContainer> <!-- Pack: end --> <container:HBoxLayoutContainer padding="{padding5}" hBoxLayoutAlign="MIDDLE" pack="END"> <container:child layoutData="{boxLayoutDataMargins0500}"> <button:TextButton text="Button 1" /> </container:child> <container:child layoutData="{boxLayoutDataMargins0500}"> <button:TextButton text="Button 2" /> </container:child> <container:child layoutData="{boxLayoutDataMargins0500}"> <button:TextButton text="Button 3" /> </container:child> <container:child layoutData="{boxLayoutDataMargins0}"> <button:TextButton text="Button 4" /> </container:child> </container:HBoxLayoutContainer> </container:CardLayoutContainer> </gxt:ContentPanel> </container:center> </container:BorderLayoutContainer> </gxt:ContentPanel> </g:ScrollPanel> </ui:UiBinder>