DateField control to Absolute Layout panel into modal dialog. No edit date field

  1. #1

    DateField control to Absolute Layout panel into modal dialog. No edit date field

    In a modal window is not editable field DateField. It don't display dialog for edit date (see drawing below).
    Help me, please.

    Example code:

    <ext:ResourceManager ID="ResourceManager1" runat="server"></ext:ResourceManager>
    <ext:Button runat="server" Text="Show window">    
    <Listeners>
                <Click Handler="#{Window1}.show()" />
    </Listeners>
    </ext:Button>
    
    <ext:Window runat="server" ID="Window1" Modal="true" Width="500" Collapsible="false" Title="Task" Hidden="true" AutoHeight="true"   Border="false" Resizable="false" Margins="0" Padding="0">
    <Items>
            <ext:Panel runat="server" ID="frmContent" Layout="Absolute" Width="490" Height="300" Frame="true" ButtonAlign="Right" LabelAlign="Right" LabelWidth="65" Margins="0" Padding="0">
            <Items>
            
            <ext:TextField ID="SubjectForm" runat="server" FieldLabel="<%$ Resources:Page.ExternalProvider.Tasks,Subject%>" AnchorHorizontal="95%" X="0" Y="0"/>
            
            <ext:ComboBox runat="server"  LoadingText="Search ..." MinChars="1" ID="ComboBox2" Note="Undefined" FieldLabel="Holder"  X="0" Y="27"
                DisplayField="Name" ValueField="Code" TypeAhead="false" Width="280" HideTrigger="true" ItemSelector="div.search-item">
                <Store>
                    <ext:Store runat="server" AutoLoad="false" ID="Store2">
                    <Reader>
                        <ext:JsonReader >
                            <Fields>
                                <ext:RecordField Name="Code" Type="String"> </ext:RecordField>
                                <ext:RecordField Name="CodeView" Type="String"> </ext:RecordField>
                                <ext:RecordField Name="Name" Type="String"></ext:RecordField>
                                <ext:RecordField Name="Descr" Type="String"></ext:RecordField>
                            </Fields>
                        </ext:JsonReader>
                    </Reader>                                                
                    </ext:Store>
                </Store>
            <Template ID="Template2" runat="server" >
            <Html>
                <tpl for=".">
                    <div class="search-item">
                        <h3><span> {CodeView}</span>{Descr}</h3>
                    </div>
                </tpl>                                        
            </Html>                                    
            </Template>                                        
            <Triggers>
                <ext:FieldTrigger Icon="Clear"  HideTrigger="true"/>
            </Triggers>
            </ext:ComboBox>                                        
                                        
            <ext:SelectBox ID="SelectBox1" runat="server" FieldLabel="Case" X="0" Y="66" Width="280"></ext:SelectBox>                
    
            <ext:SelectBox ID="SelectBox3" runat="server" FieldLabel="Status" X="285"  Y="27" AnchorHorizontal="95%"></ext:SelectBox>
            <ext:SelectBox ID="SelectBox2" runat="server" FieldLabel="Type" X="285" Y="66"  AnchorHorizontal="95%"></ext:SelectBox>            
    
           <ext:DateField runat="server" ID="dueDateForm" FieldLabel="DueDate" X="0" Y="93" Width="160" AllowBlank="true"></ext:DateField>
           <ext:TimeField runat="server" ID="timeForm" FieldLabel="Time" X="134" Y="93" Width="146"></ext:TimeField>
           <ext:SelectBox runat="server" ID="priorityForm"  FieldLabel="Priority" Y="93" X="285" AnchorHorizontal="95%"></ext:SelectBox>                                               
    
           <ext:Label ID="Label2" runat="server" Text="Explanation:" X="0" Y="135"></ext:Label>
           
            <ext:Panel ID="Panel1fORM" runat="server"  Height="120" Width="384" X="70" Y="133" Style="padding-left:5px;border: 1px solid gray;">
            <Content>
                 <asp:Panel ID="Panel3" runat="server" ScrollBars="Auto" Height="118" Width="378">
                    <asp:Literal ID="explanationForm" runat="server" />
                </asp:Panel>
            </Content>
            </ext:Panel>
            </Items>        
            <Buttons>
                <ext:Button runat="server" Text="Close" >
                    <Listeners>
                        <Click Handler="#{Window1}.hide();" />
                    </Listeners>
                </ext:Button>
            </Buttons>
            </ext:Panel>        
        </Items>
        </ext:Window>
    Click image for larger version. 

