PDA

View Full Version : [CLOSED] DatePicker Day Highlighted in 2.x



supera
Jan 27, 2012, 12:26 PM
Hi Daniil!!!

In this case of 1.x version
http://forums.ext.net/showthread.php?16911-DatePicker-Day-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.onTriggerCl ick, (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>

Daniil
Jan 27, 2012, 1:14 PM
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.onTriggerCl ick, 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>

supera
Jan 27, 2012, 5:06 PM
Hi Daniil...

Thanks a lot... your code worked beautifully

Thanks again

Daniil
Mar 15, 2012, 9:14 PM
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.

supera
Mar 16, 2012, 2:17 PM
Hi Daniil!

Works very fine!

Thanks a lot for your help!

Daniil
Aug 20, 2013, 8:30 AM
Here is a Razor version of the example.
http://forums.ext.net/showthread.php?26123&p=115800&viewfull=1#post115800