[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:
7278
7279
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/#!/api/Ext.form.field.ComboBox-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/#!/api/Ext.form.field.ComboBox-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: 7282


<%@ 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: 7282
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/showthread.php?199887&p=878162&viewfull=1#post878162

[Hlodvig]

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