[CLOSED] Calendar - DateRange ReadOnly

  1. #1

    [CLOSED] Calendar - DateRange ReadOnly

    Hello

    How to mark date&Time Range field on as read-only.
    Disabling the field is not the right solution, i would to make it as read-only.

    (See attached image - All fields are readOnly expect date-range/When, it is disabled)

    Advise..
    Attached Files
    Last edited by Daniil; May 24, 2011 at 8:32 AM. Reason: [CLOSED]
  2. #2
    Hi,

    The thread is related to this one:
    http://forums.ext.net/showthread.php?13777

    Regarding the question

    FIelds have .readOnly, you can use it.
  3. #3
    In this case the 'readOnly" property is not working.
    See the example below.

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="calTest1.aspx.vb" Inherits="EBSPortalClient.calTest1" %>
    
    <%@ 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 id="Head1" runat="server">
        <title>Ext.Net Example</title>
        <script type="text/javascript">
            var CompanyX = {
                getWindow: function () {
                    return CompanyX.EventEditWindow1;
                },
                dayClick: function (cal, dt, allDay, el) {
                    this.record.show.call(this, cal, { StartDate: dt, IsAllDay: allDay }, el);
                },
                record: {
                    show: function (cal, rec, el) {
                        CompanyX.getWindow().show(rec, el);
                    }
                }
            };     
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" Namespace="CompanyX" />
        <ext:Viewport ID="Viewport1" runat="server" Layout="fit">
            <Items>
                <ext:CalendarPanel ID="CalendarPanel1" runat="server" Height="500">
                    <EventStore ID="EventStore1" runat="server" />
                    <GroupStore ID="GroupStore1" runat="server">
                        <Groups>
                            <ext:Group CalendarId="1" Title="Home" />
                            <ext:Group CalendarId="2" Title="Work" />
                            <ext:Group CalendarId="3" Title="School" />
                            <ext:Group CalendarId="4" Title="Other" />
                        </Groups>
                    </GroupStore>
                    <Listeners>
                        <DayClick Fn="CompanyX.dayClick" Scope="CompanyX" />
                    </Listeners>
                </ext:CalendarPanel>
            </Items>
        </ext:Viewport>
        <ext:EventEditWindow ID="EventEditWindow1" runat="server" Hidden="true" GroupStoreID="GroupStore1">
            <Listeners>
                <Render Handler="this.get(0).get(0).readOnly = true;
                                this.get(0).get(1).readOnly = true;
                                this.get(0).get(2).readOnly = true;
                                this.fbar.get(0).hidden = true;
                                this.fbar.get(3).hidden = true;
                                this.fbar.get(2).hidden = true;" />
            </Listeners>
        </ext:EventEditWindow>
        </form>
    </body>
    </html>
  4. #4
    Yes, it doesn't work.

    This code returns a DateRangeField instance. This widget is defined in the calendar's sources. You can review them to get a representation how this widget looks.
    this.get(0).get(1)
    So, I can suggest to handle 'render' event of this field to get what you want.

    Here you are.

    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>
        <script type="text/javascript">
            var CompanyX = {
                getWindow : function () {
                    return CompanyX.EventEditWindow1;
                },
                dayClick : function (cal, dt, allDay, el) {
                    this.record.show.call(this, cal, { StartDate: dt, IsAllDay: allDay }, el);
                },
                record : {
                    show : function (cal, rec, el) {
                        CompanyX.getWindow().show(rec, el);
                    }
                }
            };     
        </script>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" Namespace="CompanyX" />
        <ext:Viewport runat="server" Layout="fit">
            <Items>
                <ext:CalendarPanel runat="server" Height="500">
                    <EventStore runat="server" />
                    <GroupStore ID="GroupStore1" runat="server">
                        <Groups>
                            <ext:Group CalendarId="1" Title="Home" />
                            <ext:Group CalendarId="2" Title="Work" />
                            <ext:Group CalendarId="3" Title="School" />
                            <ext:Group CalendarId="4" Title="Other" />
                        </Groups>
                    </GroupStore>
                    <Listeners>
                        <DayClick Fn="CompanyX.dayClick" Scope="CompanyX" />
                    </Listeners>
                </ext:CalendarPanel>
            </Items>
        </ext:Viewport>
        <ext:EventEditWindow ID="EventEditWindow1" runat="server" Hidden="true" GroupStoreID="GroupStore1">
            <Listeners>
                <Render Handler="this.get(0).get(0).readOnly = true;
                                 this.get(0).get(1).on('render', function () {
                                    this.startDate.setReadOnly(true);
                                    this.startTime.setReadOnly(true);
                                    this.endDate.setReadOnly(true);
                                    this.endTime.setReadOnly(true);
                                    this.allDay.setDisabled(true);
                                 });" />
            </Listeners>
        </ext:EventEditWindow>
        </form>
    </body>
    </html>
    To get the info why I use .setDisabled() for a checkbox, please follow:
    http://forums.ext.net/showthread.php?10056
  5. #5
    This worked great!!, please mark this request as solved..

Similar Threads

  1. [CLOSED] [1.2] DateFields in daterange
    By FVNoel in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 05, 2012, 3:42 PM
  2. [CLOSED] V2.0 DateFields with DateRange
    By Aurelio in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 16, 2012, 4:17 PM
  3. [CLOSED] Calendar - readOnly ??
    By ndotis in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: May 18, 2011, 8:01 PM
  4. Calendar in readonly mode
    By reiben in forum 1.x Help
    Replies: 9
    Last Post: Dec 02, 2010, 6:55 AM
  5. [CLOSED] add daterange in code-behind
    By vali1993 in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Sep 29, 2010, 3:39 PM

Tags for this Thread

Posting Permissions