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

Source: Internet
Author: User

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.

 

 

 

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.