Extjs修改datefield日期插件
new Ext. Toolbar ( {
hidden: submitted,
xtype : 'form' ,
items : [
'数据日期:' , {
xtype: 'monthfield' ,
name: 'date' ,
format: 'Y-m' ,
hidden: true ,
labelWidth: 168 ,
id: 'month'
} , { {
width: 60 ,
text : '查询' ,
iconCls : "query-button" ,
handler : function ( ) {
var me= this ;
var date = null ;
var template = '$!{templateId}' + '_DATE' ;
var params= { templateId: template, date: null } ;
var fs= Ext. ComponentQuery. query ( 'textfield' , me. up ( 'toolbar' ) ) ;
params[ fs[ 1 ] . name] = date;
templateStore. proxy. extraParams = params;
templateStore. loadPage ( 1 ) ;
}
这个控件作用就是调用monthfield,生成年月的界面
Ext. define ( 'Ext.ux.form.MonthField' , {
extend: 'Ext.form.field.Picker' ,
alias: 'widget.monthfield' ,
format: "Y-m" ,
altFormats: "m/y|m/Y|m-y|m-Y|my|mY|y/m|Y/m|y-m|Y-m|ym|Ym" ,
triggerCls: Ext. baseCSSPrefix + 'form-date-trigger' ,
matchFieldWidth: false ,
startDay: new Date ( ) ,
initComponent: function ( ) {
var me = this ;
me. disabledDatesRE = null ;
me. callParent ( ) ;
} ,
initValue: function ( ) {
var me = this ,
value = me. value;
if ( Ext. isString ( value) ) {
me. value = Ext. Date. parse ( value, this . format) ;
}
if ( me. value)
me. startDay = me. value;
me. callParent ( ) ;
} ,
rawToValue: function ( rawValue) {
return Ext. Date. parse ( rawValue, this . format) || rawValue || null ;
} ,
valueToRaw: function ( value) {
return this . formatDate ( value) ;
} ,
formatDate: function ( date) {
return Ext. isDate ( date) ? Ext. Date. dateFormat ( date, this . format) : date;
} ,
createPicker: function ( ) {
var me = this ,
format = Ext. String. format;
return Ext. create ( 'Ext.picker.Month' , {
pickerField: me,
ownerCt: me. ownerCt,
renderTo: document. body,
floating: true ,
shadow: false ,
height: 200 ,
focusOnShow: true ,
listeners: {
scope: me,
cancelclick: me. onCancelClick,
okclick: me. onOkClick,
yeardblclick: me. onOkClick,
monthdblclick: me. onOkClick
}
} ) ;
} ,
onExpand: function ( ) {
this . picker. setValue ( this . startDay) ;
} ,
onOkClick: function ( picker, value) {
var me = this ,
month = value[ 0 ] ,
year = value[ 1 ] ,
date = new Date ( year, month, 1 ) ;
me. startDay = date;
me. setValue ( date) ;
this . picker. hide ( ) ;
} ,
onCancelClick: function ( ) {
this . picker. hide ( ) ;
}
} ) ;
Ext. define ( 'Ext.picker.Year' , {
extend: Ext. Component ,
alias: 'widget.monthpicker' ,
alternateClassName: 'Ext.MonthPicker' ,
childEls: [
'bodyEl' , 'prevEl' , 'nextEl' , 'buttonsEl' , 'monthEl' , 'yearEl'
] ,
renderTpl: [
'<div id="{id}-bodyEl" class="{baseCls}-body">' ,
'<div id="{id}-monthEl" class="{baseCls}-months">' ,
'<tpl for="months">' ,
'<div class="{parent.baseCls}-item {parent.baseCls}-month">' ,
'<a style="{parent.monthStyle}" role="button" hidefocus="on" class="{parent.baseCls}-item-inner" href="#">{.}</a>' ,
'</div>' ,
'</tpl>' ,
'</div>' ,
'<div id="{id}-yearEl" class="{baseCls}-years">' ,
'<div class="{baseCls}-yearnav">' ,
'<div class="{baseCls}-yearnav-button-ct">' ,
'<a id="{id}-prevEl" class="{baseCls}-yearnav-button {baseCls}-yearnav-prev" href="#" hidefocus="on" role="button"></a>' ,
'</div>' ,
'<div class="{baseCls}-yearnav-button-ct">' ,
'<a id="{id}-nextEl" class="{baseCls}-yearnav-button {baseCls}-yearnav-next" href="#" hidefocus="on" role="button"></a>' ,
'</div>' ,
'</div>' ,
'<tpl for="years">' ,
'<div class="{parent.baseCls}-item {parent.baseCls}-year">' ,
'<a hidefocus="on" class="{parent.baseCls}-item-inner" role="button" href="#">{.}</a>' ,
'</div>' ,
'</tpl>' ,
'</div>' ,
'<div class="' + Ext. baseCSSPrefix + 'clear"></div>' ,
'<tpl if="showButtons">' ,
'<div id="{id}-buttonsEl" class="{baseCls}-buttons">{%' ,
'var me=values.$comp, okBtn=me.okBtn, cancelBtn=me.cancelBtn;' ,
'okBtn.ownerLayout = cancelBtn.ownerLayout = me.componentLayout;' ,
'okBtn.ownerCt = cancelBtn.ownerCt = me;' ,
'Ext.DomHelper.generateMarkup(okBtn.getRenderTree(), out);' ,
'Ext.DomHelper.generateMarkup(cancelBtn.getRenderTree(), out);' ,
'%}</div>' ,
'</tpl>' ,
'</div>'
] ,
okText: 'OK' ,
cancelText: 'Cancel' ,
baseCls: Ext. baseCSSPrefix + 'monthpicker' ,
showButtons: true ,
measureWidth: 35 ,
measureMaxHeight: 20 ,
smallCls: Ext. baseCSSPrefix + 'monthpicker-small' ,
totalYears: 10 ,
yearOffset: 5 ,
monthOffset: 6 ,
initComponent: function ( ) {
var me = this ;
me. selectedCls = me. baseCls + '-selected' ;
me. addEvents (
'cancelclick' ,
'monthclick' ,
'monthdblclick' ,
'okclick' ,
'select' ,
'yearclick' ,
'yeardblclick'
) ;
if ( me. small) {
me. addCls ( me. smallCls) ;
}
me. setValue ( me. value) ;
me. activeYear = me. getYear ( new Date ( ) . getFullYear ( ) - 4 , - 4 ) ;
if ( me. showButtons) {
me. okBtn = new Ext. button. Button ( {
text: me. okText,
handler: me. onOkClick,
scope: me
} ) ;
me. cancelBtn = new Ext. button. Button ( {
text: me. cancelText,
handler: me. onCancelClick,
scope: me
} ) ;
}
this . callParent ( ) ;
} ,
beforeRender: function ( ) {
var me = this ,
i = 0 ,
months = [ ] ,
shortName = Ext. Date. getShortMonthName,
monthLen = me. monthOffset,
margin = me. monthMargin,
style = '' ;
if ( me. padding && ! me. width) {
me. cacheWidth ( ) ;
}
me. callParent ( ) ;
for ( ; i < monthLen; ++ i) {
months. push ( shortName ( i) , shortName ( i + monthLen) ) ;
}
if ( Ext. isDefined ( margin) ) {
style = 'margin: 0 ' + margin + 'px;' ;
}
Ext. apply ( me. renderData, {
months: months,
years: me. getYears ( ) ,
showButtons: me. showButtons,
monthStyle: style
} ) ;
} ,
cacheWidth: function ( ) {
var me = this ,
padding = me. parseBox ( me. padding) ,
widthEl = Ext. getBody ( ) . createChild ( {
cls: me. baseCls + ' ' + me. borderBoxCls,
style: 'position:absolute;top:-1000px;left:-1000px;' ,
html: ' '
} ) ;
me. self. prototype. width = widthEl. getWidth ( ) + padding. left + padding. right;
widthEl. remove ( ) ;
} ,
afterRender: function ( ) {
var me = this ,
body = me. bodyEl,
buttonsEl = me. buttonsEl;
me. callParent ( ) ;
me. mon ( body, 'click' , me. onBodyClick, me) ;
me. mon ( body, 'dblclick' , me. onBodyClick, me) ;
me. years = body. select ( '.' + me. baseCls + '-year a' ) ;
me. months = body. select ( '.' + me. baseCls + '-month a' ) ;
me. backRepeater = new Ext. util. ClickRepeater ( me. prevEl, {
handler: Ext. Function. bind ( me. adjustYear, me, [ - me. totalYears] )
} ) ;
me. prevEl. addClsOnOver ( me. baseCls + '-yearnav-prev-over' ) ;
me. nextRepeater = new Ext. util. ClickRepeater ( me. nextEl, {
handler: Ext. Function. bind ( me. adjustYear, me, [ me. totalYears] )
} ) ;
me. nextEl. addClsOnOver ( me. baseCls + '-yearnav-next-over' ) ;
me. updateBody ( ) ;
if ( ! Ext. isDefined ( me. monthMargin) ) {
Ext. picker. Month. prototype. monthMargin = me. calculateMonthMargin ( ) ;
}
} ,
calculateMonthMargin: function ( ) {
var me = this ,
monthEl = me. monthEl,
months = me. months,
first = months. first ( ) ,
itemMargin = first. getMargin ( 'l' ) ;
while ( itemMargin && me. getLargest ( ) > me. measureMaxHeight) {
-- itemMargin;
months. setStyle ( 'margin' , '0 ' + itemMargin + 'px' ) ;
}
return itemMargin;
} ,
getLargest: function ( months) {
var largest = 0 ;
this . months. each ( function ( item) {
var h = item. getHeight ( ) ;
if ( h > largest) {
largest = h;
}
} ) ;
return largest;
} ,
setValue: function ( value) {
var me = this ,
active = me. activeYear,
offset = me. monthOffset,
year,
index;
if ( ! value) {
me. value = [ null , null ] ;
} else if ( Ext. isDate ( value) ) {
me. value = [ value. getMonth ( ) , value. getFullYear ( ) ] ;
} else {
me. value = [ value[ 0 ] , value[ 1 ] ] ;
}
if ( me. rendered) {
year = me. value[ 1 ] ;
if ( year !== null ) {
if ( ( year < active || year > active + me. yearOffset) ) {
me. activeYear = year - me. yearOffset + 1 ;
}
}
me. updateBody ( ) ;
}
return me;
} ,
getValue: function ( ) {
return this . value;
} ,
hasSelection: function ( ) {
var value = this . value;
return value[ 0 ] !== null && value[ 1 ] !== null ;
} ,
getYears: function ( ) {
var me = this ,
offset = me. yearOffset,
start = me. activeYear,
end = start + offset,
i = start,
years = [ ] ;
for ( ; i < end; ++ i) {
years. push ( i, i + offset) ;
}
return years;
} ,
updateBody: function ( ) {
var me = this ,
years = me. years,
months = me. months,
yearNumbers = me. getYears ( ) ,
cls = me. selectedCls,
value = me. getYear ( null ) ,
month = me. value[ 0 ] ,
monthOffset = me. monthOffset,
year,
yearItems, y, yLen, el;
if ( me. rendered) {
years. removeCls ( cls) ;
months. removeCls ( cls) ;
yearItems = years. elements;
yLen = yearItems. length;
for ( y = 0 ; y < yLen; y++ ) {
el = Ext. fly ( yearItems[ y] ) ;
year = yearNumbers[ y] ;
el. dom. innerHTML = year;
if ( year == value) {
el. addCls ( cls) ;
}
}
if ( month !== null ) {
if ( month < monthOffset) {
month = month * 2 ;
} else {
month = ( month - monthOffset) * 2 + 1 ;
}
months. item ( month) . addCls ( cls) ;
}
}
} ,
getYear: function ( defaultValue, offset) {
var year = this . value[ 1 ] ;
offset = offset || 0 ;
return year === null ? defaultValue : year + offset;
} ,
onBodyClick: function ( e, t) {
var me = this ,
isDouble = e. type == 'dblclick' ;
if ( e. getTarget ( '.' + me. baseCls + '-month' ) ) {
e. stopEvent ( ) ;
me. onMonthClick ( t, isDouble) ;
} else if ( e. getTarget ( '.' + me. baseCls + '-year' ) ) {
e. stopEvent ( ) ;
me. onYearClick ( t, isDouble) ;
}
} ,
adjustYear: function ( offset) {
if ( typeof offset != 'number' ) {
offset = this . totalYears;
}
this . activeYear += offset;
this . updateBody ( ) ;
} ,
onOkClick: function ( ) {
this . fireEvent ( 'okclick' , this , this . value) ;
} ,
onCancelClick: function ( ) {
this . fireEvent ( 'cancelclick' , this ) ;
} ,
onMonthClick: function ( target, isDouble) {
var me = this ;
me. value[ 0 ] = me. resolveOffset ( me. months. indexOf ( target) , me. monthOffset) ;
me. updateBody ( ) ;
me. fireEvent ( 'month' + ( isDouble ? 'dbl' : '' ) + 'click' , me, me. value) ;
me. fireEvent ( 'select' , me, me. value) ;
} ,
onYearClick: function ( target, isDouble) {
var me = this ;
me. value[ 1 ] = me. activeYear + me. resolveOffset ( me. years. indexOf ( target) , me. yearOffset) ;
me. updateBody ( ) ;
me. fireEvent ( 'year' + ( isDouble ? 'dbl' : '' ) + 'click' , me, me. value) ;
me. fireEvent ( 'select' , me, me. value) ;
} ,
resolveOffset: function ( index, offset) {
if ( index % 2 === 0 ) {
return ( index / 2 ) ;
} else {
return offset + Math. floor ( index / 2 ) ;
}
} ,
beforeDestroy: function ( ) {
var me = this ;
me. years = me. months = null ;
Ext. destroyMembers ( me, 'backRepeater' , 'nextRepeater' , 'okBtn' , 'cancelBtn' ) ;
me. callParent ( ) ;
} ,
finishRenderChildren: function ( ) {
var me = this ;
this . callParent ( arguments) ;
if ( this . showButtons) {
me. okBtn. finishRender ( ) ;
me. cancelBtn. finishRender ( ) ;
}
} ,
onDestroy: function ( ) {
Ext. destroyMembers ( this , 'okBtn' , 'cancelBtn' ) ;
this . callParent ( ) ;
}
} ) ;