[CLOSED] width of custom server control

[Hlodvig]

So I created server control inherited from the SelectBox which will pre-populate data etc...

Functionality was copied from the old web control, however...

using Ext.Net;
using RdC.Resources;
using System;
using System.Collections;
using System.Collections.Generic;
using System.Reflection;
using System.Web.UI;

namespace RdC.Front.ServerControls
{
    [ToolboxData("<{0}:RefSelectBox runat=server></{0}:RefSelectBox>")]
    public class RefSelectBox : SelectBox
    {
        public Object DataSource { get; set; }

        public int? SelectedValue
        {
            get
            {
                int res;
                if (this.SelectedItem != null && int.TryParse(this.SelectedItem.Value, out res))
                {
                    return res;
                }
                else {
                    return null;
                }
            }
            set
            {
                this.Select(value.ToString());
            }
        }

        public RefSelectBox()
        {
            this.ListConfig = new BoundList
            {
                Width = 100
            };
            this.IndicatorTip = ResourcesManager.GetLabel("RefLbx_IndicatorTip");
            this.EmptyText = ResourcesManager.GetLabel("RefLbx_EmptyText");
        }

        protected override void OnInit(System.EventArgs e)
        {
            base.OnInit(e);
        }

        public override void DataBind()
        {
            if (DataSource != null)
            {
                Type l_sourceType = DataSource.GetType();
                if (l_sourceType.IsGenericType && l_sourceType.GetGenericTypeDefinition() == typeof(List<>))
                {
                    IList l_list = DataSource as IList;
                    if (l_list != null)
                    {
                        foreach (object l_object in l_list)
                        {
                            Type l_type = l_object.GetType();
                            PropertyInfo l_idProp = l_type.GetProperty("Id");
                            PropertyInfo l_labelleProp = l_type.GetProperty("Libelle");
                            object l_idValue = l_idProp.GetValue(l_object, null);
                            object l_labelleValue = l_labelleProp.GetValue(l_object, null);

                            this.Items.Add(new ListItem
                            {
                                Text = l_labelleValue.ToString(),
                                Value = l_idValue.ToString()
                            });
                        }
                    }
                }
            }
        }
    }
}

and I add this control to some FormPanel, which is inside of web control

<ext:FormPanel runat="server" ID="MaSocieteFormPanel" Layout="FormLayout" AutoDoLayout="true" Border="false">
    <FieldDefaults LabelWidth="150"></FieldDefaults>
    <Items>
        <ext:TextField ID="NomTextField" runat="server" AllowBlank="false" IndicatorIcon="BulletRed" MsgTarget="Side" InputWidth="250" MaxLength="50" />
        <extuc:RefSelectBox ID="PaysLbxRef" runat="server" LabelWidth="150" AllowBlank="false" IndicatorIcon="BulletRed">
            <ListConfig Width="100" />
        </extuc:RefSelectBox>
...

this control is added to the tab nested in another tab.

The list width of control is 100%, not the 100px:


Why?
Well, the tab panel in which the web control is added, have layout set to 'fit', but FormPanel in the web control have layout 'form', and even if I change the tab panel's layout to 'form' - the input width will still be 100%, not 100px.

[Baidaly]

Hello!

You should set MatchFieldWidth to false: http://docs.sencha.com/extjs/4.1.3/#...cfg-listConfig

<extuc:RefSelectBox ID="PaysLbxRef" runat="server" LabelWidth="150" AllowBlank="false" IndicatorIcon="BulletRed" MatchFieldWidth="false">
    <ListConfig Width="100" />
</extuc:RefSelectBox>

[Hlodvig]

Hello!

You should set MatchFieldWidth to false: http://docs.sencha.com/extjs/4.1.3/#...cfg-listConfig

<extuc:RefSelectBox ID="PaysLbxRef" runat="server" LabelWidth="150" AllowBlank="false" IndicatorIcon="BulletRed" MatchFieldWidth="false">
    <ListConfig Width="100" />
</extuc:RefSelectBox>

Hm, ok. I'm setting it in the constructor now. The drop-down width 100px now, but the input field is still 100%.
I don't remember that I had to set both input's width and list width both simultaneously with ext.Net SelectBox...

[Baidaly]

You need to define your own Width for control if you don't want the Layout to define it for the control.

I don't see where you define Width or InputWidth, so Layout estimates the width of the control.

[Hlodvig]

You need to define your own Width for control if you don't want the Layout to define it for the control.

I don't see where you define Width or InputWidth, so Layout estimates the width of the control.

Are you telling me that the same issue can be reproduced with Ext.Net.SelectBox as well?

[Baidaly]

