重写 Ext.form.field 扩展功能

直接代码,放项目overrides文件夹中即可

 1 //重写类 表单父类
 2 //支持allowBlank动态绑定
 3 Ext.define("override.form.field.Base", {
 4     override: "Ext.form.field.Base",
 5     //标签文字右对齐
 6     labelAlign: ‘right‘,
 7     setAllowBlank: function (value) {
 8         this.allowBlank = value;
 9         //如果不验证必填项,执行一下验证方法用来去掉警告
10         if (value) {
11             this.isValid();
12         }
13     }
14 });
//重写类 文本框
//汉化
//输入长度限制
//必填项自动标红加*
//修改必填项错误提示,提示更直观
Ext.define("override.form.field.Text", {
    override: "Ext.form.field.Text",
    invalidText: ‘输入内容无效‘,
    minLengthText: ‘最少输入{0}个字符‘,
    maxLengthText: ‘最多输入{0}个字符‘,
    blankText: ‘此项是必填项‘,
    //设置提示信息在文本框下方显示
    msgTarget: ‘under‘,
    //默认最大长度限制
    maxLength: 100,
    //输入过滤
    maskRe: /[_ %[email protected]\u4e00-\u9fa5]/,
    initComponent: function () {
        var me = this,
           label;
        me.callParent(arguments);
        if (me.fieldLabel) {
            //过滤掉空格字符
            label = me.fieldLabel.replace(/&..sp;/g, ‘‘);
            if (!me.emptyText) {
                //自动设置空值提示
                me.emptyText = ‘请输入‘ + label;
            }
            //必填项自动标红加*
            if (me.allowBlank === false) {
                //自动设置必填提示
                me.blankText = label + ‘为必填项‘;
                me.fieldLabel = ‘<font color=red>*</font>‘ + me.fieldLabel;
            }
        }
    }
});
时间: 2024-10-14 14:42:53

重写 Ext.form.field 扩展功能的相关文章

ExtJS4.2学习(17)表单基本输入控件Ext.form.Field(转)

鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-12-11/189.html ------------------------------------------------------------------------------------------- Ext.form.Field是所有表单输入控件的基类,其他的输入控件都是基于Ext.form.Field扩展得来的. Ext.form.Field

ExtJS4.2学习(17)表单基本输入控件Ext.form.Field

Ext.form.Field是所有表单输入控件的基类,其他的输入控件都是基于Ext.form.Field扩展得来的. Ext.form.Field中定义了输入控件通用的属性和功能函数,这些通用的属性和功能函数大致分为3大类:页面显示样式.控件参数配置和数据有效性检验.我们先来看看表单输入控件可以使用的校验显示方式.默认情况下,这些输入控件会监听blur事件,如果数据校验失败,就会根据msgTarget中的设置显示错误信息.通常,msgTarget会被设置为qtip,即使用QuickTip显示错误

ExtJs之Ext.form.field.TimePicker DatePicker组合框

<!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css" href="ExtJs/

ExtJs之Ext.form.field.ComboBox组合框

<!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css" href="ExtJs/

Ext.form.field.ComboBox组合框

1.Ext.form.field.ComboBox主要配置 Ext.form.field.ComboBox主要配置项 配置项 类型 说明 allQuery String 发往服务器用来查询全部信息的查询字符串,默认为空 autoSelect Boolean 是否自动选择第一个列表值,默认为true defaultListConfig Object listConfig配置对象包括: emptyText:当输入值在列表中不存在时显示的信息,默认为空文本 loadingText:默认加载提示load

重写 Ext.toolbar.Paging 扩展功能

直接代码,放项目overrides文件夹中即可 //重写类 分页插件 //汉化 //默认下方布局 //默认显示额外信息 //当删除数据时,处理页面变化 Ext.define("override.toolbar.Paging", { override: "Ext.toolbar.Paging", displayMsg: '显示 {0} - {1} 条,共 {2} 条', emptyMsg: '没有要显示的数据', beforePageText: '第', afterP

ux.form.field.GridDate 支持快速选择日期的日期控件

效果如图,亲测6.2.1版本可用 1 /** 2 *支持快速选择日期的日期控件 3 */ 4 Ext.define('ux.form.field.GridDate', { 5 extend: 'Ext.form.field.Date', 6 alias: 'widget.gridDateField', 7 requires: ['ux.picker.GridDate'], 8 pickerGrid: { 9 store: { 10 //默认配置 11 data: [{ 12 value: 30,

ExtJs 第二章,Ext.form.Basic表单操作

1.认识Ext.form.Panel表单面板         Ext.form.field.CheckBox 复选框 checkboxfield Ext.form.CheckBoxGroup 复选框组 checkboxgroup Ext.form.field.ComboBox 下拉列表框 combo Ext.form.field.Date 日期选择框 datefield Ext.form.field.Display 文本展示组件 displayfield Ext.form.FieldContai

Ext.form.Panel表单面板

1.Ext.form.FormPanel支持的主要表单组件 ExtJS表单组件 说明 Xtype类型 Ext.form.field.CheckBox 复选框 checkboxfield Ext.form.CheckBoxGroup 复选框组 checkboxgroup Ext.form.field.ComboBox 下拉列表框 combo Ext.form.field.Date 日期选择框 datefield Ext.form.field.Display 文本显示组件 displayfield