> 웹 프론트엔드 > JS 튜토리얼 > extjs 시간 범위 Selection_extjs 자동 판단을 위한 구현 코드

extjs 시간 범위 Selection_extjs 자동 판단을 위한 구현 코드

WBOY
풀어 주다: 2016-05-16 16:43:23
원래의
1288명이 탐색했습니다.

extjs에서는 날짜 범위를 선택해야 하는 경우가 있는데, 이를 자동으로 판단해야 합니다. 선택한 시작 날짜는 종료 날짜보다 클 수 없거나, 종료 날짜는 시작 날짜보다 작을 수 없습니다. 다음과 같이

렌더링:

위 그림에서 볼 수 있듯이 시작 시간을 선택하면 종료 시간의 선택 범위가 자동으로 제한되어 두 날짜 선택기의 연결이 구현됩니다

.

코드는 다음과 같습니다.

먼저 연결 처리 기능을 정의합니다.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

Ext.apply(Ext.form.field.VTypes, {

daterange: function (val, field) {

var date = field.parseDate(val);

 

if (!date) {

return false;

}

if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {

var start = field.up('grid').down('#' + field.startDateField);

start.setMaxValue(date);

start.validate();

this.dateRangeMax = date;

}

else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {

var end = field.up('grid').down('#' + field.endDateField);

end.setMinValue(date);

end.validate();

this.dateRangeMin = date;

}

return true;

},

daterangeText: '开始日期必须小于结束日期'

});

Ext.tip.QuickTipManager.init();

로그인 후 복사

tbar, bbar 또는 양식의 항목에 추가:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

{

xtype: 'datefield',

fieldLabel: '时间范围 开始',

name: 'startdt',

id: 'startdt',

vtype: 'daterange',

endDateField: 'enddt',

format: 'Y-m-d',

width: 220,

labelWidth: 90,

msgTarget: 'side',

autoFitErrors: false

}, {

xtype: 'datefield',

fieldLabel: '结束',

name: 'enddt',

id: 'enddt',

vtype: 'daterange',

startDateField: 'startdt',

format: 'Y-m-d',

width: 170,

labelWidth: 40,

msgTarget: 'side',

autoFitErrors: false

}, { xtype: 'button',

text: '查询',

iconCls: 'fljs',

handler: function () { ...

로그인 후 복사

위의 효과를 얻을 수 있는 코드는 extjs4.1.1에서 복사하여 실행하는 것입니다.

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