Both Ext JS 3 and Ext JS 4 have components that provide date selection (there are, of course, earlier versions).
But there are some dates that need to be selected to see the week, that is, which day of the date is the first week of the year.
Unfortunately, Ext JS does not provide such a configuration.
(For ext. JS 4, the ideal phase method is to have a configuration item like Showweek in Ext.picker.Date)
The first solution in IE on the work, in other browsers do not appear, directly ignored.
The second solution supports Ext JS 2 and Ext JS 3 version, but does not support Ext JS 4. With an individual in Ext JS upgrade on some experience, a beginning to feel that this extension to Ext JS 4 should have no problem. Tinker for half a day, gave up. Ext JS 3 Upgrade to Ext JS 4, the date page display elements have also been modified, the old version with the TR TD mostly, the new version of a number of div and a element. and class names have been replaced. This seems to be a big drag on the upgrade. You can only implement this extension yourself.
/*********************************
* @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:[
' <div id= ' {id}-innerel ' role= ' grid ' > ',
' <div role= ' presentation "class=" {Basecls}-header ">",
' <a id= ' {id}-prevel ' class= ' {basecls}-prev {basecls}-arrow ' href= ' # ' role= ' button ' title= ' {prevtext} ' hidefocus= ' On ' ></a> ',
' <div class= ' {basecls}-month ' id= ' {id}-middlebtnel ' >{%this.rendermonthbtn ' (values, out)%}</div> '
' <a id= ' {id}-nextel ' class= ' {basecls}-next {basecls}-arrow ' href= ' # ' role= ' button ' title= ' {nexttext} ' hidefocus= ' On ' ></a> ',
' </div> ',
"<table id=" {Id}-eventel "class=" {basecls}-inner "cellspacing=" 0 "role=" grid ">",
' <thead role= ' presentation ' ><tr role= ' row ' > ',
' <th role= ' columnheader ' class= ' {parent.basecls}-column-header ' title= ' {.} ' > ',
' <div class= ' {parent.basecls}-column-header-inner ' >Wk</div> ',
' </th> ',
' <tpl for= ' daynames ' > ',
' <th role= ' columnheader ' class= ' {parent.basecls}-column-header ' title= ' {.} ' > ',
' <div class= ' {parent.basecls}-column-header-inner ' >{.:this.firstInitial}</div> ',
' </th> ',
' </tpl> ',
' </tr></thead> ',
' <tbody role= ' presentation ' ><tr role= ' row ' > ',
' <tpl for= ' > ',
' {#:this.isendofweek} ',
' {#:this.isbeginofweek} ',
' <td role= ' Gridcell ' id= ' {[Ext.id ()]} ' > ',
' <a role= ' presentation ' hidefocus= ' on ' class= ' {parent.basecls}-date ' href= ' # ' ></a> ',
' </td> ',
' </tpl> ',
' </tr></tbody> ',
' </table> ',
' <tpl if= ' showtoday ' > ',
' <div id= ' {id}-footerel ' role= ' presentation ' class= ' {basecls}-footer ' >{%this.rendertodaybtn (values, out)%} </div> ',
' </tpl> ',
' </div> ',
{
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? ' <td role= ' Weekcell ' id= ' {[Ext.id ()]} ' ><a role= ' presentation ' ></a></td> ': ';
},
Isendofweek:function (value) {
value--;
var end = value% 7 = = 0 && value!== 0;
Return end? ' </tr><tr role= ' row ' > ': ';
},
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<me.numweeks;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 "] a ');
Begin Extend
me.weekcells= me.eventEl.select (' tbody td[role= ' Weekcell "]);
me.weeknodes= me.eventEl.query (' tbody td[role= ' Weekcell "] a ');
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 ();
}
}
});
}
});
1. Rewrite rendertpl to increase the number of weeks displayed in the column
2. Rewrite fullupdate, set the value of the week. EXT has provided getweekofyear This method can get week
3. OnRender. The special note here is that the Fn:me.handleDateClick in click to give an empty function, otherwise the date of the election will be executed two times.
