PDA

View Full Version : [CLOSED] CustomControl with 2 datefield inside doesn't display anything else than Label



ViDom
Jun 13, 2013, 1:47 PM
Hi,
Like in title.
Here is sample to reproduce:


<%@ Page Language="C#"%>
<%@Register assembly="Ext.Net" namespace="Ext.Net" tagPrefix="ext" %>
<%@ Import Namespace="Ext.Net" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
private class DateRangePicker:Ext.Net.FieldContainer
{
private Ext.Net.DateField dateField1;
private Ext.Net.DateField dateField2;
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
dateField1 = new Ext.Net.DateField() { ID = this.ID + "datefield1", Flex = 3, Vtype = "daterange", Cls = "search-date-picker-left", CtCls = "search-date-picker"};
Ext.Net.ConfigItem configItem1 = new ConfigItem("endDateField", "dateField2", ParameterMode.Value);
dateField1.CustomConfig.Add(configItem1);
dateField1.FieldCls = "search-date-left";
dateField2 = new Ext.Net.DateField() { ID = this.ID + "datefield2", Flex = 3, Cls = "search-date-picker-right", CtCls = "search-date-picker", Vtype = "daterange" };
Ext.Net.ConfigItem configItem2 = new ConfigItem("startDateField", "dateField1", ParameterMode.Value);
dateField2.CustomConfig.Add(configItem2);
dateField2.LabelCls = "searchLabel";
dateField2.FieldCls = "search-date-right";
dateField2.Listeners.AfterRender.Handler = "this.el.parent().addCls('search-date-right');";
HBoxLayoutConfig layoutConfig = new HBoxLayoutConfig() { Align = HBoxAlign.Stretch, Padding = "2" };
this.LayoutConfig.Add(layoutConfig);
dateField1.AltFormats = "yyyy-MM-dd|dd-MM-yyyy|yyyyMMdd|ddMMyy";
dateField2.AltFormats = "yyyy-MM-dd|dd-MM-yyyy|yyyyMMdd|ddMMyy";
this.Items.Add(dateField1);
this.Items.Add(dateField2);
}
}
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
DateRangePicker dateRangePicker1 = new DateRangePicker
{
ID = "name1",
FieldLabel = "Name1",
Cls = "search-date-picker",
LabelCls = "searchLabel"
};
DateRangePicker dateRangePicker2 = new DateRangePicker
{
ID = "name2",
FieldLabel = "Name2",
Cls = "search-date-picker",
LabelCls = "searchLabel"
};
first.Items.Add(dateRangePicker1);
second.Items.Add(dateRangePicker2);
}

</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<ext:ResourceManager runat="server"></ext:ResourceManager>
<ext:Viewport runat="server">
<Items>
<ext:Container runat="server" Layout="FitLayout">
<Items>
<ext:Container runat="server">
<LayoutConfig>
<ext:TableLayoutConfig runat="server" Columns="3"></ext:TableLayoutConfig>
</LayoutConfig>
<Items>
<ext:Panel runat="server" ID="first" Width="410" Border="False"></ext:Panel>
<ext:Panel runat="server" ID="second" Width="410" Border="False"></ext:Panel>
<ext:Panel runat="server" ID="third" Width="410" Border="False"></ext:Panel>
</Items>
</ext:Container>
</Items>
</ext:Container>
</Items>
</ext:Viewport>
</body>
</html>


Thanks,
ViDom

Daniil
Jun 13, 2013, 3:53 PM
Hi @ViDom,

I think you should set up Layout="FitLayout" for the "first" and "second" Panels to get well-sized things.

ViDom
Jun 14, 2013, 6:53 AM
Hi @ViDom,

I think you should set up Layout="FitLayout" for the "first" and "second" Panels to get well-sized things.

ok it's work for simple sample with my scenario I got it more complex.
here is sample:


<%@ Page Language="C#"%>
<%@Register assembly="Ext.Net" namespace="Ext.Net" tagPrefix="ext" %>
<%@ Import Namespace="Ext.Net" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">

