ColumnLayout and Mixed LayoutColumn Items

[conman]

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]

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]

Sweet as... That is exactly what I needed.