[CLOSED] DatePicker Day Highlighted in 2.x

  1. #1

    [CLOSED] DatePicker Day Highlighted in 2.x

    Hi Daniil!!!

    In this case of 1.x version
    http://forums.ext.net/showthread.php...ay-Highlighted
    , you sent me to another thread, and in this another thread, you posted a code.

    This code extends the datepicker to allow Highlighted days and it works wonderfully in version 1.x.
    I'm trying to convert this code to version 2.x, but Iīm failing.

    Follow a ExtJS 4.0 overview, I replace the createSequence and createDelegate... but donīt work...

    Follow below my test page.

    Can you help me?

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Teste8.aspx.vb" Inherits="SuperaWeb.Teste8" %>
    <%@ 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">
    
    <script runat="server">
        Protected Overloads Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
            'A year in YYYY format, a month from 0 to 11, a day from 1 to 31        
            Dim specificDates As String
            Dim dates As Ext.Net.ConfigItem
            Dim cls As Ext.Net.ConfigItem
            Dim msg As Ext.Net.MessageBox = New Ext.Net.MessageBox
            specificDates = "[new Date(2012, 0, 15), new Date(2012, 0, 20), new Date(2012, 0, 25), new Date(2012, 1, 25), new Date(2012, 2, 25)]"
            dates = New ConfigItem("dates", specificDates, ParameterMode.Raw)
            cls = New ConfigItem("cls", "your-class-for-specific-dates", ParameterMode.Value)
            Me.HighlightDates1.CustomConfig.Add(dates)
            Me.HighlightDates1.CustomConfig.Add(cls)
            Me.HighlightDates2.CustomConfig.Add(dates)
            Me.HighlightDates2.CustomConfig.Add(cls)
        End Sub
        
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>DatePicker Day Highlighted</title>
        <style type="text/css">        
            a.your-class-for-specific-dates {
                color: red;
                border: 1px solid red;
                background-color: yellow;
            }
        </style>
    
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="ScriptFiles" />      
        <script type="text/javascript">
            Ext.ns("Ext.ux.DatePicker");
            Ext.ux.DatePicker.HighlightDates = Ext.extend(Object, {
                constructor: function (config) {
                    this.dates = config.dates;
                    this.cls = config.cls;
                },
    
                init: function (datePicker) {
                    var me = this;
                    if (datePicker instanceof Ext.DatePicker) {
                        //datePicker.getHighlighDates = (function () { return this; }).createDelegate(me);
                        datePicker.getHighlighDates = Ext.Function.bind(function () { return this; }, me);
                        //datePicker.highlightDates = me.highlightDates.createDelegate(datePicker);
                        datePicker.highlightDates = Ext.Function.bind(me.highlightDates,datePicker);
                        //datePicker.update = datePicker.update.createSequence(function () {
                        Ext.Function.createSequence(datePicker.update, function () {
                            var highlighDates = this.getHighlighDates();
                            this.highlightDates(highlighDates.dates, highlighDates.cls);
                        });
                    } else if (datePicker instanceof Ext.form.DateField) {
                        //datePicker.onTriggerClick = datePicker.onTriggerClick.createSequence(function () {
                        Ext.Function.createSequence(datePicker.onTriggerClick, (function () {
                            if (!me.gotHighlighDates) {
                                me.init(this.menu.picker);
                                this.menu.picker.highlightDates(me.dates, me.cls);
                                me.gotHighlighDates = true;
                            }
                        });
                    }
                },
    
                highlightDates: function (dates, cls) {
                    var dateValues = [],
                    el = this.getEl();
    
                    cells = el.select('a.x-date-date');
                    Ext.each(dates, function (d) {
                        dateValues.push(d.getTime());
                    });
    
                    cells.removeClass(cls);
    
                    cells.filter(function (el) {
                        return (dateValues.indexOf(el.dom.dateValue) > -1);
                    }).addClass(cls);
                }
            });    
    
    </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:DatePicker ID="DatePicker1" runat="server">
                <Plugins>
                    <ext:GenericPlugin ID="HighlightDates1" runat="server" InstanceName="Ext.ux.DatePicker.HighlightDates" />        
                </Plugins>
            </ext:DatePicker>    
            <ext:DateField ID="DateField1" runat="server">
                <Plugins>
                    <ext:GenericPlugin ID="HighlightDates2" runat="server" InstanceName="Ext.ux.DatePicker.HighlightDates" />
                </Plugins>    
            </ext:DateField>
        </form>
    </body>
    </html>
    Last edited by geoffrey.mcgill; Jan 27, 2012 at 6:16 PM.
  2. #2
    Hi,

    More changes are required.

    Here is the adapted to Ext.NET v2 code.

    Example
    <%@ Page Language="C#" %>
      
    <script runat="server">
           
        protected void Page_Load(object sender, EventArgs e)
        {
            //A year in YYYY format, a month from 0 to 11, a day from 1 to 31
            String specificDates =
                "[" +
                    "new Date(2012, 0, 15)" +
                    ",new Date(2012, 0, 20)" +
                    ",new Date(2012, 0, 25)" +
                    ",new Date(2012, 1, 25)" +
                    ",new Date(2012, 2, 25)" +
                "]";
     
            ConfigItem dates = new ConfigItem("dates", specificDates, ParameterMode.Raw);
            ConfigItem cls = new ConfigItem("cls", "your-class-for-specific-dates", ParameterMode.Value);
     
            this.HighlightDates1.CustomConfig.Add(dates);
            this.HighlightDates1.CustomConfig.Add(cls);
    
            this.HighlightDates2.CustomConfig.Add(dates);
            this.HighlightDates2.CustomConfig.Add(cls);
        }
           
    </script>
      
    <!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>
     
        <style type="text/css">
            a.your-class-for-specific-dates {
                color: red;
                border: 1px solid red;
                background-color: yellow;
            }
        </style>
     
        <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
      
        <script type="text/javascript">
            Ext.ns("Ext.ux.DatePicker");
            Ext.ux.DatePicker.HighlightDates = Ext.extend(Object, {
                constructor : function (config) {
                    this.dates = config.dates;
                    this.cls = config.cls;
                },
     
                init : function (datePicker) {
                    var me = this;
                    if (datePicker instanceof Ext.DatePicker) {
                        datePicker.getHighlighDates = Ext.Function.bind(function () {return this;}, me);
                        datePicker.highlightDates = Ext.Function.bind(me.highlightDates, datePicker);
                        datePicker.update = Ext.Function.createSequence(datePicker.update, function () {
                            var highlighDates = this.getHighlighDates();
                            this.highlightDates(highlighDates.dates, highlighDates.cls);
                        });
                    } else if (datePicker instanceof Ext.form.DateField) {
                        datePicker.onTriggerClick = Ext.Function.createSequence(datePicker.onTriggerClick, function () {
                            if (!me.gotHighlighDates) {
                                me.init(this.picker);
                                this.picker.highlightDates(me.dates, me.cls);
                                me.gotHighlighDates = true;
                            }
                        });
                    }
                },
     
                highlightDates : function (dates, cls) {
                    var dateValues = [],
                        el = this.getEl();
     
                    cells = el.select("a.x-datepicker-date");
                    Ext.each(dates, function (d) {
                        dateValues.push(d.getTime());
                    });
     
                    cells.removeCls(cls);
      
                    cells.filter(function (el) {
                        return (dateValues.indexOf(el.dom.dateValue) > -1);
                    }).addCls(cls);
                }
            });
        </script>
      
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:DatePicker ID="DatePicker1" runat="server">
            <Plugins>
                <ext:GenericPlugin
                    ID="HighlightDates1"
                    runat="server"
                    InstanceName="Ext.ux.DatePicker.HighlightDates" />
            </Plugins>
        </ext:DatePicker>
        <ext:DateField ID="DateField1" runat="server">
            <Plugins>
                <ext:GenericPlugin
                    ID="HighlightDates2"
                    runat="server"
                    InstanceName="Ext.ux.DatePicker.HighlightDates" />
            </Plugins>
        </ext:DateField>
    </body>
    </html>
  3. #3
    Hi Daniil...

    Thanks a lot... your code worked beautifully

    Thanks again
  4. #4
    Please replace:
    return (dateValues.indexOf(el.dom.dateValue) > -1);
    with
    return (Ext.Array.indexOf(dateValues, el.dom.dateValue) > -1);
    within the highlightDates function.

    Also the Ext.NET v2 Beta release requires this to get the example working:
    <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
    
    <script type="text/javascript">
        Ext.dom.CompositeElementLite.override({
            filter : function(selector){
                var els = [],
                    me = this,
                    fn = Ext.isFunction(selector) ? selector
                        : function(el){
                            return el.is(selector);
                        };
    
                me.each(function(el, self, i) {
                    if (fn(el, i) !== false) {
                        els[els.length] = me.transformElement(el);
                    }
                });
    
                me.elements = els;
                return me;
            }
        });
    </script>
    We will fix it in SVN.
  5. #5
    Hi Daniil!

    Works very fine!

    Thanks a lot for your help!
  6. #6
    Here is a Razor version of the example.
    http://forums.ext.net/showthread.php...l=1#post115800

Similar Threads

  1. Replies: 7
    Last Post: Nov 29, 2012, 7:16 AM
  2. DatePicker Day Highlighted
    By gefferson.librelato in forum 1.x Help
    Replies: 5
    Last Post: Jan 27, 2012, 1:16 PM
  3. [CLOSED] DatePicker day highlighted
    By methode in forum 1.x Premium Help
    Replies: 3
    Last Post: Jan 13, 2012, 10:32 AM
  4. Replies: 8
    Last Post: Oct 03, 2011, 5:50 AM
  5. [CLOSED] selected row are partially highlighted on gridpanel
    By leon_tang in forum 1.x Premium Help
    Replies: 5
    Last Post: Sep 19, 2011, 1:41 PM

Tags for this Thread

Posting Permissions