private class DateRangePicker : Ext.Net.FieldContainer
{
private Ext.Net.DateField dateField1;
private Ext.Net.DateField dateField2;

protected override void OnInit(EventArgs e)
{
base.OnInit(e);
dateField1 = new Ext.Net.DateField()
{ID = this.ID + "datefield1", Flex = 3, Vtype = "daterange", Cls = "search-date-picker-left", CtCls = "search-date-picker"};
Ext.Net.ConfigItem configItem1 = new ConfigItem("endDateField", "dateField2", ParameterMode.Value);
dateField1.CustomConfig.Add(configItem1);
dateField1.FieldCls = "search-date-left";
dateField2 = new Ext.Net.DateField()
{ID = this.ID + "datefield2", Flex = 3, Cls = "search-date-picker-right", CtCls = "search-date-picker", Vtype = "daterange"};
Ext.Net.ConfigItem configItem2 = new ConfigItem("startDateField", "dateField1", ParameterMode.Value);
dateField2.CustomConfig.Add(configItem2);
dateField2.LabelCls = "searchLabel";
dateField2.FieldCls = "search-date-right";
dateField2.Listeners.AfterRender.Handler = "this.el.parent().addCls('search-date-right');";
HBoxLayoutConfig layoutConfig = new HBoxLayoutConfig() {Align = HBoxAlign.Stretch, Padding = "2"};
this.LayoutConfig.Add(layoutConfig);
dateField1.AltFormats = "yyyy-MM-dd|dd-MM-yyyy|yyyyMMdd|ddMMyy";
dateField2.AltFormats = "yyyy-MM-dd|dd-MM-yyyy|yyyyMMdd|ddMMyy";
this.Items.Add(dateField1);
this.Items.Add(dateField2);
}
}

protected override void OnInit(EventArgs e)
{
base.OnInit(e);
DateRangePicker dateRangePicker1 = new DateRangePicker
{
ID = "name1",
FieldLabel = "Name1",
Cls = "search-date-picker",
LabelCls = "searchLabel"
};
DateRangePicker dateRangePicker2 = new DateRangePicker
{
ID = "name2",
FieldLabel = "Name2",
Cls = "search-date-picker",
LabelCls = "searchLabel"
};
first.Items.Add(dateRangePicker1);
second.Items.Add(dateRangePicker2);
}

</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Development" Locale="PL-pl"></ext:ResourceManager>
<ext:Viewport runat="server" ID="viewport">
<LayoutConfig>
<ext:VBoxLayoutConfig runat="server" Align="Stretch"/>
</LayoutConfig>
<Items>
<ext:Container runat="server" ID="logoContainer" Height="50"></ext:Container>
<ext:Toolbar ID="MenuMain" runat="server" Height="30" Border="false">
<LayoutConfig>
<ext:HBoxLayoutConfig runat="server" Align="Stretch"/>
</LayoutConfig>
<Items>
<ext:Button ID="MenuStart" runat="server" OnClientClick="window.location.href='Start.aspx'"
Icon="ColorWheel" />
</Items>
</ext:Toolbar>
<ext:Container ID="PanelMain" runat="server" Split="false" AutoScroll="true" Border="false"
Collapsible="false" Flex="1">
<LayoutConfig>
<ext:FitLayoutConfig runat="server"/>
</LayoutConfig>
<Items>
<ext:Panel runat="server" ID="panelCollapsed" AutoDoLayout="true"
AnimCollapse="false" Collapsible="True" Collapsed="True" HideCollapseTool="True"
AutoHeight="true" AnchorHorizontal="100%" Header="False">
<LayoutConfig>
<ext:FitLayoutConfig runat="server"/>
</LayoutConfig>
<Items>
<ext:Container ID="container" runat="server">
<LayoutConfig>
<ext:TableLayoutConfig runat="server" Columns="3"></ext:TableLayoutConfig>
</LayoutConfig>
<Items>
<ext:Panel runat="server" ID="first" Width="410" Border="False" Layout="fitlayout">
<Items>
<ext:TextField runat="server"></ext:TextField>
<ext:TextField ID="TextField1" runat="server"></ext:TextField>
<ext:TextField ID="TextField2" runat="server"></ext:TextField>
<ext:ComboBox runat="server"></ext:ComboBox>
<ext:Checkbox runat="server"></ext:Checkbox>
<ext:Radio runat="server"></ext:Radio>
</Items>
</ext:Panel>
<ext:Panel runat="server" ID="second" Width="410" Border="False" Layout="fitlayout"></ext:Panel>
<ext:Panel runat="server" ID="third" Width="410" Border="False"></ext:Panel>
</Items>
</ext:Container>
</Items>
</ext:Panel>
</Items>
</ext:Container>
<ext:Panel Border="False" runat="server" ID="panelSearchControlMain" Collapsible="false"
AnchorHorizontal="100%" AutoWidth="True" AutoHeight="true" Header="False">
<BottomBar>
<ext:Toolbar ID="ToolbarSearchSimple" Layout="HBoxLayout" runat="server" Height="32" AnchorHorizontal="100%">
<LayoutConfig>
<ext:HBoxLayoutConfig runat="server" Align="Stretch"/>
</LayoutConfig>
<Items>
<ext:Label runat="server" ID="lblListTitle" Cls="listTitle" Flex="1"></ext:Label>

