PDA

View Full Version : ColumnLayout and Mixed LayoutColumn Items



conman
Jul 09, 2008, 8:00 AM
Hi there,

Ha anyone been able to implement a fixed width for the LayoutColumn layout?

This creates two areas but with percentage widths and not fixed.



<ext:ColumnLayout ID="ColumnLayout1" runat="server">
<ext:LayoutColumn ColumnWidth="0.3" >
<ext:Panel ID="Panel3" runat="server" Border="false" Height="30">
<Content>
content1
</Content>
</ext:Panel>
</ext:LayoutColumn>
<ext:LayoutColumn ColumnWidth="0.7">
<ext:Panel ID="Panel4" runat="server" Border="false" Height="30">
<Content>
content 2
</Content>
</ext:Panel>
</ext:LayoutColumn>
</ext:ColumnLayout>


What I want to do is something like this:


<ext:ColumnLayout ID="ColumnLayout1" runat="server">
<ext:LayoutColumn Width="250" >
<ext:Panel ID="Panel3" runat="server" Border="false" Height="30">
<Content>
content1
</Content>
</ext:Panel>
</ext:LayoutColumn>
<ext:LayoutColumn ColumnWidth="1">
<ext:Panel ID="Panel4" runat="server" Border="false" Height="30">
<Content>
content 2
</Content>
</ext:Panel>
</ext:LayoutColumn>
</ext:ColumnLayout>


i.e. Have the first column have a fixed width of 250px and the other column fill the rest of the container.

At the moment Width is not a supported property for the LayoutColumn control. but ExtJS supports mixed layout settings. I am looking for a work around, so anyone with any ideas would be appreciated.

thanks,
Conor

Vladimir
Jul 09, 2008, 9:50 AM
Hi Conor,

If you need to use fixed width then please use Width property of LayoutColumn nested control:



<ext:ViewPort runat="server" ID="VP1">
<Content>
<ext:ColumnLayout ID="ColumnLayout1" runat="server">
<ext:LayoutColumn>
<ext:Panel ID="Panel3" runat="server" Height="30" Width="250">
<Content>
content1
</Content>
</ext:Panel>
</ext:LayoutColumn>
<ext:LayoutColumn ColumnWidth="0.9999">
<ext:Panel ID="Panel4" runat="server" Height="30">
<Content>
content 2
</Content>
</ext:Panel>
</ext:LayoutColumn>
</ext:ColumnLayout>
</Content>
</ext:ViewPort>


Please pay attention ColumnWidth value must be greater than 0 and less than 1 (this is ExtJs limitation)

I hope this will help

conman
Jul 09, 2008, 10:08 AM
Sweet as... That is exactly what I needed.