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

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

ExtJs之Text文本框Text和文本域TextArea相关推荐

R语言ggplot2在可视化图像中添加横线并在横线中添加文本、为横线中添加的文本添加文本框、自定义文本框的填充色（background color for a text annotation）
R语言ggplot2在可视化图像中添加横线并在横线中添加文本.为横线中添加的文本添加文本框.自定义文本框的填充色(background color for a text annotation) 目录
【100个 Unity踩坑小知识点】 | Unity中Text文本框和 InputField文本输入框内容换行问题
Unity 小科普老规矩,先介绍一下 Unity 的科普小知识: Unity是实时3D互动内容创作和运营平台 . 包括游戏开发.美术.建筑.汽车设计.影视在内的所有创作者,借助 Unity 将创意 ...
java fx 文本输入,DOC-03-08 文本框(Text Field)
DOC-03-08 文本框(Text Field) 本章讨论Text Field组件的功能. TextField类实现了一个接收和显示文本输入的UI组件.它提供了从用户接收文本输入的功能.这个类和另一 ...
java word文本框_Java 读取Word文本框中的文本、图片、表格
Word可插入文本框,文本框中可嵌入文本.图片.表格等内容.对文档中的已有文本框,也可以读取其中的内容.本文以Java程序代码来展示如何读取文本框,包括读取文本框中的文本.图片以及表格等. [程序环境 ...
java为文本框添加背景颜色,文本框添加背景图片，文本框背景图片,文本框添加水印[Java...
文本框添加背景图片,文本框背景图片,文本框添加水印[Java 文本框添加水印 [Java]代码public class WatermarkTextField extends JTextField { ...
Word控件Spire.Doc 【文本】教程(5) ；从 Word 文档中的文本框中提取文本
文本框的目的是允许用户输入程序要使用的文本信息.也可以从文本框中提取现有的文本信息.以下指南重点介绍如何通过Spire.Doc for .NET从 C# 中 Word 文档的文本框中提取文本. Spi ...
Java 读取Word文本框中的文本、图片、表格
Word可插入文本框,文本框中可嵌入文本.图片.表格等内容.对文档中的已有文本框,也可以读取其中的内容.本文以Java程序代码来展示如何读取文本框,包括读取文本框中的文本.图片以及表格等. [程序环境 ...
R语言ggplot2包和ggtext包在可视化图像中的指定位置添加文本框（横向文本框、竖向文本框）
R语言ggplot2包和ggtext包在可视化图像中的指定位置添加文本框(横向文本框.竖向文本框) 目录
世界之窗浏览器删除文本框信息_文本框——Excel里的便利贴
工作表里面的单元格应该是足够我们来记录数据和信息了.但是文本框这个功能在工作表中还是存在,可以理解为便利贴功能. 插入文本框 1.点击"插入"选项卡. 2.然后点击"文本 ...

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

文本框Text

文本域TextArea

ExtJs之Text文本框Text和文本域TextArea相关推荐

最新文章

热门文章