Ext에서 날짜 구간 선택 구성 요소
/**
*
* @class Ext.form.uxDateAreaField
* @extends Ext.Container
*/
Ext.form.uxDateAreaField = Ext.extend(Ext.Container,{
single : true,//
paramName : [null,null],
format : 'Y-m-d',//
separator : ',',// ，
allowBlank : true,
disabled : false,
blankText : ' ',
msgTarget : 'qtip',//
invalidText : ' ',
invalidClass : 'x-form-invalid',
disabledClass : 'x-item-disabled',
preventMark : false,//true
//private
cls : 'x-form-text x-form-field',
//private
isFormField : true,
//private
activeField : null,
initComponent : function(){
Ext.form.uxDateAreaField.superclass.initComponent.call(this);
this.startName = this.single?null:(this.paramName[0] || (this.name + 'Start'));
this.endName = this.single?null:(this.paramName[1] || (this.name + 'End'));
this.menu = new Ext.menu.DateMenu({
scope : this,
handler : function(picker,date){
if(!Ext.isEmpty(this.activeField)){
this.activeField.setValue(date.format(this.format));
var b = this.validateValue();
if(b && !Ext.isEmpty(this.hiddenField)){
this.hiddenField.setValue(this.getValue());
}
}
}
});
//
this.startField = new Ext.form.TextField({
style : 'border:none;text-align:center;margin-left:-3px;',
cls : 'ux-datearea-field',
name : this.startName,
disabled : this.disabled,
listeners : {
scope : this,
'focus' : function(field){
this.activeField = field;
this.addClass('x-form-focus');
this.menu.show(field.el, "tl-bl?");
},
'blur' : function(){
this.removeClass('x-form-focus');
this.validateValue();
},
'render' : function(field){
field.removeClass('x-form-text');
if(this.single/* || Ext.isEmpty(this.name)*/){
field.el.dom.name = null;
}else{
this.remove(this.hiddenField);
}
}
}
});
//
this.displayField = new Ext.form.DisplayField({
cls : 'ux-datearea-field',
style : 'padding-top: 3px;line-height:normal;',
width : 16,
value : ' '
});
this.endField = this.startField.cloneConfig({
name : this.endName
});
this.hiddenField = new Ext.form.Hidden({
ref : 'containerField',
name : this.name,
disabled : this.disabled
});
this.add(this.startField,this.displayField,this.endField,this.hiddenField);
this.setDisabled(this.disabled);
this.on('resize',function(){
this.fixWidth();
this.el.setStyle({
'padding-top' : '0px',
'height' : Ext.isIE?'22px':'21px'
});
},this);
},
disable : function(){
if(this.rendered){
this.addClass(this.disabledClass);
this.startField.disable();
this.endField.disable();
}
this.disabled = true;
return this;
},
enable : function(){
if(this.rendered){
this.removeClass(this.disabledClass);
this.startField.enable();
this.endField.enable();
}
this.disabled = false;
return this;
},
//private
validateValue : function(){
var startValue = this.startField.getValue();
var endValue = this.endField.getValue();
if(!Ext.isEmpty(startValue) && !Ext.isEmpty(endValue)){
if(startValue > endValue){
this.markInvalid();
return false;
}else{
this.clearInvalid();
return true;
}
}else if(!this.allowBlank){
this.markInvalid(this.blankText);
return false;
}
return true;
},
validate : function(){
if(!this.disabled){
return this.validateValue();
}
return true;
},
//private
fixWidth : function(){
var calcWidth = (this.el.getComputedWidth() - 24)/2;
this.startField.setWidth(calcWidth + 3);
this.endField.setWidth(calcWidth + 3);
},
//private
getMessageHandler : function(){
return Ext.form.MessageTargets[this.msgTarget];
},
//
getValue : function(){
var start = this.startField.getValue();
var end = this.endField.getValue();
if(this.single){
return start + this.separator + end;
}else{
return [start,end];
}
},
//
setValue : function(v){
this.value = v;
if(this.rendered){
if(Ext.isEmpty(v)){
this.startField.setValue('');
this.endField.setValue('');
if(!this.allowBlank){
this.validateValue();
}
}else{
if(Ext.isString(v)){
var valueArray = v.split(this.separator);
this.startField.setValue(valueArray[0]);
this.endField.setValue(valueArray[1]);
}
if(Ext.isArray(v)){
this.startField.setValue(v[0]);
this.endField.setValue(v[1]);
}
if(Ext.isObject(v)){
this.startField.setValue(v[this.startName]);
this.endField.setValue(v[this.endName]);
}
}
this.validateValue();
}
return this;
},
markInvalid : function(msg){
if (this.rendered && !this.preventMark) {
msg = msg || this.invalidText;
var mt = this.getMessageHandler();
if(mt){
mt.mark(this, msg);
this.startField.addClass('ux-dataarea-invalid');
this.endField.addClass('ux-dataarea-invalid');
this.displayField.addClass('ux-dataarea-invalid');
}else if(this.msgTarget){
this.el.addClass(this.invalidClass);
this.startField.addClass('ux-dataarea-invalid');
this.endField.addClass('ux-dataarea-invalid');
this.displayField.addClass('ux-dataarea-invalid');
var t = Ext.getDom(this.msgTarget);
if(t){
t.innerHTML = msg;
t.style.display = this.msgDisplay;
}
}
}
},
afterRender : function(){
Ext.form.uxDateAreaField.superclass.afterRender.call(this);
// this.initEvents();
this.initValue();
if(!this.single){
this.remove(this.hiddenField);
}
},
initValue : function(){
if(this.value !== undefined){
this.setValue(this.value);
}else /*if(!Ext.isEmpty(this.el.dom.value) && this.el.dom.value != this.emptyText)*/{
this.setValue('');
}
this.originalValue = this.getValue();
},
reset : function(){
this.setValue(this.originalValue);
this.clearInvalid();
},
clearInvalid : function(){
if (this.rendered && !this.preventMark) {
this.el.removeClass(this.invalidClass);
this.startField.removeClass('ux-dataarea-invalid');
this.endField.removeClass('ux-dataarea-invalid');
this.displayField.removeClass('ux-dataarea-invalid');
var mt = this.getMessageHandler();
if(mt){
mt.clear(this);
}else if(this.msgTarget){
this.el.removeClass(this.invalidClass);
this.startField.removeClass('ux-dataarea-invalid');
this.endField.removeClass('ux-dataarea-invalid');
this.displayField.removeClass('ux-dataarea-invalid');
var t = Ext.getDom(this.msgTarget);
if(t){
t.innerHTML = '';
t.style.display = 'none';
}
}
}
},
getName : function(){
return this.rendered && this.el.dom.name ? this.el.dom.name : this.name || this.id || '';
},
getErrorCt : function(){
return this.el.findParent('.x-form-element', 5, true) ||
this.el.findParent('.x-form-field-wrap', 5, true);
},
// Alignment for 'under' target
alignErrorEl : function(){
this.errorEl.setWidth(this.getErrorCt().getWidth(true) - 20);
},
// Alignment for 'side' target
alignErrorIcon : function(){
this.errorIcon.alignTo(this.el, 'tl-tr', [2, 0]);
}
});
Ext.reg('dateareafield',Ext.form.uxDateAreaField);
사용할 스타일은 다음과 같습니다.
.ux-datearea-field{
float:left;
background-color: #FFFFFF;
text-align:center;
padding-top: 4px;
background-image: url("../js/ext/resources/images/default/form/text-bg.gif");
}
.ux-dataarea-invalid{
background-color:#fbeced;
background-image: url("");
}
그림 파일은 첨부 파일에 있습니다.
실현된 효과는 첨부된 그림을 참고하세요
설명: 여러분은 구성 요소를 추출하고 이를 바탕으로 확장할 수 있으며 거의 모든 구간 클래스 조회를 실현할 수 있습니다
조작하기 편리하도록 하나의 설정 항목single이 있습니다. 이 설정 항목의 역할은 폼을 제출할 때 하나의 매개 변수를 제출하는지 두 개의 매개 변수를 제출하는지 제어하는 것입니다. 매개 변수를 제출할 때 이 두 날짜의 값은 하나의 구분 문자로 구분되고 두 개의 매개 변수로 제출할 때 다른 구성 요소와 같습니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Svelte에서 사용할 수 있는 UI 구성 요소 라이브러리를 요약했습니다.Svelte에서 사용할 수 있는 UI 구성 요소 라이브러리를 찾아서 요약했습니다. HP: GitHub: 원시 설계 시스템: GitHub: 원시 설계 시스템: GitHub: 원시 설계 시스템: GitHub: 원시 설계...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
