[CLOSED] Request for documentation/tutorials: Layout explanation required

Hey!

I think that there is a real need for a hands-on, practical tutorial or hands-on documentation on "best practices" when it comes to layout.

The biggest problem I have with ext.net is to understand how and when to use the different layout controls. As of now its almost pure "trial and error" when trying to layout simple things and it gets really messy when I have my own UserControls involved.

I have made several posts with questions on different layout problems, and I have also read others who doesnt really get how and when to use a certain layout control.

This thread is a good example of that problem:
http://forums.ext.net/showthread.php...t=UserControls
See escpecially post #7. How on earth are you supposed to understand and know that?

There are others similar posts.

Example on questions:
when do you use FormPanel and not <ext:Panel Layout="Form"...>?
What is the best practice if you are creating your own UserControls and want that UserControl to "autofit" its containing control (width, height or both)?
When do use RowLayout, and why use RowLayout when you can just add <Panel ...> after each other?
What is the difference between Panel and Container? When do I use what? Why?
On custom/self-made UserControls - how do I make then behave like other Controls so that they get for example the "FieldLabel" property? What do I inherit? Is there some info/tutorial/docs that explain how I make my UserControl "intergrate" with other stuff better?

There are many many more questions. The examples.ext.net is a good resource, but there need to be a lot more examples and some understandable tutorials, explanations and best-practies that one can use.

Right now I think Im spending about 90% of my time trying to get basic layouts correct.

Thanks =)

Hi,

First, please investigate ExtJS docs, that documentation contains many useful information
http://dev.sencha.com/deploy/dev/docs/

Quote:

---

See escpecially post #7. Howi on earth are you supposed to understand and know that?
1. Remove AutoHeight="true" for GridPanel if you need to fit it.
2. Wrap GridPanel in FitLayout
3. Flex="1" doesn't make sense with Layout="row". Two ways:
3.1. Replace Flex="1" with RowHeight="0.5" for two panels.
or
3.2. Replace Layout="row" with Layout="VBoxLayout" and leaves Flex="1" for panels. Also set <LayoutConfig> with Align="Strech".

---

