Hi,
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
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)
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
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
<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
<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>
<%@ 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>