Sorry, maybe I misunderstood you. But what I see with the code below:

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Reflection" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Register TagPrefix="extuc" Namespace="Ext.Net.Examples.Examples.Form.ComboBox.SelectBox" Assembly="Ext.Net.Examples" %>

<script runat="server">
    

    protected void Page_Load(object sender, EventArgs e)
    {
        Store store = this.SelectBox1.GetStore();
        
        store.DataSource = new object[]
        {
            new object[] { "AL", "Alabama", "The Heart of Dixie" },
            new object[] { "AK", "Alaska", "The Land of the Midnight Sun" },
            new object[] { "AZ", "Arizona", "The Grand Canyon State" },
            new object[] { "AR", "Arkansas", "The Natural State" },
            new object[] { "CA", "California", "The Golden State" },
            new object[] { "CO", "Colorado", "The Mountain State" },
            new object[] { "CT", "Connecticut", "The Constitution State" },
            new object[] { "DE", "Delaware", "The First State" },
            new object[] { "DC", "District of Columbia", "The Nation's Capital" },
            new object[] { "FL", "Florida", "The Sunshine State" },
            new object[] { "GA", "Georgia", "The Peach State" },
            new object[] { "HI", "Hawaii", "The Aloha State" },
            new object[] { "ID", "Idaho", "Famous Potatoes" },
            new object[] { "IL", "Illinois", "The Prairie State" },
            new object[] { "IN", "Indiana", "The Hospitality State" },
            new object[] { "IA", "Iowa", "The Corn State" },
            new object[] { "KS", "Kansas", "The Sunflower State" },
            new object[] { "KY", "Kentucky", "The Bluegrass State" },
            new object[] { "LA", "Louisiana", "The Bayou State" },
            new object[] { "ME", "Maine", "The Pine Tree State" },
            new object[] { "MD", "Maryland", "Chesapeake State" },
            new object[] { "MA", "Massachusetts", "The Spirit of America" },
            new object[] { "MI", "Michigan", "Great Lakes State" }
        };
        store.DataBind();

        PaysLbxRef.DataSource = new List<object>
        {
            new { Id = 1, Libelle = "123" }
        };
        PaysLbxRef.DataBind();
    }

</script>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>SelectBox - Ext.NET Examples</title>
    <link href="/resources/css/examples.css" rel="stylesheet" />
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        
        <ext:FormPanel runat="server" ID="MaSocieteFormPanel" Layout="FormLayout" AutoDoLayout="true" Border="false">
            <FieldDefaults LabelWidth="150"></FieldDefaults>
            <Items>
                <ext:TextField ID="NomTextField" runat="server" AllowBlank="false" IndicatorIcon="BulletRed" MsgTarget="Side" InputWidth="250" MaxLength="50" />
                <ext:SelectBox
                    ID="SelectBox1"
                    runat="server" 
                    DisplayField="state"
                    ValueField="abbr"
                    EmptyText="Select a state...">
                    <Store>
                        <ext:Store runat="server" ID="Store1">
                            <Model>
                                <ext:Model ID="Model1" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="abbr" />
                                        <ext:ModelField Name="state" />
                                        <ext:ModelField Name="nick" />
                                    </Fields>
                                </ext:Model>
                            </Model>            
                        </ext:Store>    
                    </Store>    
                </ext:SelectBox>
                <extuc:RefSelectBox ID="PaysLbxRef" runat="server" LabelWidth="150" AllowBlank="false" IndicatorIcon="BulletRed" MatchFieldWidth="false">
                    <ListConfig Width="100" />
                </extuc:RefSelectBox>
            </Items>
        </ext:FormPanel>
    </form>
</body>
</html>

[Hlodvig]

Sorry, maybe I misunderstood you. But what I see with the code below:

Yes, it's the same.
So it's not an issue. I found out that

Ext.view.BoundList.width - defaults to undefined (automatically set to the width of the ComboBox field if matchFieldWidth is true)

So widths can be set independently - that's all. I just don't need to set ListConfig.Width.
But guess what - I can't use Width... What's the Width? It is a width of the whole field including label and borders etc... I just can't set width to 100 - the real width of the field is calculated excluding the LabelWidth and so on so I need to calculate the real width in mind or I'll get very narrow field... So I have to set InputWidth (which not exists according to API - Width is there, but not InputWidth) and it irritates me that I have to change "Width" to InputWidth everywhere (200-300 places).

[Daniil]

As far as I can understand InputWidth is the width of the underlying HTML input element, but Width is the width of the entire field including FieldLabel, input element and whatever else.

o I have to set InputWidth (which not exists according to API

Yes, for some reason Sencha has not added it yet, though I requested here:
http://www.sencha.com/forum/showthre...l=1#post878162

[Hlodvig]

Ok, so the thread can be closed, I guess.