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()
           }, {
               //E-mail
               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);
}
});


댓글 없음:

댓글 쓰기