1. AutoHeight cannot be used if parent control has Fit or VBox because those layout manage the height of inner items (autoheight assumes that a widget set height depends from widget's content (really, it is just css rule 'height:auto')). As you can understand, fit size and autoheight are really incompatible options
2. If you need to fit a widget then use Fit layout. Just placing inside Content will not fit the widget (please always use Items instead Content, Content should be used for pure html or none Ext.Net controls, Ext.Net widgets inside Items collection can participate in layout logic)
3. Flex is option for box layouts (VBox or HBox), RowHeight for RowLayout. Read docs about it

Quote:

---

when do you use FormPanel and not <ext:Panel Layout="Form"...>?

---

FormPanel must be used if you need to load (you can bind a record from a store to form fields), validate (form can validate all inner fields and fire event) or submit inner fields (inner fields can be submitted to server, please note that if there is asp.net form then form panel doesn't generate own form tag)
Please see http://dev.sencha.com/deploy/dev/doc...form.FormPanel
Layout="Form" is just specification how to place inner items (layout is just specification how need to place and resize inner items, also layout can specify required ui). Layout=Form has no FormPanel functionality
Please see http://dev.sencha.com/deploy/dev/doc...out.FormLayout

Quote:

---

What is the best practice if you are creating your own UserControls and want that UserControl to "autofit" its containing control (width, height or both)?

---

Just wrap code in the user control by Fit layout control

Quote:

---

<ext:FitLayout runat="server">
<Items>
//Here should be ext.net widget
</Items>
</ext:FitLayout>

---

After that just place that user control inside Content area of Ext.Net container

Code:

---

<ext:Panel ...>
    <Content>
        <uc1:MyUserControl ... />
  </Content>
</ext:Panel>

---

Quote:

---

When do use RowLayout, and why use RowLayout when you can just add <Panel ...> after each other?

---

RowLayout can set relative height for an item (for example, RowHeight="0.5" means occupie 50% of free height)
Please see https://examples1.ext.net/#/Layout/RowLayout/Basic/

Quote:

---

What is the difference between Panel and Container? When do I use what? Why?

---

Panel is more powerful container which can contain header, toolbars, footer and buttons. Also panel, can be collapsible/expandable. Container has no such functionality and should be used if you need simple container for items
Please see
http://dev.sencha.com/deploy/dev/docs/?class=Ext.Panel
http://dev.sencha.com/deploy/dev/doc...=Ext.Container

Quote:

---

On custom/self-made UserControls - how do I make then behave like other Controls so that they get for example the "FieldLabel" property?

---

FieldLabel must be used inside FormLayout only (or if ext.net widget is outside any layout). What you mean 'other controls'? It can be used with Ext.Net components only (or inheritors). Here a note from ExtJS docs

Quote:

---

fieldLabel : String
The label text to display next to this Component (defaults to '').

Note: this config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form').

---

Quote:

---

What do I inherit? Is there some info/tutorial/docs that explain how I make my UserControl "intergrate" with other stuff better?

---

What you mean about integration? It is very common question, please provide details

Hey!

Well, I have looked at those docs, but I find them pretty uninformative. Reading those docs helps me almost nothing when it comes to figuring out how to layout stuff, what properties does what, when to use them, which ones work for a particular control and which ones that dont etc.

Many stuff are not in the docs either since they are not part of Sencha (as I have been told a few times).

There are many things I could say and ask about as a follow up to all what you answered, but I guess a separate thread for each one is in place if I feel something should be discussed more.

But a few points here:

Quote:

---

FieldLabel must be used inside FormLayout only

---

Well, how do I make my own custom Usercontrol have the property "FieldLabel" as other ext controls have (inside a Form layout)?

Quote:

---

What you mean about integration? It is very common question, please provide details

---

I mean something along the lines of my own custom usercontrols. I want to be able to have my own usercontrols use layouts as the ext controls do. So that is what I mean with integrating my own controls - make them behave more like "native" ext controls

Lastly; the point of just wrapping the UserControl inside a Fitlayout:

I am attaching a zip-file that contains default.aspx and a simple usercontrol. The userControl consists of 3 ComboBoxes that I want to expand if I expand containing Container (like a Window). I want toe comboboxes to take up the space as described in ColumnWidth, for example:

Code:

---

<ext:LayoutColumn ColumnWidth="0.30">

---

which I would think means that that column should take 30% of the space. Well, it doesnt. try to resize the window in the example, and you'll see that it doesnt work. I have tried "autowidth" back and forth but to no avail. Please advice.

Attachment 2578

Quote:

---

Originally Posted by wagger

Well, how do I make my own custom Usercontrol have the property "FieldLabel" as other ext controls have (inside a Form layout)?

---

Any Control which inherits from the Field class will include a "FieldLabel" property.

Hi,

Quote:

---

Well, I have looked at those docs, but I find them pretty uninformative. Reading those docs helps me almost nothing when it comes to figuring out how to layout stuff, what properties does what, when to use them, which ones work for a particular control and which ones that dont etc.

---

Well, I am not sure what another information do you need. Each layout has text description about own functionality (what exactly layout do with items), each property has description also with indication if the property must be applied to child items, examples explorer has examples usages. Can you provide what another information do you required and I will provide that info

Quote:

---

Well, how do I make my own custom Usercontrol have the property "FieldLabel" as other ext controls have (inside a Form layout)?

---

Your control must inherits from Field class (server side), if you have client side custom logic then it makes a sense to create client side class for own field.
Ext.Net classes are good examples how to extend existing widgets (creating client side class requires ExtJS expirience)

Quote:

---

Lastly; the point of just wrapping the UserControl inside a Fitlayout:

I am attaching a zip-file that contains default.aspx and a simple usercontrol. The userControl consists of 3 ComboBoxes that I want to expand if I expand containing Container (like a Window). I want toe comboboxes to take up the space as described in ColumnWidth, for example:

<ext:LayoutColumn ColumnWidth="0.30">
which I would think means that that column should take 30% of the space. Well, it doesnt. try to resize the window in the example, and you'll see that it doesnt work. I have tried "autowidth" back and forth but to no avail. Please advice.

---

First, do not use AutoWidth for widgets inside container with layout. Here is a note from ExtJS docs

Quote:

---

True to use width:'auto', false to use fixed width (or allow it to be managed by its parent Container's layout manager. Defaults to false.
Note: Although many components inherit this config option, not all will function as expected with a width of 'auto'. Setting autoWidth:true means that the browser will manage width based on the element's contents, and that Ext will not manage it at all.
If the browser is managing the width, be aware that resizes performed by the browser in response to changes within the structure of the Component cannot be detected. Therefore changes to the width might result in elements needing to be synchronized with the new width.

---

Your sample has few design errors:
- DefaultExt.aspx: as I mentioned before, if you wrap user control by layout control then you have to place it to Ext.Net container Content area because layout is managed by Ext.Net container

- Default.aspx:
- Why do use Layout="Fit" and RowLayout control for the Window. Only one layout can be use, Layout property is just short way to define type of layout (if you need to specify layout properties then use LayoutConfig property)
- Why do use RowLayout in this case. As I understood, you need to fit free space of the window by Panel_BookingCreate_Field_Address_From. Isn't it? If yes then need to use VBox layout and specify Flex property

Code:

---

<ext:Window ...>
  <LayoutConfig>
        <ext:VBoxLayoutConfig Align="Stretch" />
  </LayoutConfig>
  <Items>
        <ext:Label ID="Label1" runat="server" Text="Ange från-adress"></ext:Label>
        <ext:Panel ID="Panel_BookingCreate_Field_Address_From" runat="server" Flex="1" Border="false">
              <Content>
                    <CP:Address ID="Field_Address_From" runat="server" />
              </Content>
        </ext:Panel>
  </Items>
</ext:Window>

---

I decided that RowLayout is wrong because the user control uses FitLayout, that layout requires that the container must have own size (otherwise how fit layout can fit inner item if there is no size for container)

- Address.ascx:
- You place Panel1 to the FitLayout control therefore don't set AutoWidth="true" for the panel (size is managed by layout logic)
- Do not use MonitorResize="true" AutoWidth="true" for widgets inside container with layout (layout manages it itself)
- please use Items instead Content for Ext.Net widgets
- Use Layout property instead layout control. The single case (where layout control is required) is wrapping user control or ContentPlaceHolder
- use Layout="Form" or Layout="Anchror" for panels which have comboboxes and set AnchorHorizontal="100%" for comboboxes to fit comboboxes by horizontal

Code:

---

<ext:Window
        ID="Window_QuickAddress"
        runat="server"
        Icon="New"
        Title="Skapa ny snabbadress"
        Hidden="false"
        Width="400"
        Height="300"
        Modal="true"
        Padding="0">
        <LayoutConfig>
            <ext:VBoxLayoutConfig Align="Stretch" />
        </LayoutConfig>
        <Items>
            <ext:Container runat="server">
                <Items>
                    <ext:Label ID="Label1" runat="server" Text="Ange från-adress"></ext:Label>
                </Items>
            </ext:Container>
           
            <ext:Panel ID="Panel_BookingCreate_Field_Address_From" runat="server" Border="false" Flex="1">
                <Content>
                    <CP:Address ID="Field_Address_From" runat="server" />
                </Content>
            </ext:Panel>
        </Items>
    </ext:Window>

---

Code:

---

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Address.ascx.cs" Inherits="Test.Address" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<ext:FitLayout runat="server">
    <Items>
        <ext:Panel ID="Panel1" runat="server" Border="false">
            <LayoutConfig>
                <ext:ColumnLayoutConfig Split="true" FitHeight="true" Margin="5" />
            </LayoutConfig>
           
            <Items>
                <ext:Panel ID="Panel2" runat="server" Border="false" ColumnWidth="0.30" Layout="Anchor">
                    <Items>
                        <ext:ComboBox runat="server"
                            EmptyText="Inget område valt"
                            Icon="ShapeHandles"
                            ID="Field_Address_ComboBox_Area"
                            DisplayField="AreaName"
                            ValueField="AreaId"
                            TypeAhead = "false"
                            HideTrigger = "false"
                            EnableKeyEvents = "true"
                            MinChars = "2"
                            LoadingText="Söker..."
                            AnchorHorizontal="100%">
                            <Store>
                                <ext:Store ID="Field_Address_Store_Area" runat="server" AutoLoad="false" OnRefreshData="Field_Address_Store_Area_Refresh">
                                    <Proxy>
                                        <ext:PageProxy />
                                    </Proxy>
                                    <Reader>
                                        <ext:ArrayReader>
                                            <Fields>
                                                <ext:RecordField Name="AreaId" />
                                                <ext:RecordField Name="AreaName" />
                                            </Fields>
                                        </ext:ArrayReader>
                                    </Reader>
                                </ext:Store>
                            </Store>
                            <Listeners>
                                <Blur Fn="checkValueArea" />
                                <Select Fn="checkValueArea" />
                                <Focus Fn="searching" />
                            </Listeners>
                        </ext:ComboBox>
                    </Items>
                </ext:Panel>
               
                <ext:Panel ID="Panel3" runat="server" Border="false" ColumnWidth="0.42" Layout="Anchor">
                    <Items>
                        <ext:ComboBox runat="server" EmptyText="Ingen väg vald"
                            ID="Field_Address_ComboBox_Road"
                            DisplayField="RoadName"
                            ValueField="RoadName"
                            TypeAhead = "false"
                            HideTrigger = "false"
                            EnableKeyEvents = "true"
                            MinChars = "1"
                            LoadingText="Söker..."
                            ForceSelection="false"
                            Disabled="true"
                            AnchorHorizontal="100%">
                            <Store>
                                <ext:Store ID="Field_Address_Store_Road" runat="server" AutoLoad="false" OnRefreshData="Field_Address_Store_Road_Refresh">
                            <Proxy>
                                <ext:PageProxy />
                            </Proxy>
                            <Reader>
                                <ext:ArrayReader>
                                    <Fields>
                                        <ext:RecordField Name="RoadName" />
                                    </Fields>
                                </ext:ArrayReader>
                            </Reader>
                        </ext:Store>
                            </Store>
                            <Listeners>
                                <Blur Fn="checkValueRoad" />
                                <Select Fn="checkValueRoad" />
                                <KeyUp Fn="searching" />
                            </Listeners>
                        </ext:ComboBox>
                    </Items>
                </ext:Panel>
               
                <ext:Panel ID="Panel4" runat="server" Border="true" ColumnWidth="0.22" Layout="Anchor">
                    <Items>
                        <ext:ComboBox runat="server" EmptyText="Inget nr valt" IconCls="flag_green"
                            ID="Field_Address_ComboBox_Number"
                            DisplayField="AddressName"
                            ValueField="AddressId"
                            TypeAhead = "false"
                            HideTrigger = "false"
                            EnableKeyEvents = "true"
                            MinChars = "1"
                            LoadingText="Söker..."
                            ForceSelection="false"
                            Disabled="true"
                            AnchorHorizontal="100%">
                            <Store>
                                <ext:Store ID="Field_Address_Store_Address" runat="server" AutoLoad="false" OnRefreshData="Field_Address_Store_Address_Refresh">
                                    <Proxy>
                                        <ext:PageProxy />
                                    </Proxy>
                                    <Reader>
                                        <ext:ArrayReader>
                                            <Fields>
                                                <ext:RecordField Name="AddressId" />
                                                <ext:RecordField Name="AddressName" />
                                            </Fields>
                                        </ext:ArrayReader>
                                    </Reader>
                                </ext:Store>
                            </Store>
                            <Listeners>
                                <Blur Handler="#{DirectMethods}.SetSelectedAddress(this.getValue());" />
                                <KeyUp Fn="searching" />
                            </Listeners>
                        </ext:ComboBox>
                    </Items>
                </ext:Panel>
               
                <ext:Container runat="server" ColumnWidth="0.04">
                    <Items>
                        <ext:Button ID="Field_Address_Icon" Icon="BulletTick" runat="server" StandOut="true" Hidden="true" >
                        </ext:Button>
                    </Items>
                </ext:Container>
            </Items>
        </ext:Panel>
    </Items>
</ext:FitLayout>

---