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;
}

文本域的話，將這兩個屬性去掉即可顯示全部內容不是自適應，否則頁面效果不好看。