[Ext JS 4] Date Selection Control with week (week) in practice

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)

 

 

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 div 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.

Extension

Ext JS 4 Date control Extension

First paste the Code:

/********************************* * @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="days">',                                                '{#: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 = thisformat = 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.