Name:	DFPDLG.jpg 
Views:	135 
Size:	41.3 KB 
ID:	3053
    Last edited by Daniil; Aug 05, 2011 at 12:08 PM. Reason: Please use [CODE] tags
  2. #2
    Hi @fisher,

    It seems your code sample doesn't reproduce the problem, I see a date picker.

    Please ensure that the code sample reproduces the problem.
  3. #3

    More information

    Quote Originally Posted by Daniil View Post
    Hi @fisher,

    It seems your code sample doesn't reproduce the problem, I see a date picker.

    Please ensure that the code sample reproduces the problem.
    Date picker is displayed, but date change by mouse click you can not

    I created new web form WebFormTest in our examples web project.
    I use Win7, IIS7.
    Files:
    11.08.2011 18:12 16*158*208 Ext.Net.dll
    11.08.2011 18:12 202*240 Ext.Net.Examples.dll
    11.08.2011 18:12 466*432 Ext.Net.Examples.pdb
    11.08.2011 18:12 10*348*032 Ext.Net.pdb
    28.07.2011 12:09 44*544 Ext.Net.Utilities.dll
    28.07.2011 12:09 126*464 Ext.Net.Utilities.pdb
    11.08.2011 18:12 3*372*548 Ext.Net.XML
    09.03.2011 17:24 192*512 ICSharpCode.SharpZipLib.dll
    09.03.2011 17:23 305*152 Newtonsoft.Json.dll
    09.03.2011 17:23 347*356 Newtonsoft.Json.xml
    09.03.2011 17:23 303*104 Wilco.SyntaxHighlighter.dll

    Example code:
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebFormTest.aspx.cs" Inherits="Ext.Net.Examples.Home.WebFormTest" %>
    
    <%@ 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></title>
    </head>
    <body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    
        <form id="form1" runat="server">
        <div>
        
        <ext:Button ID="Button1" runat="server" Text="Show window">    
    <Listeners>
                <Click Handler="#{Window1}.show()" />
    </Listeners>
    </ext:Button>
     
    <ext:Window runat="server" ID="Window1" Modal="true" Width="500" Collapsible="false" Title="Task" Hidden="true" AutoHeight="true"   Border="false" Resizable="false" Margins="0" Padding="0">
    <Items>
            <ext:Panel runat="server" ID="frmContent" Layout="AbsoluteLayout" Width="490" Height="300" Frame="true" ButtonAlign="Right" LabelAlign="Right" LabelWidth="65" Margins="0" Padding="0">
            <Items>
             
            <ext:TextField ID="SubjectForm" runat="server" FieldLabel="Subject" AnchorHorizontal="95%" X="0" Y="0"/>
             
            <ext:ComboBox runat="server"  LoadingText="Search ..." MinChars="1" ID="ComboBox2" Note="Undefined" FieldLabel="Holder"  X="0" Y="27"
                DisplayField="Name" ValueField="Code" TypeAhead="false" Width="280" HideTrigger="true" ItemSelector="div.search-item">
                <Store>
                    <ext:Store runat="server" AutoLoad="false" ID="Store2">
                    <Reader>
                        <ext:JsonReader >
                            <Fields>
                                <ext:RecordField Name="Code" Type="String"> </ext:RecordField>
                                <ext:RecordField Name="CodeView" Type="String"> </ext:RecordField>
                                <ext:RecordField Name="Name" Type="String"></ext:RecordField>
                                <ext:RecordField Name="Descr" Type="String"></ext:RecordField>
                            </Fields>
                        </ext:JsonReader>
                    </Reader>                                                
                    </ext:Store>
                </Store>
            <Template ID="Template2" runat="server" >
            <Html>
                <tpl for=".">
                    <div class="search-item">
                        <h3><span> {CodeView}</span>{Descr}</h3>
                    </div>
                </tpl>                                        
            </Html>                                    
            </Template>                                        
            <Triggers>
                <ext:FieldTrigger Icon="Clear"  HideTrigger="true"/>
            </Triggers>
            </ext:ComboBox>                                        
                                         
            <ext:SelectBox ID="SelectBox1" runat="server" FieldLabel="Case" X="0" Y="66" Width="280"></ext:SelectBox>                
     
            <ext:SelectBox ID="SelectBox3" runat="server" FieldLabel="Status" X="285"  Y="27" AnchorHorizontal="95%"></ext:SelectBox>
            <ext:SelectBox ID="SelectBox2" runat="server" FieldLabel="Type" X="285" Y="66"  AnchorHorizontal="95%"></ext:SelectBox>            
     
           <ext:DateField runat="server" ID="dueDateForm" FieldLabel="DueDate" X="0" Y="93" Width="160" AllowBlank="true"></ext:DateField>
           <ext:TimeField runat="server" ID="timeForm" FieldLabel="Time" X="134" Y="93" Width="146"></ext:TimeField>
           <ext:SelectBox runat="server" ID="priorityForm"  FieldLabel="Priority" Y="93" X="285" AnchorHorizontal="95%"></ext:SelectBox>                                               
     
           <ext:Label ID="Label2" runat="server" Text="Explanation:" X="0" Y="135"></ext:Label>
            
            <ext:Panel ID="Panel1fORM" runat="server"  Height="120" Width="384" X="70" Y="133" Style="padding-left:5px;border: 1px solid gray;">
            <Content>
                 <asp:Panel ID="Panel3" runat="server" ScrollBars="Auto" Height="118" Width="378">
                    <asp:Literal ID="explanationForm" runat="server" />
                </asp:Panel>
            </Content>
            </ext:Panel>
            </Items>        
            <Buttons>
                <ext:Button ID="Button2" runat="server" Text="Close" >
                    <Listeners>
                        <Click Handler="#{Window1}.hide();" />
                    </Listeners>
                </ext:Button>
            </Buttons>
            </ext:Panel>        
        </Items>
        </ext:Window>
        </div>
        </form>
    </body>
    </html>
  4. #4
    I can choose a date by click on a date picker dates.

    Do you use Ext.Net 1.1?
  5. #5
    Quote Originally Posted by Daniil View Post
    I can choose a date by click on a date picker dates.

    Do you use Ext.Net 1.1?
    yes, of course.

    versions:
    Ext.Net.dll 1.1.0.30957
    Ext.Net.Utilities.dll 1.1.0.20070

    This is error reproduced only when ext:Panel Layout="AbsoluteLayout"

    Now updated dlls from url: http://www.ext.net/archives/1-1-0/ext.net.pro.1.1.zip.
    Nothing has changed. This is bug reproduced.

    And more info:
    If set AutoWidth="true" then no bug.
    Bug reproduced only install Width="160" or other value.

    Use Google Chrome 13.0.782.112,FireFox 5.0 and Opera 11.50
    Last edited by fisher; Aug 12, 2011 at 12:03 PM.
  6. #6
    Thanks for the info about browsers you tested under.

    I've discovered that the issue is not reproducible under IE only.

    Anyways, I think it's not a bug.

    Please try to run the example below. By the way, it is the minimized version of your code sample. I'd suggest you to always minimize examples as much as you can - it often help to narrow a problem.

    So, then you run the example, you will see that the date picker button is overlapped by the TimeField's FieldLabel.

    It's because you set Width="160" for the DateField, but X="134" for the TimeField.

    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:Panel 
                runat="server"
                Width="280" 
                Height="25" 
                Layout="AbsoluteLayout">
                <Items>
                    <ext:DateField 
                        runat="server" 
                        X="0" 
                        Y="0" 
                        Width="160" 
                        FieldLabel="Date" />
                    <ext:TimeField 
                        runat="server" 
                        X="134" 
                        Y="0" 
                        Width="146" 
                        FieldLabel="Time" />
                </Items>
            </ext:Panel>
        </form>
    </body>
    </html>
  7. #7
    Quote Originally Posted by Daniil View Post
    Thanks for the info about browsers you tested under.

    I've discovered that the issue is not reproducible under IE only.

    Anyways, I think it's not a bug.

    Please try to run the example below. By the way, it is the minimized version of your code sample. I'd suggest you to always minimize examples as much as you can - it often help to narrow a problem.

    So, then you run the example, you will see that the date picker button is overlapped by the TimeField's FieldLabel.

    It's because you set Width="160" for the DateField, but X="134" for the TimeField.

    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:Panel 
                runat="server"
                Width="280" 
                Height="25" 
                Layout="AbsoluteLayout">
                <Items>
                    <ext:DateField 
                        runat="server" 
                        X="0" 
                        Y="0" 
                        Width="160" 
                        FieldLabel="Date" />
                    <ext:TimeField 
                        runat="server" 
                        X="134" 
                        Y="0" 
                        Width="146" 
                        FieldLabel="Time" />
                </Items>
            </ext:Panel>
        </form>
    </body>
    </html>
    Yes, you're right.
    Many thanks for your help.
  8. #8
    Welcome to Ext.Net :)

Similar Threads

  1. [CLOSED] Fire a event when you edit the text box in DateField control
    By leon_tang in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Dec 01, 2011, 8:47 PM
  2. date time field in grid panel
    By sunshine in forum 1.x Help
    Replies: 1
    Last Post: Jul 28, 2011, 1:53 AM
  3. [CLOSED] Date Value is not getting formatted during Edit mode in Grid Panel
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Aug 11, 2010, 8:41 PM
  4. Datefield Control not visible in a Custom Dialog Box
    By novicefromtexas in forum 1.x Help
    Replies: 0
    Last Post: Oct 22, 2009, 7:52 PM
  5. Ext.Msg.confirm as modal dialog
    By madhugumma in forum 1.x Help
    Replies: 0
    Last Post: Jul 24, 2009, 12:37 PM

Tags for this Thread

Posting Permissions