1 //只选择年的控件
  2 Ext.define('ux.picker.Year', {
  3     extend: 'Ext.Component',
  4     alias: 'widget.uxYearpicker',
  5     alternateClassName: 'ux.uxYearpicker',
  6     cls: 'uxYearpicker',
  7     isYearPicker: true,
  8
  9     focusable: true,
 10
 11     childEls: [
 12         'bodyEl', 'prevEl', 'nextEl', 'yearEl'
 13     ],
 14
 15     renderTpl: [
 16         '<div id="{id}-bodyEl" data-ref="bodyEl" class="{baseCls}-body">',
 17         '<div id="{id}-yearEl" data-ref="yearEl" class="{baseCls}-years">',
 18         '<div class="{baseCls}-yearnav">',
 19         '<div class="{baseCls}-yearnav-button-ct">',
 20         '<a id="{id}-prevEl" data-ref="prevEl" class="{baseCls}-yearnav-button {baseCls}-yearnav-prev" hidefocus="on" role="button"></a>',
 21         '</div>',
 22         '<div class="{baseCls}-yearnav-button-ct">',
 23         '<a id="{id}-nextEl" data-ref="nextEl" class="{baseCls}-yearnav-button {baseCls}-yearnav-next" hidefocus="on" role="button"></a>',
 24         '</div>',
 25         '</div>',
 26         '<tpl for="years">',
 27         '<div class="{parent.baseCls}-item {parent.baseCls}-year">',
 28         '<a hidefocus="on" class="{parent.baseCls}-item-inner" role="button">{.}</a>',
 29         '</div>',
 30         '</tpl>',
 31         '</div>',
 32         '<div class="' + Ext.baseCSSPrefix + 'clear"></div>',
 33         '<tpl if="showButtons">',
 34         '<div class="{baseCls}-buttons">{%',
 35         'var me=values.$comp, okBtn=me.okBtn, cancelBtn=me.cancelBtn;',
 36         'okBtn.ownerLayout = cancelBtn.ownerLayout = me.componentLayout;',
 37         'okBtn.ownerCt = cancelBtn.ownerCt = me;',
 38         'Ext.DomHelper.generateMarkup(okBtn.getRenderTree(), out);',
 39         'Ext.DomHelper.generateMarkup(cancelBtn.getRenderTree(), out);',
 40         '%}</div>',
 41         '</tpl>',
 42         '</div>'
 43     ],
 44
 45     //<locale>
 46     /**
 47      * @cfg {String} okText The text to display on the ok button.
 48      */
 49     okText: '确定',
 50     //</locale>
 51
 52     //<locale>
 53     /**
 54      * @cfg {String} cancelText The text to display on the cancel button.
 55      */
 56     cancelText: '取消',
 57     //</locale>
 58
 59     /**
 60      * @cfg {String} [baseCls='x-monthpicker']
 61      *  The base CSS class to apply to the picker element.
 62      */
 63     baseCls: Ext.baseCSSPrefix + 'monthpicker',
 64
 65     /**
 66      * @cfg {Boolean} showButtons True to show ok and cancel buttons below the picker.
 67      */
 68     showButtons: true,
 69
 70     /**
 71      * @cfg {String} [selectedCls='x-monthpicker-selected'] The class to be added to selected items in the picker.
 72      */
 73
 74     /**
 75      * @cfg {Date/Number[]} value The default value to set. See {@link #setValue}
 76      */
 77
 78     /**
 79      * @cfg {String}
 80      * The {@link Ext.button.Button#ui} to use for the month picker's footer buttons.
 81      */
 82     footerButtonUI: 'default',
 83
 84     measureWidth: 35,
 85     measureMaxHeight: 20,
 86
 87     // used when attached to date picker which isnt showing buttons
 88     smallCls: Ext.baseCSSPrefix + 'monthpicker-small',
 89
 90     /**
 91      * @private
 92      */
 93     totalYears: 10,
 94     yearOffset: 5, // 10 years in total, 2 per row
 95     monthOffset: 6, // 12 months, 2 per row
 96     alignOnScroll: false,
 97
 98     /**
 99      * @event cancelclick
100      * Fires when the cancel button is pressed.
101      * @param {Ext.picker.Month} this
102      */
103
104     /**
105      * @event monthclick
106      * Fires when a month is clicked.
107      * @param {Ext.picker.Month} this
108      * @param {Array} value The current value
109      */
110
111     /**
112      * @event monthdblclick
113      * Fires when a month is clicked.
114      * @param {Ext.picker.Month} this
115      * @param {Array} value The current value
116      */
117
118     /**
119      * @event okclick
120      * Fires when the ok button is pressed.
121      * @param {Ext.picker.Month} this
122      * @param {Array} value The current value
123      */
124
125     /**
126      * @event select
127      * Fires when a month/year is selected.
128      * @param {Ext.picker.Month} this
129      * @param {Array} value The current value
130      */
131
132     /**
133      * @event yearclick
134      * Fires when a year is clicked.
135      * @param {Ext.picker.Month} this
136      * @param {Array} value The current value
137      */
138
139     /**
140      * @event yeardblclick
141      * Fires when a year is clicked.
142      * @param {Ext.picker.Month} this
143      * @param {Array} value The current value
144      */
145
146     /**
147      * @inheritdoc
148      * @private
149      */
150     initComponent: function () {
151         var me = this;
152
153         me.selectedCls = me.baseCls + '-selected';
154
155         if (me.small) {
156             me.addCls(me.smallCls);
157         }
158         me.setValue(me.value);
159         me.activeYear = me.getYear(new Date().getFullYear() - 4, -4);
160
161         if (me.showButtons) {
162             me.okBtn = new Ext.button.Button({
163                 ui: me.footerButtonUI,
164                 text: me.okText,
165                 handler: me.onOkClick,
166                 scope: me
167             });
168             me.cancelBtn = new Ext.button.Button({
169                 ui: me.footerButtonUI,
170                 text: me.cancelText,
171                 handler: me.onCancelClick,
172                 scope: me
173             });
174         }
175
176         this.callParent();
177     },
178
179     /**
180      * @inheritdoc
181      * @private
182      */
183     beforeRender: function () {
184         var me = this;
185
186         if (me.padding && !me.width) {
187             me.cacheWidth();
188         }
189
190         me.callParent();
191
192         Ext.apply(me.renderData, {
193             years: me.getYears(),
194             showButtons: me.showButtons
195         });
196     },
197
198     cacheWidth: function () {
199         var me = this,
200             padding = me.parseBox(me.padding),
201             widthEl = Ext.getBody().createChild({
202                 cls: me.baseCls + ' ' + me.borderBoxCls,
203                 style: 'position:absolute;top:-1000px;left:-1000px;',
204                 html: '&nbsp;' // required for opera 11.64 to measure a width
205             });
206
207         me.self.prototype.width = widthEl.getWidth() + padding.left + padding.right;
208         widthEl.destroy();
209     },
210
211     /**
212      * @inheritdoc
213      * @private
214      */
215     afterRender: function () {
216         var me = this,
217             body = me.bodyEl;
218
219         me.callParent();
220
221         me.el.on('mousedown', me.onElClick, me, {
222             translate: false
223         });
224
225         body.on({
226             scope: me,
227             click: 'onBodyClick',
228             dblclick: 'onBodyClick'
229         });
230
231         // keep a reference to the year/month elements since we'll be re-using them
232         me.years = body.select('.' + me.baseCls + '-year a');
233
234         me.backRepeater = new Ext.util.ClickRepeater(me.prevEl, {
235             handler: Ext.Function.bind(me.adjustYear, me, [-me.totalYears])
236         });
237
238         me.prevEl.addClsOnOver(me.baseCls + '-yearnav-prev-over');
239         me.nextRepeater = new Ext.util.ClickRepeater(me.nextEl, {
240             handler: Ext.Function.bind(me.adjustYear, me, [me.totalYears])
241         });
242         me.nextEl.addClsOnOver(me.baseCls + '-yearnav-next-over');
243         me.updateBody();
244
245     },
246
247     /**
248      * Set the value for the picker.
249      * @param {Date/Number[]} value The value to set. It can be a Date object, where the month/year will be extracted, or
250      * it can be an array, with the month as the first index and the year as the second.
251      * @return {Ext.picker.Month} this
252      */
253     setValue: function (value) {
254         var me = this,
255             active = me.activeYear,
256             year;
257
258         if (!value) {
259             me.value = [null, null];
260         } else if (Ext.isDate(value)) {
261             me.value = [value.getMonth(), value.getFullYear()];
262         } else {
263             me.value = [value[0], value[1]];
264         }
265
266         if (me.rendered) {
267             year = me.value[1];
268             if (year !== null) {
269                 if ((year < active || year > active + me.yearOffset)) {
270                     me.activeYear = year - me.yearOffset + 1;
271                 }
272             }
273             me.updateBody();
274         }
275
276         return me;
277     },
278
279     /**
280      * Gets the selected value. It is returned as an array [month, year]. It may
281      * be a partial value, for example [null, 2010]. The month is returned as
282      * 0 based.
283      * @return {Number[]} The selected value
284      */
285     getValue: function () {
286         return this.value;
287     },
288
289     /**
290      * Checks whether the picker has a selection
291      * @return {Boolean} Returns true if both a month and year have been selected
292      */
293     hasSelection: function () {
294         var value = this.value;
295         return value[0] !== null && value[1] !== null;
296     },
297
298     /**
299      * Get an array of years to be pushed in the template. It is not in strict
300      * numerical order because we want to show them in columns.
301      * @private
302      * @return {Number[]} An array of years
303      */
304     getYears: function () {
305         var me = this,
306             offset = me.yearOffset,
307             start = me.activeYear, // put the "active" year on the left
308             end = start + offset,
309             i = start,
310             years = [];
311
312         for (; i < end; ++i) {
313             years.push(i, i + offset);
314         }
315
316         return years;
317     },
318
319     /**
320      * Update the years in the body based on any change
321      * @private
322      */
323     updateBody: function () {
324         var me = this,
325             years = me.years,
326             yearNumbers = me.getYears(),
327             cls = me.selectedCls,
328             value = me.getYear(null),
329             year,
330             yearItems, y, yLen, el;
331
332         if (me.rendered) {
333             years.removeCls(cls);
334
335             yearItems = years.elements;
336             yLen = yearItems.length;
337
338             for (y = 0; y < yLen; y++) {
339                 el = Ext.fly(yearItems[y]);
340
341                 year = yearNumbers[y];
342                 el.dom.innerHTML = year;
343                 if (year === value) {
344                     el.addCls(cls);
345                 }
346             }
347         }
348     },
349
350     /**
351      * Gets the current year value, or the default.
352      * @private
353      * @param {Number} defaultValue The default value to use if the year is not defined.
354      * @param {Number} offset A number to offset the value by
355      * @return {Number} The year value
356      */
357     getYear: function (defaultValue, offset) {
358         var year = this.value[1];
359         offset = offset || 0;
360         return year === null ? defaultValue : year + offset;
361     },
362
363     onElClick: function (e) {
364         e.stopEvent();
365     },
366
367     /**
368      * React to clicks on the body
369      * @private
370      */
371     onBodyClick: function (e, t) {
372         var me = this,
373             isDouble = e.type === 'dblclick';
374
375         if (e.getTarget('.' + me.baseCls + '-year')) {
376             e.stopEvent();
377             me.onYearClick(t, isDouble);
378         }
379     },
380
381     /**
382      * Modify the year display by passing an offset.
383      * @param {Number} [offset=10] The offset to move by.
384      */
385     adjustYear: function (offset) {
386         if (typeof offset !== 'number') {
387             offset = this.totalYears;
388         }
389         this.activeYear += offset;
390         this.updateBody();
391     },
392
393     /**
394      * React to the ok button being pressed
395      * @private
396      */
397     onOkClick: function () {
398         this.fireEvent('okclick', this, this.value);
399     },
400
401     /**
402      * React to the cancel button being pressed
403      * @private
404      */
405     onCancelClick: function () {
406         this.fireEvent('cancelclick', this);
407     },
408
409     /**
410      * React to a year being clicked
411      * @private
412      * @param {HTMLElement} target The element that was clicked
413      * @param {Boolean} isDouble True if the event was a doubleclick
414      */
415     onYearClick: function (target, isDouble) {
416         var me = this;
417         me.value[1] = me.activeYear + me.resolveOffset(me.years.indexOf(target), me.yearOffset);
418         me.updateBody();
419         me.fireEvent('year' + (isDouble ? 'dbl' : '') + 'click', me, me.value);
420         me.fireEvent('select', me, me.value);
421
422     },
423
424     /**
425      * Returns an offsetted number based on the position in the collection. Since our collections aren't
426      * numerically ordered, this function helps to normalize those differences.
427      * @private
428      * @param {Object} index
429      * @param {Object} offset
430      * @return {Number} The correctly offsetted number
431      */
432     resolveOffset: function (index, offset) {
433         if (index % 2 === 0) {
434             return (index / 2);
435         }
436         return offset + Math.floor(index / 2);
437     },
438
439     /**
440      * @inheritdoc
441      * @private
442      */
443     beforeDestroy: function () {
444         var me = this;
445         me.years = me.months = null;
446         Ext.destroyMembers(me, 'backRepeater', 'nextRepeater', 'okBtn', 'cancelBtn');
447         me.callParent();
448     },
449
450     onDestroy: function () {
451         Ext.destroyMembers(this, 'okBtn', 'cancelBtn');
452         this.callParent();
453     },
454
455     privates: {
456         // Do the job of a container layout at this point even though we are not a Container.
457         // TODO: Refactor as a Container.
458         finishRenderChildren: function () {
459             var me = this;
460
461             this.callParent(arguments);
462
463             if (this.showButtons) {
464                 me.okBtn.finishRender();
465                 me.cancelBtn.finishRender();
466             }
467         }
468     }
469 });

 1 //只选择年的控件
 2 Ext.define('ux.form.field.Year', {
 3     extend: 'Ext.form.field.Date',
 4     alias: 'widget.uxYearfield',
 5     xtype: 'uxYearfield',
 6     requires: ['ux.picker.Year'],
 7     format: 'Y',
 8     selectYear: new Date(),
 9     createPicker: function () {
10         var me = this;
11         return new ux.picker.Year({
12             value: new Date(),
13             renderTo: document.body,
14             floating: true,
15             hidden: true,
16             focusOnShow: true,
17             listeners: {
18                 scope: me,
19                 select: me.onSelect,
20                 cancelclick: me.onCancelClick,
21                 okclick: me.onOKClick,
22                 yeardblclick: me.onOKClick,
23                 monthdblclick: me.onOKClick
24             }
25         });
26     },
27     onCancelClick: function () {
28         var me = this;
29         me.selectYear = null;
30         me.collapse();
31     },
32     onOKClick: function () {
33         var me = this;
34         if (me.selectYear) {
35             me.setValue(me.selectYear);
36             me.fireEvent('select', me, me.selectYear);
37         }
38         me.collapse();
39     },
40     onSelect: function (m, d) {
41         var me = this;
42         me.selectYear = new Date((d[0] + 1) + '/1/' + d[1]);
43     }
44 });