ExtJS4 implement date Selection Control with week (week) (Practice 1) _ extjs

Source: Internet
Author: User
There are some requirements for date selection to see the week, that is, the day in the date is the week of the year, unfortunately Extjs does not provide such configuration, the following describes the ideal solution. Preface

Both Ext JS 3 and Ext JS 4 have date-based components (of course, earlier versions ).


However, you need to select a date to see the day of the week, that is, the day of the year in the date.

Unfortunately, Ext js does not provide such configuration.

(For Ext js 4, the ideal method is to have a configuration item similar to showWeek in Ext. picker. Date)

Existing solutions

Go to the network and look at the solution based on Ext js: There are two

Http://enikao.net/extjs/weeknumber/weeknumber.html

And

Http://www.lubber.de/extjs/datepickerplus/

The first solution is to work on IE, which cannot be displayed in other browsers and is ignored directly.

The second solution supports Ext js 2 and Ext js 3, but does not support Ext js 4. Based on my personal experience in Ext js upgrade, I initially felt that there should be no problem in upgrading this extension to Ext js 4. After a long time, I gave up. After Ext js 3 is upgraded to Ext js 4, the display elements on the date page are also modified. The old version uses tr td, and some p and a elements are added to the new version. And the class name is changed. It seems that the upgrade resistance is high. You can only implement this extension by yourself.

Ext JS 4 Date control Extension

First paste the Code:

The Code is as follows:


/*********************************
* @ Author: oscar999
* @ Description: New Widgets Extend from Ext
* @ Verion: V1.0
**********************************/

/**
* Date Picker with Week
*/
Ext. define ('ext. ux. DatePickerWithWeek ',{
Extend: "Ext. picker. Date ",
Alias: "widget. datepickerwithweek ",
Width: 197,
NumWeeks: 6,
RenderTpl :[
'

',
'

',

'',
'

{% This. renderMonthBtn (values, out) %}

',

'',
'

',
'


',
'




',
'{#: This. isEndOfWeek }',
'{#: This. isBeginOfWeek }',
'


',' ',' ',' ','',' ',' ',' ','',' ','
',
'

Wk

',
'
',
'

{.: This. firstInitial}

',
'
',
'',
'
',
' ',
'

{% This. renderTodayBtn (values, out) %}

',
' ',
'

',
{
FirstInitial: function (value ){
// Alert (value );
Return Ext. picker. Date. prototype. getDayInitial (value );
},
IsBeginOfWeek: function (value ){
// Value --;
// Value --;
Var end = (value = 1 | (value-1) % 7 = 0 );
Return end? '':'';

},
IsEndOfWeek: function (value ){
Value --;
Var end = value % 7 ===0 & value! = 0;
Return end? '':'';
},
RenderTodayBtn: function (values, out ){
Ext. DomHelper. generateMarkup (values. $ comp. todayBtn. getRenderTree (), out );
},
RenderMonthBtn: function (values, out ){
Ext. DomHelper. generateMarkup (values. $ comp. monthBtn. getRenderTree (), out );
}
}
],
FullUpdate: function (date ){
This. callParent ([date]);

Var me = this;
Var weekNodes = me. weekNodes;
Var curWeekStart = Ext. Date. clearTime (new Date (date. getFullYear (), date. getMonth (), 1 ));
Var begMonWeek = Ext. Date. getWeekOfYear (curWeekStart );
Var firstDayOfMonth = Ext. Date. getFirstDayOfMonth (curWeekStart );
If (firstDayOfMonth = 0)
{
BegMonWeek + = 1;
}
For (j = 0; j {
WeekNodes [j]. innerHTML = begMonWeek. toString ();
BegMonWeek ++;
}
},
OnRender: function (container, position ){
Var me = this;
Me. callParent (arguments );
Me. cells = me. eventEl. select ('tbody td [role = "gridcell"] ');
Me. textNodes = me. eventEl. query ('tbody td [role = "gridcell"] ');

// Begin extend
Me. weekcells = me. eventEl. select ('tbody td [role = "weekcell"] ');
Me. weekNodes = me. eventEl. query ('tbody td [role = "weekcell"] ');
// End extend
Me. mon (me. eventEl ,{
Scope: me,
Mousewheel: me. handleMouseWheel,
Click :{
// Fn: me. handleDateClick,
Fn: function (){},
Delegate: 'A. '+ me. baseCls +'-date'
}
});
}
/*, InitComponent: function (){
This. callParent ();
}*/
});

/*
* Date Form field use Date Picker with Week
*/
Ext. define ('ext. ux. DateFieldWithWeek ',{
Extend: "Ext. form. field. Date ",
Alias: "widget. datefieldwithweek ",
/* InitComponent: function (){
This. callParent ();
},*/
CreatePicker: function (){
Var me = this
Format = Ext. String. format;
Return new Ext. ux. DatePickerWithWeek ({
PickerField: me,
OwnerCt: me. ownerCt,
RenderTo: document. body,
Floating: true,
Hidden: true,
FocusOnShow: true,
MinDate: me. minValue,
MaxDate: me. maxValue,
DisabledDatesRE: me. disabledDatesRE,
DisabledDatesText: me. disabledDatesText,
DisabledDays: me. disabledDays,
DisabledDaysText: me. disabledDaysText,
Format: me. format,
ShowToday: me. showToday,
StartDay: me. startDay,
MinText: format (me. minText, me. formatDate (me. minValue )),
MaxText: format (me. maxText, me. formatDate (me. maxValue )),
Listeners :{
Scope: me,
Select: me. onSelect
},
KeyNavConfig :{
Esc: function (){
Me. collapse ();
}
}
});
}
});


The principle is simple:

1. Rewrite renderTpl and add the columns displayed on the day of the week.

2. Rewrite fullUpdate and set the value of the week. Ext provides the getWeekOfYear method to obtain the week.

3. onRender. Note that fn: me. handleDateClick In the click operation must be an empty function. Otherwise, it will be executed twice when the date is selected.
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.