Jan 27, 2012, 12:26 PM
[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?
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.