<ext:FieldContainer ID="CompositeField1" runat="server" Height="26" Flex="1">
<LayoutConfig>
<ext:HBoxLayoutConfig runat="server" Align="Middle" Pack="Center"/>
</LayoutConfig>
<Items>
<ext:Button ID="Button_Clear" runat="server" Icon="PageWhite" Height="26" Text="Clear" Width="75">
</ext:Button>
<ext:TextField ID="TextField_SimpleSearch" runat="server" Width="150" Margins="4"
Height="20" EnableKeyEvents="true">
<Listeners>
<KeyPress Handler="if(e.getKey() == Ext.EventObject.ENTER){e.stopEvent();#{Button_Sear ch}.fireEvent('click');}" />
</Listeners>
</ext:TextField>
<ext:Button ID="Button_Search" runat="server" Text="Search" Icon="Find" Height="26" Width="75">
<ext:KeyMap ID="KeyMapSearchCustom" runat="server" Target="={#{panelSearchControlMain}.getBody()}">
<Binding>
<ext:KeyBinding Handler="e.stopEvent();#{Button_Search}.fireEvent('click');">
<Keys>
<ext:Key Code="ENTER" />
</Keys>
</ext:KeyBinding>
</Binding>
</ext:KeyMap>
</ext:Button>
</Items>
</ext:FieldContainer>
<ext:FieldContainer ID="Composite1" runat="server" Flex="1">
<LayoutConfig>
<ext:HBoxLayoutConfig runat="server" Align="Stretch" Pack="End"/>
</LayoutConfig>
<Items>
<ext:DisplayField ID="DisplayField1" runat="server" Flex="1" Html="&nbsp;" />
<ext:Button runat="server" ID="btnToggle" Text="Expand / Collapse">
<Listeners>
<Click Handler="#{panelCollapsed}.toggleCollapse()"></Click>
</Listeners>
</ext:Button>
</Items>
</ext:FieldContainer>
</Items>
</ext:Toolbar>
</BottomBar>
</ext:Panel>

<ext:Panel ID="PanelDicListGrid" runat="server" Region="Center" AutoDoLayout="True" Collapsible="false"
Header="false" Split="true" AnchorHorizontal="100%" Layout="FitLayout" Flex="3" MaintainFlex="True">
<Items>
<ext:GridPanel ID="GridPanelMain" runat="server" SelectionMemory="True">
<Store>
<ext:Store ID="StoreMain" runat="server" RemoteSort="true">
<Model>
<ext:Model runat="server" >
<Fields>
<ext:ModelField runat="server"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<View>

<ext:GridView runat="server" ID="gridView" EnableTextSelection="True">
<GetRowClass Handler="if (record.data.CssClass != '') return record.data.CssClass;"></GetRowClass>
<Listeners>
<Refresh Handler="restoreScroll(this, #{ScrollStore});" Delay="10" Single="true" />
</Listeners>
</ext:GridView>
</View>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server" DisplayInfo="True">
</ext:PagingToolbar>
</BottomBar>
</ext:GridPanel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</body>
</html>


it's showing only 1 item from all collection(first container). Without layout="fitlayout" on first panel all controls display( obviously not my customcontrol)

ViDom
Jun 14, 2013, 8:44 AM
I was able to make workaround with css rules but think there is a simple way for someone more experience in Ext.Net.

Daniil
Jun 14, 2013, 10:27 AM
A FitLayout deals with a single item.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.layout.container.Fit

I think you can use a VBoxLayout one instead.

ViDom
Jun 14, 2013, 11:58 AM
A FitLayout deals with a single item.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.layout.container.Fit

I think you can use a VBoxLayout one instead.

but with VBox layout I would need to give explicit height for each item.

Daniil
Jun 14, 2013, 12:13 PM
Yes, or set up a Flex option.

If you need something like auto height, please try with an AchorLayout.