[CLOSED] Multiselect setHeight/Width Problem

[softmachine2011]

Hi,

I'm trying to use setHeight and setWidth method from a multiselect but it doesn't resize well.
It only resize box border width.

Multiselect is inside a userControl that is loaded like a partial view inside a panel from a window.

The user control where multiselect is embeded is like these:

<ext:Panel ID="pnlTableLayout" runat="server" Border="false" LabelAlign="Top"
    IDMode="Explicit" Layout="HBox" MonitorResize="true">
    <Content>
        <script runat="server">       
            protected void Page_Load(object sender, EventArgs e)
            {
                this.dsFiltroCadena.DataBind();
            }
        </script>
        <script type="text/javascript">
            Ext.onReady(
                function () {
                    Millenium.Controls.Filtro.onAgregarCampo = Millenium.Controls.Filtro.General.seleccionarListaValores;
                    Millenium.Controls.Filtro.onFiltroResize = Millenium.Controls.Filtro.General.onResize;
                    Millenium.Controls.Filtro.General.condicionChanged();
                }
            );
        </script>
        <ext:Store ID="dsFiltroCadena" runat="server" DataSource="<%# Model.ToList() %>">
            <Reader>
                <ext:JsonReader>
                    <Fields>
                        <ext:RecordField Name="Condicion" Type="String" />
                        <ext:RecordField Name="Valores" />
                    </Fields>
                </ext:JsonReader>
            </Reader>
            <Listeners>
                <Load Fn="Millenium.Controls.Filtro.General.storeLoaded" />
            </Listeners>
        </ext:Store>
    </Content>
    <Defaults>
        <ext:Parameter Name="margins" Value="0 15 0 0" Mode="Value" />
    </Defaults>
    <Items>
        <ext:Panel runat="server" Border="false" ButtonAlign="Right" Width="180">
            <Items>
                <ext:ComboBox ID="cmbCondicion" runat="server" Editable="false" FieldLabel="<%$ AppRecursos : sm_txt_condicion %>"
                    ForceSelection="false" Width="160">
                    <Items>
                        <ext:ListItem Text="<%$ AppRecursos : sm_txt_igualQue %>" Value="0" />
                        <ext:ListItem Text="<%$ AppRecursos : sm_txt_diferenteQue %>" Value="1" />
                        <ext:ListItem Text="<%$ AppRecursos : sm_txt_mayorOIgualQue %>" Value="2" />
                        <ext:ListItem Text="<%$ AppRecursos : sm_txt_mayorQue %>" Value="3" />
                        <ext:ListItem Text="<%$ AppRecursos : sm_txt_menorQue %>" Value="4" />
                        <ext:ListItem Text="<%$ AppRecursos : sm_txt_menorOIgualQue %>" Value="5" />
                        <ext:ListItem Text="<%$ AppRecursos : sm_txt_empiezaPor %>" Value="6" />
                        <ext:ListItem Text="<%$ AppRecursos : sm_txt_estaEntre %>" Value="7" />
                        <ext:ListItem Text="<%$ AppRecursos : sm_txt_estaEnLista %>" Value="8" />
                    </Items>
                    <Listeners>
                        <Select Fn="Millenium.Controls.Filtro.General.condicionChanged" />
                    </Listeners>
                </ext:ComboBox>
                <ext:TextField ID="txtNuevoValor" runat="server" FieldLabel="<%$ AppRecursos : sm_txt_nuevoValor %>"
                    Width="160" Hidden="true" />
            </Items>
            <Buttons>
                <ext:Button ID="btnEliminarValor" runat="server" IconCls="arrowLeft-icon" Hidden="true">
                    <Listeners>
                        <Click Fn="Millenium.Controls.Filtro.General.removeValueFromList" />
                    </Listeners>
                </ext:Button>
                <ext:Button ID="btnAgregarValor" runat="server" IconCls="arrowRight-icon" Hidden="true">
                    <Listeners>
                        <Click Fn="Millenium.Controls.Filtro.General.addValueToList" />
                    </Listeners>
                </ext:Button>
            </Buttons>
        </ext:Panel>

        <ext:Panel runat="server" Border="false">
            <Items>
                <ext:TextField ID="txtValor" runat="server" FieldLabel="<%$ AppRecursos : sm_txt_valor %>"
                    Width="140" Hidden="true" />
                <ext:TextField ID="txtValorInicial" runat="server" FieldLabel="<%$ AppRecursos : sm_txt_valorInicial %>"
                    Width="140" Hidden="true" />
                <ext:TextField ID="txtValorFinal" runat="server" FieldLabel="<%$ AppRecursos : sm_txt_valorFinal %>"
                    Width="140" Hidden="true" />
                <ext:MultiSelect ID="lstValores" runat="server" MultiSelect="true" FieldLabel="<%$ AppRecursos : sm_txt_valoresLista %>"
                    Width="200" Height="130" Hidden="true" />
            </Items>
        </ext:Panel>
    </Items>
