Extjs项目中uxForm.js
2014-02-28 10:55
489 查看
Ext.namespace("Ext.ux");
Ext.override(Ext.form.TextField, { //区别汉字和英文的长度
validateValue : function(value){
var strLen = this.countStrLen(value);
if(value.length < 1 || value === this.emptyText){ // if it's blank
if(this.allowBlank){
this.clearInvalid();
return true;
}else{
this.markInvalid(this.blankText);
return false;
}
}
if(value.length < this.minLength){
this.markInvalid(String.format(this.minLengthText, this.minLength));
return false;
}
if(strLen > this.maxLength){
this.markInvalid(String.format(this.maxLengthText, this.maxLength));
return false;
}
if(this.vtype){
var vt = Ext.form.VTypes;
if(!vt[this.vtype](value, this)){
this.markInvalid(this.vtypeText || vt[this.vtype +'Text']);
return false;
}
}
if(typeof this.validator == "function"){
var msg = this.validator(value);
if(msg !== true){
this.markInvalid(msg);
return false;
}
}
if(this.regex && !this.regex.test(value)){
this.markInvalid(this.regexText);
return false;
}
return true;
},
countStrLen: function(strTemp) { //计算字符串的长度,区分英文和汉字
var i,sum;
sum=0;
for(i=0;i<strTemp.length;i++) {
if ((strTemp.charCodeAt(i)>=0) && (strTemp.charCodeAt(i)<=255))
sum=sum+1;
else
sum=sum+2;
}
return sum;
}
});
Ext.ux.Form = Ext.extend(Ext.form.FormPanel, {
frame: true,
bodyStyle:"padding: 5px 5px 0",
initComponent: function() {
Ext.ux.Form.superclass.initComponent.call(this);
},
initEvents : function(){
Ext.ux.Form.superclass.initEvents.call(this);
},
createButton: function(text,handler) {
var btn = new Ext.Button({
text: text,
handler: handler
});
return btn;
},
createTextField: function(fieldLabel, name, anchor, blankText, vtype, maxLength, maxLengthText,inputType, colspan) { //生成一个通用的TextField
var tf = new Ext.form.TextField({
fieldLabel: fieldLabel,
name: name,
xtype: 'textfield',
readOnly: false,
allowBlank: false,
anchor: anchor,
blankText: '该选项为必填项,请输入内容...',
vtype: vtype,
maxLength: maxLength,
maxLengthText: maxLengthText,
inputType:inputType,
colspan: colspan
});
return tf;
},
createNumberField: function(fieldLabel, name, anchor, decimalPrecision, colspan) { //生成一个通用的TextField
var nf = new Ext.form.NumberField({
fieldLabel: fieldLabel,
name: name,
readOnly: false,
allowBlank: false,
allowNegative :false,//值为false时只允许为正数(默认为 true，即默认允许为负数)
decimalPrecision :decimalPrecision ,//设置小数点后最大精确位数(默认为 2)。
anchor: anchor,
cls:'forbiddenZH',//禁用中文输入法
blankText: '该选项为必填项,请输入内容...',
colspan: colspan
});
return nf;
},
createPassWordField: function(fieldLabel, name, anchor, blankText, vtype, maxLength, maxLengthText) { //生成一个通用的密码输入框
var tf = new Ext.form.TextField({
fieldLabel: fieldLabel,
name: name,
xtype: 'textfield',
inputType :'password',
readOnly: false,
allowBlank: false,
anchor: anchor,
blankText: '该选项为必填项,请输入内容...',
vtype: vtype,
maxLength: maxLength,
maxLengthText: maxLengthText
});
return tf;
},
createRadio: function(boxLabel,name,checked,inputValue) { //生成一个通用的Radio
var radio = new Ext.form.Radio({
boxLabel:boxLabel,
checked:checked,
name:name,
labelSeparator:"",
inputValue:inputValue,
anchor:"90%"
});
return radio;
},
createCombo: function(fieldLabel,id,name,formName,anchor,url,extra1,extra2,colspan) { //生成一个通用的ComboBox
var combo = new Ext.form.ComboBox({
colspan:colspan,
autoLoad: true,
fieldLabel: fieldLabel,
emptyText: '请选择...',
isFormField: true,
anchor: anchor,
mode: 'local',//数据模式，local代表本地数据
hiddenName :formName,//提交到后台的input的name，重要
name:formName,//name只是改下拉的名称，几乎没有作用
allowBlank: false,
blankText:'请选择...',
forceSelection: true,//必须选择一个选项
lastQuery: '',
triggerAction: 'all',//显示所有下列数据，一定要设置属性triggerAction为all
displayField:name,//显示文本
valueField:id,//form提交的值 重要
store: new Ext.data.Store({//填充数据
proxy: new Ext.data.HttpProxy({url: url, method: 'POST'}),
reader: new Ext.data.JsonReader({},new Ext.data.Record.create([{name:id},{name:name},{name:extra1},{name:extra2}]))
}),
editable : false
});
return combo;
},
createSearchCombo: function(fieldLabel,id,name,formName,anchor,url,extra1,extra2,colspan) { //生成一个支持模糊查询的ComboBox
var comboBox = new Ext.form.ComboBox({
colspan:colspan,
autoLoad: true,
fieldLabel: fieldLabel,
typeAhead: false,
emptyText: '请选择...',
triggerAction: 'all',
isFormField: true,
anchor: anchor,
mode: 'local',
hiddenName :formName,
name:formName,
allowBlank: false,
blankText:'请选择...',
forceSelection: true,
lastQuery: '',
displayField:name,
valueField:id,
selectOnFocus: true,
store: new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: url, method: 'POST'}),
reader: new Ext.data.JsonReader({},new Ext.data.Record.create([{name:id},{name:name},{name:extra1},{name:extra2}]))
}),
editable : true,
listeners : {
'beforequery':function(e){
var combo = e.combo;
combo.collapse();
if(!e.forceAll){
var value = e.query;
combo.store.filterBy(function(record,id){
var text = record.get(combo.displayField);
//用自己的过滤规则,如写正则式
return (text.indexOf(value)!=-1); //实现的核心
});
combo.onLoad();
combo.expand();
return false;
}
},
'focus':function(combo){
combo.store.load();
}
}
});
return comboBox;
},
createMemoryCombo: function(fieldLabel,id,name,anchor,jsonData,formName) {
var combo = new Ext.form.ComboBox({
fieldLabel: fieldLabel,
emptyText: '请选择...',
isFormField: true,
anchor: anchor,
mode: 'local',
name: formName,
hiddenName :formName,
allowBlank: false,
blankText:'请选择...',
forceSelection: true,
triggerAction: 'all',
displayField:name,
valueField:id,
store: new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(jsonData),
reader: new Ext.data.JsonReader({},new Ext.data.Record.create([{name:id},{name:name}]))
}),
editable : false
});
return combo;
},
/**
* 生成一个通用的查询数据字典combo,此函数依赖于ST.ux.ExtField.js文件
* @param fieldLabel
* @param formName
* @param anchor
* @param dictTypeCode
* @param showAll 是否显示全部 true/false
* @returns {ST.ux.ExtField.ComboBox}
*/
createDictCombo: function(fieldLabel, formName, anchor, dictTypeCode, colspan) { //生成一个通用的ComboBox
var combo = new Ext.form.ComboBox({
colspan:colspan,
autoLoad: true,
fieldLabel: fieldLabel,
emptyText: '请选择...',
isFormField: true,
anchor: anchor,
mode: 'local',
hiddenName :formName,
name:formName,
allowBlank: true,
blankText:'请选择...',
forceSelection: true,
lastQuery: '',
triggerAction: 'all',
displayField:'name',
valueField:'code',
store: new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: '/dict/queryDictEntries', method: 'POST'}),
reader: new Ext.data.JsonReader({},new Ext.data.Record.create([{name:'code'},{name:'name'}]))
}),
editable : false
});
combo.store.load({params: {dictTypeCode: dictTypeCode}});
return combo;
},
/**
* 生成一个通用的本地combo
* @param {} jsonData 格式必须是：[['-1','请选择…'],['1', '是'],['0', '否']]
* @param {} anchor
* @param {} allowBlank
* @param {} helpText 帮助文本
* @return {}
*/
createSimpleCombo: function(fieldLabel,jsonData,anchor,allowBlank,helpText) {
var itemCls=(allowBlank?'':'required-field');
var dataStore = new Ext.data.SimpleStore({
fields : ['id', 'name'],
data : jsonData
});
var combox = new Ext.form.ComboBox({
fieldLabel : fieldLabel,
emptyText : "请选择...",
store : dataStore,
editable : false,
hiddenName : 'id',
valueField : 'id',
displayField : 'name',
typeAhead : true,
triggerAction : 'all',
selectOnFocus : true,
anchor: anchor,
itemCls:itemCls,
allowBlank:allowBlank,
mode : 'local'
});
return combox;
},
createTextArea: function(fieldLabel,name,height,anchor, colspan) {
var ta = new Ext.form.TextArea({
fieldLabel:fieldLabel,
name:name,
height:height,
anchor:anchor,
colspan:colspan
});
return ta;
},
createHidden: function(fieldLabel,name) {
var hidden = new Ext.form.Hidden({
fieldLabel:fieldLabel,
name:name
});
return hidden;
},
createHtmlEditor: function(fieldLabel, anchor) { //生成一个通用的HtmlEditor
var he = new Ext.form.HtmlEditor({
fieldLabel: fieldLabel,
height: 270,
anchor: anchor,
enableLinks: false,
enableSourceEdit: false,
fontFamilies:['宋体','隶书','黑体']
});
return he;
},
createButton: function(text,fn,scope) {
var btn = new Ext.Button({
align: 'left',
text: text,
handler: fn,
scope: scope
});
return btn;
},
createDateField: function(fieldLabel, name, format, anchor) {
var df = new Ext.form.DateField({
fieldLabel: fieldLabel,
name: name,
format: format,
anchor: anchor,
allowBlank: false,
editable:false,//不能手动输入
blankText: '请选择时间'
});
return df;
},
createLabel: function(fieldLabel,text) {
var label = new Ext.form.Label({
width: 90,
height: 40,
fieldLabel: fieldLabel,
text: text
});
return label;
},
createDateMonthField: function(fieldLabel, name, format, anchor) {
var df = new Ext.form.DateField({
fieldLabel: fieldLabel,
plugins: 'monthPickerPlugin',
name: name,
format: format,
anchor: anchor,
allowBlank: false,
editable:false,//不能手动输入
blankText: '请选择时间'
});
return df;
},
/**
* 创建下拉树
* @param fieldLabel 标签
* @param rootName 根节点名子
* @param hiddenName
* @param url 请求URL
* @param anchor
* @returns
*/
createTreeCombo: function(fieldLabel, rootName, hiddenName, url, anchor) {
var df = new Ext.ux.TreeCombo({
fieldLabel:fieldLabel,
rootVisible: false,
url: url,
allowBlank: false,
hiddenName: hiddenName,
name:hiddenName,
rootName: rootName,
anchor: anchor
});
return df;
}
});
Ext.reg("uxForm", Ext.ux.Form);
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Eclipse Javascript插件，像写Java一样写JS —— Spket，支持ExtJS
- VSCode配合chrome浏览器调试cocos2d js项目
- ExtJS初探：在项目中使用ExtJS
- 为extjs项目添加图表支持
- ExtJs4 笔记（2） ExtJs对js基本语法扩展支持
- 导入myeclipse项目时min.js文件出现Multiple markers at this line错误
- ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合一：构建项目框架
- Chart.js在Laravel项目中的应用示例
- Vue.js写项目时需要弹出新窗口，并且新窗口可以独立刷新黑科技
- node.js 使用域账号登陆电脑 同一域 可以访问调试项目
- vue.js项目打包上线的图文教程
- webpack打包node.js后端项目的方法
- 细说Cocos2d-JS——项目如何Run起来
- Vue.jsbrowserify项目模板
- js实现卡片式项目管理界面UI设计效果
- Maven项目中压缩js和Css代码
- 在django项目中加入像bootstrap这样的css，js等静态文件
- 创建Vue.js 项目
- vue项目中，main.js,App.vue,index.html如何调用
- 原生JS完成todolist小项目