ExtJs之Text文本框Text和文本域TextArea

文本框Text

//添加身份证号码校验

var creditCard = Ext.create('Ext.form.field.Text', {
    fieldLabel : '身份证号',
    name : 'creditCard',
    renderTo : 'creditCardDiv',
    labelAlign : 'right',
    emptyText: '请输入身份证号',//相当于placeholder，提示文字
    allowBlank : false,
    regex: /(^\d{15}$)|(^\d{17}([0-9]|X)$)/,
    regexText : "输入的身份证号码不符合规定！\n15位号码应全为数字，18位号码末位可以为数字或X"
});

//添加手机号校验
telephone = Ext.create('Ext.form.field.Text', {
    fieldLabel : '手机号码',
    name : 'telephone',
    renderTo : 'telephoneDiv',
    labelAlign : 'right',
    emptyText: '请输入手机号',//相当于placeholder，提示文字
    allowBlank : false,
    //regex: /^[0-9]+([.]{1}[0-9]+){0,1}$/,//只能输入整数或小数
    regex:/(^0?[1][0-9]{10}$)/,
    regexText:'请输入正确的手机号码'
    width: '100%',
    editable: false,                //下面这三行使得文本内容不能修改，边框消失
    triggerWrapCls:'x-form-trigger-wrap-default_no_border',
    inputWrapcls:'x-form-text-wrap'
});

上面的输入框如果要加入输入提示，需要加入属性：emptyText。

其他属性可以参考：http://www.360doc.com/content/11/0913/14/3880760_147894654.shtml

文本域TextArea

//料级说明
instruction = Ext.create('Ext.form.field.TextArea', {
    labelAlign:'right',
    width: "100%",
    name: 'instruction',
    renderTo: "instructionDiv",
    value: store.getAt(0).get("instruction"),
    allowBlank: true,
    rows:5,
    width: '100%',
    editable: false,                //下面这三行使得文本内容不能修改，边框消失
//  triggerWrapCls:'x-form-trigger-wrap-default_no_border',//无边框
//  inputWrapcls:'x-form-text-wrap'//长度自适应
});

以上的triggerWrapCls和inputWrapCls属性是对显示的文字做样式修改的。具体CSS如下：

.x-form-trigger-wrap-default_no_border {
    border: none;
    width: 100%
}

.x-form-text-wrap {
    display: table-cell;
    overflow: hidden;
    height: 100%;
    width: 200;
}

文本域的话，将这两个属性去掉即可显示全部内容不是自适应，否则页面效果不好看。