2013년 11월 25일 월요일
plugin 을 이용한 포멧 변경
사용
====
formSet = new Ext.FormPanel({
id : 'searchForm',
frame: true,
waitMsgTarget: true,
defaultType: 'textfield',
items: [
{
//ID
name: 'cust_id',
renderTo : 'div_cust_id',
width : 150,
maxLength : 20,
vtype: 'notKor',
cls : 'input_color1',
allowBlank: false, //필수값
plugins: new Ext.ux.plugin.FormatNotHangul()
}, {
//전화
name: 'cpy_telno',
renderTo : 'div_cpy_telno',
width : 150,
vtype: 'phone',
cls : 'input_color1',
allowBlank: false,
plugins: new Ext.ux.plugin.FormatPhoneNumber()
}, {
//휴대전화
name: 'cpy_hp',
renderTo : 'div_cpy_hp',
width : 150,
vtype: 'phone',
cls : 'input_color1',
allowBlank: false,
plugins: new Ext.ux.plugin.FormatPhoneNumber()
}, {
name: 'email',
renderTo : 'div_email',
width : 150,
vtype: 'email',
cls : 'input_color1',
allowBlank: false
}, {
//월급
name: 'money',
renderTo : 'div_money',
width : 150,
vtype: 'money',
cls : 'input_color1',
allowBlank: false, //필수값
maxLength : 10,
plugins: new Ext.ux.plugin.FormatMoneyNumber()
//cls : 'input_type3'
}, {
//주민번호
name: 'jumin',
renderTo : 'div_jumin',
width : 150,
vtype: 'jumin',
plugins: new Ext.ux.plugin.FormatJuminNumber()
//cls : 'input_type3'
}, {
//사업자번호
name: 'bisid',
renderTo : 'div_bisid',
width : 150,
vtype: 'bisid',
plugins: new Ext.ux.plugin.FormatJuminNumber()
}, {
...
js file
=======
/*!
* Ext plugin
* Version 0.01
*
* Copyright : Yoon Hyuk-Shin
* http://www.kolonbenit.com
*
*/
Ext.namespace('Ext.ux.plugin');
//전화번호 포멧 변경
Ext.ux.plugin.FormatPhoneNumber = Ext.extend(Ext.form.TextField, {
init: function(c) {
c.on('change', this.onChange, this);
},
onChange: function(c) {
c.setValue(Ext.util.Format.phoneNumber(c.getValue()));
}
});
Ext.apply(Ext.util.Format, {
phoneNumber: function(value) {
var phoneNumber = value.replace(/\./g, '').replace(/-/g, '').replace(/[^0-9]/g, '');
console.log("!!!");
if (phoneNumber != '' && phoneNumber.length > 8) {
return phoneNumber.replace(/(^02.{0}|^01.{1}|[0-9]{3})([0-9]+)([0-9]{4})/,"$1-$2-$3");
} else {
return value.replace(/[^\-\.0-9]/g, '');
}
}
});
//금액 포멧 변경
Ext.ux.plugin.FormatMoneyNumber = Ext.extend(Ext.form.TextField, {
init: function(c) {
c.on('change', this.onChange, this);
},
onChange: function(c) {
c.setValue(Ext.util.Format.moneyNumber(c.getValue()));
}
});
Ext.apply(Ext.util.Format, {
moneyNumber: function(value) {
var reg = /(^[+-]?\d+)(\d{3})/;
var moneyNumber = value.replace(/,/g, '').replace(/[^\-\+\.0-9]/g, '');
if (moneyNumber != '' && moneyNumber.length > 3) {
while (reg.test(moneyNumber)) {
moneyNumber = moneyNumber.replace(reg, '$1' + ',' + '$2');
}
}
return moneyNumber;
}
});
//날짜(년월일) 포멧 변경
Ext.ux.plugin.FormatDateNumber = Ext.extend(Ext.form.TextField, {
init: function(c) {
c.on('change', this.onChange, this);
},
onChange: function(c) {
c.setValue(Ext.util.Format.dateNumber(c.getValue()));
}
});
Ext.apply(Ext.util.Format, {
dateNumber: function(value) {
var dateNumber = value.replace(/\./g, '').replace(/-/g, '').replace(/\//g, '').replace(/[^0-9]/g, '');
if (dateNumber != '' && dateNumber.length == 8) {
//console.log(">>>" + dateNumber);
return dateNumber.replace(/([0-9]{4})([0-9]{2})([0-9]{2})/,"$1-$2-$3");
} else {
return value.replace(/[^\-\/\.0-9]/g, '');
}
}
});
//날짜(년월일) 포멧 변경( xtype가 datefield일 경우)
Ext.ux.plugin.FormatDateField = Ext.extend(Ext.form.DateField, {
init: function(c) {
c.on('change', this.onChange, this);
},
onChange: function(c) {
c.setRawValue(Ext.util.Format.dateField(c.getRawValue()));
}
});
Ext.apply(Ext.util.Format, {
dateField: function(value) {
console.log(value);
var dateNumber = value.replace(/\./g, '').replace(/-/g, '').replace(/\//g, '').replace(/[^0-9]/g, '');
console.log(dateNumber);
if (dateNumber != '' && dateNumber.length == 8) {
//console.log(">>>" + dateNumber);
return dateNumber.replace(/([0-9]{4})([0-9]{2})([0-9]{2})/,"$1-$2-$3");
} else {
console.log(value.replace(/[^\-\/\.0-9]/g, ''));
return value.replace(/[^\-\/\.0-9]/g, '');
}
}
});
//날짜(년월) 포멧 변경
Ext.ux.plugin.FormatMonthNumber = Ext.extend(Ext.form.TextField, {
init: function(c) {
c.on('change', this.onChange, this);
},
onChange: function(c) {
c.setValue(Ext.util.Format.monthNumber(c.getValue()));
}
});
Ext.apply(Ext.util.Format, {
monthNumber: function(value) {
var monthNumber = value.replace(/\./g, '').replace(/-/g, '').replace(/\//g, '').replace(/[^0-9]/g, '');
if (monthNumber != '' && monthNumber.length == 6) {
//console.log(">>>" + monthNumber);
return monthNumber.replace(/([0-9]{4})([0-9]{2})/,"$1-$2");
} else {
return value.replace(/[^\-\/\.0-9]/g, '');
}
}
});
//주민번호 포멧 변경
Ext.ux.plugin.FormatJuminNumber = Ext.extend(Ext.form.TextField, {
init: function(c) {
c.on('change', this.onChange, this);
},
onChange: function(c) {
c.setValue(Ext.util.Format.juminNumber(c.getValue()));
}
});
Ext.apply(Ext.util.Format, {
juminNumber: function(value) {
var juminNumber = value.replace(/[^0-9]/g, '');
if (juminNumber != '' && juminNumber.length == 13) {
//console.log(">>>" + juminNumber);
return juminNumber.replace(/([0-9]{6})([0-9]{7})/,"$1-$2");
//return juminNumber;
} else {
return value.replace(/[^\-0-9]/g, '');
}
}
});
//사업자번호 포멧 변경
Ext.ux.plugin.FormatBisidNumber = Ext.extend(Ext.form.TextField, {
init: function(c) {
c.on('change', this.onChange, this);
},
onChange: function(c) {
c.setValue(Ext.util.Format.bisidNumber(c.getValue()));
}
});
Ext.apply(Ext.util.Format, {
bisidNumber: function(value) {
var bisidNumber = value.replace(/[^0-9]/g, '');
if (bisidNumber != '' && bisidNumber.length == 10) {
//console.log(">>>" + bisidNumber);
return bisidNumber.replace(/([0-9]{3})([0-9]{2})([0-9]{5})/,"$1-$2-$3");
//return bisidNumber;
} else {
return value.replace(/[^\-0-9]/g, '');
}
}
});
//한글입력 방지
Ext.ux.plugin.FormatNotHangul = Ext.extend(Ext.form.TextField, {
init: function(c) {
c.on('change', this.onChange, this);
},
onChange: function(c) {
var value = c.getValue().replace(/[\ㄱ-ㅎ가-힣]/g, '');;
c.setValue(value);
}
});
피드 구독하기:
댓글 (Atom)
댓글 없음:
댓글 쓰기