Layout issues

  1. #1

    Layout issues

    So thanks for your help so far. Another developer fixed the issue I reported earlier with Accordion panel, it was apparently an issue with some JavaScript.

    Now I have a large number of aspx pages that are displayed as popup dialogs, and I am baffled by the layout in ext:panel --> ext:FormPanel --> ext:Fieldset --> ext:fieldContainer.

    How to set position of elements? I don't even understand how it was working in Ext.Net 2.5 which we are migrating from.

    Here is a sample of markup that is displayed quite differently in 2.5 vs 5.

    <ext:FieldSet runat="server" Title="Transfer From" Padding="2" Layout="ColumnLayout">
    									<Items>
    										<ext:FieldContainer
    											runat="server"
    											Layout="HBoxLayout" Cls="note" ID="ctl5582" BodyPadding="-50">
    											<FieldDefaults LabelAlign="Right" LabelWidth="90" />
    											<Items>
    												<ext:Hidden runat="server" ID="txtUNIQ_KEY_FROM" Name="UNIQ_KEY_FROM" DataIndex="UNIQ_KEY_FROM" />
    												<ext:TextField runat="server" ID="txtPartnoFrom" ReadOnly="true" Name="PART_NO_FROM" DataIndex="PART_NO_FROM" FieldCls="tbackground" FieldLabel="Part No" Margins="0 0 0 5" Width="320" />
    												<ext:TextField runat="server" ID="txtRevFrom" Name="REVISION_FROM" ReadOnly="true" DataIndex="REVISION_FROM" FieldCls="tbackground" FieldLabel="Revision" Margins="0 0 0 0" Width="155" />
    												<ext:TextField runat="server" ID="txtDescriptionFrom" ReadOnly="true" Name="DESCRIPT_FROM" DataIndex="DESCRIPT_FROM" FieldCls="tbackground" FieldLabel="Description" Margins="0 0 0 5" Width="500" />
    											</Items>
    										</ext:FieldContainer>
    										<ext:FieldContainer
    											runat="server"
    											BodyPadding="0"
    											Layout="HBoxLayout" ID="ctl5588aml" Cls="note">
    											<FieldDefaults LabelAlign="Right" LabelWidth="90" />
    											<Items>
    												<%--<ext:Button runat="server" ID="btnCreateMPN" Width="40" Text="MPN" Margins="0 0 0 5">
    													<Listeners>
    
    													</Listeners>
    
    
    												</ext:Button>--%>
                                                    <ext:HyperlinkButton runat="server" Text="MPN" Margins="0 30 0 60">
                                                        <Listeners>
                                                            <Click Handler="#{PartId}.setValue(#{txtUNIQ_KEY_FROM}.getValue()); #{txtPartNo}.setValue(#{txtPartnoFrom}.getValue()); #{txtMode}.setValue('From'); #{winMNPlookup}.show();" />
                                                        </Listeners>
                                                    </ext:HyperlinkButton>
    												<ext:TextField ID="txtMFGR_FROM" runat="server" Name="MFGR_FROM" DataIndex="MFGR_FROM" LabelWidth="10" FieldCls="tbackground" ReadOnly="true" Width="125" Margins="0 0 0 5" />
    												<ext:TextField ID="txtMFGR_PART_NO_FROM" runat="server" Name="MFGR_PART_NO_FROM" FieldCls="tbackground" ReadOnly="true" DataIndex="MFGR_PART_NO_FROM" Width="250" Margins="0 0 0 5" />
    												<ext:TextField ID="txtStdCostFrom" runat="server" Name="STDCOST_FROM" FieldCls="tbackground" DataIndex="STDCOST_FROM" ReadOnly="true" FieldLabel="Std Cost" Width="200" Margins="0 0 0 5" />
    												<ext:TextField ID="txtLocationFrom" runat="server" Name="LOCATION_FROM" FieldCls="tbackground" DataIndex="LOCATION_FROM" ReadOnly="true" FieldLabel="Location" Width="300" Margins="0 0 0 0" />
    
    											</Items>
    										</ext:FieldContainer>
    									</Items>
    								</ext:FieldSet>
    It displays like this in 2.5 (top) vs 5 (lower)
    Click image for larger version. 

Name:	Bad Ext layout.jpg 
Views:	108 
Size:	99.5 KB 
ID:	25303
  2. #2
    Hello. The components use the Layout property, and there are many different Layout options. The Examples Explorer has many layout samples.

    https://examples5.ext.net/#/search/layout

    Hope this helps.
    Geoffrey McGill
    Founder
  3. #3
    Could anyone tell me how to align things to the right, such as in a panel in a TableLayout parent? This ought to be stupid easy, but it really isn't.
  4. #4
    Maybe an HBoxLayout like the following would help? The Flex property is also very helpful for positioning and proportional positioning.

    <ext:Panel runat="server"
        Layout="HBoxLayout">
        <Items>
            <ext:Container runat="server" Flex="1" />
            <ext:Button runat="server" Text="Submit" />
        </Items>
    </ext:Panel>
    Here are some other HBoxLayout samples:
    https://examples5.ext.net/#/search/hbox

    Hope this helps.
  5. #5
    Thank you for the reply. Still upset with the lack of documentation. What is an hboxlayout? What rules does it apply? What does Flex do? Examples are all good, but not without an explanation of what the components are actually defined to *do*.

    This leaves a developer new to EXT having to do trial and error testing to see what the various effects are. I'm coming from a background mostly in Kendo.

    Thanks.
  6. #6
    We're working to improve the API documentation, Tutorial, and Guides for the upcoming Ext.NET 6.0 release (ASP.NET Core 3), but for now, the Ext JS documentation is very helpful.

    HBoxLayout:
    https://docs.sencha.com/extjs/7.0.0/...iner.HBox.html

    The Flex property is available on all Components
    https://docs.sencha.com/extjs/7.0.0/....html#cfg-flex

    The Layouts and Container guide should also provide some insight. Of course, these guides and API docs are focused on the .js library side, but all the properties and class have a matching member in C# Ext.NET.

    Another option for right alignment would be using the Pack property.

    Example
    <ext:Panel    runat="server"
        Layout="HBoxLayout">
        <LayoutConfig>
            <ext:HBoxLayoutConfig Pack="End" />
        </LayoutConfig>
        <Items>
            <ext:Button runat="server" Text="Submit" />
        </Items>
    </ext:Panel>
    Hope this helps.
    Geoffrey McGill
    Founder

Similar Threads

  1. [CLOSED] Layout issues
    By Daly_AF in forum 2.x Legacy Premium Help
    Replies: 9
    Last Post: Aug 03, 2012, 1:04 PM
  2. Layout issues with input fields
    By Viktor Reiser in forum 1.x Help
    Replies: 1
    Last Post: May 18, 2012, 6:22 PM
  3. [CLOSED] More Layout Issues
    By FAS in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Mar 27, 2012, 7:20 PM
  4. [CLOSED] Layout issues
    By sadaf in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Nov 25, 2010, 2:25 PM
  5. [CLOSED] [1.0] Having layout issues in ie8 only
    By ashton.lamont in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Jan 18, 2010, 5:18 AM

Posting Permissions