</ext:Panel>

You must assume that resize event is captured by the window and this user control receives this event, here is where I want to resize manually the multiselect but I don't know how to do it because setHeight and setWidth methods seems that not works.

I'm using Ext.Net RC 1 without any subversion updates.

[Daniil]

Hi,

To auto resizing there must be a respective layout configuration.

I'm trying to use setHeight and setWidth method from a multiselect but it doesn't resize well.
It only resize box border width.

Please clarify what should these methods change more? I have tested these methods, they appear to be working fine.

[softmachine2011]

Could you show me your example to see diferences?

What layout is better to use?

[Daniil]

.setSize() works as expected for me in the following sample.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.Net Example</title>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:MultiSelect ID="MultiSelect1" runat="server">
        <Items>
            <ext:ListItem Text="Item 1" Value="1" />
            <ext:ListItem Text="Item 2" Value="2" />
            <ext:ListItem Text="Item 3" Value="3" />
        </Items>
    </ext:MultiSelect>
    <ext:Button runat="server" Text=".setSize() //it calls .setHeight() and .setWidth()">
        <Listeners>
            <Click Handler="MultiSelect1.setSize({ height: 200, width : 200});" />
        </Listeners>
    </ext:Button>
    </form>
</body>
</html>

What layout is better to use?

It's hard to say and depends on your other requirement. Here is a simple example demonstrating what I said.

There are the fixed width and height in MultiSelect extension. I reset it using XWidth="={undefined}" and XHeight="={undefined}" to get a VBoxLayout works well.

Try to resize a window.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.Net Example</title>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:Window runat="server" Layout="VBoxLayout">
        <LayoutConfig>
            <ext:VBoxLayoutConfig Align="Stretch" />
        </LayoutConfig>
        <Items>
            <ext:MultiSelect runat="server" Flex="1" XWidth="={undefined}" XHeight="={undefined}">
                <Items>
                    <ext:ListItem Text="Item 1" Value="1" />
                    <ext:ListItem Text="Item 2" Value="2" />
                    <ext:ListItem Text="Item 3" Value="3" />
                </Items>
            </ext:MultiSelect>
            <ext:MultiSelect runat="server" Flex="1" XWidth="={undefined}" XHeight="={undefined}">
                <Items>
                    <ext:ListItem Text="Item 1" Value="1" />
                    <ext:ListItem Text="Item 2" Value="2" />
                    <ext:ListItem Text="Item 3" Value="3" />
                </Items>
            </ext:MultiSelect>
        </Items>
    </ext:Window>
    </form>
</body>
</html>

[softmachine2011]

Hi again,

I' ve trying setSize() solution, because the other one I must apply to the Panel and it seems that doesn't like VBoxLayout in Layout property, panel not renders its content.

I attach two snapshots with before and after of using setSize in the interception of window resizing.
The multiselect don't grow in height, possibly caused by the container panel. I can fix this.
But when grows, doesn't expand multiselect content box (white area).

I remarks that I'm using Ext.NET v1.0 RC 1 without any updates. Directly downloaded from the web.

[Daniil]

Please provide a simplified .aspx page to reproduce.

[softmachine2011]

I was looking your sample and works great, but i can reproduce my issue with a simple case right now.

I try to do it a little sample in as far as possible when I have more time.

Thanks for all

[Daniil]

Ok, we are waiting.

[Daniil]

Marking as [CLOSED].

Please feel free to update the thread with a sample.