Layout issues

[rgraham]

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)
25303

[geoffrey.mcgill]

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.

[rgraham]

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.

[geoffrey.mcgill]

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.

[rgraham]

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.

[geoffrey.mcgill]

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/classic/Ext.layout.container.HBox.html

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

The Layouts and Container (https://docs.sencha.com/extjs/7.0.0/guides/core_concepts/layouts.html) 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 (https://docs.sencha.com/extjs/7.0.0/classic/Ext.layout.container.HBox.html#cfg-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.