Ext.form.TextField主要配置表:
Ext.form.TextField主要配置表:
allowBlank Boolean 是否允许为空(默认true)
blankText String 为空验证失败提示信息
emptyText String 空字段中默认显示信息
grow Boolean 设置字段是否根据内容伸缩(默认false)
growMax Number 字段伸展的最大宽度(默认800)
growMin Number 字段收缩最小宽度(默认30)
inputType String 字段类型(默认text)
maxLength Number 字段允许输入最大长度
masLengthText String 最大长度验证失败提示信息
minLength Number 字段允许输入最小长度
minLenghtText String 最小长度验证失败提示信息
regex String javascript正则表达式
regexText String 正则表达式验证失败提示信息
selectOnFocus Boolean 设置当前字段得到焦点是否自动选择已存在文本(默认false)
vtype String 验证类型名字
vtypeText String 自定义提示信息,代替vtype本身的错误提示信息
validator Function 在所有基本验证通过后调用(默认null)
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '../extjs2.0/resources/images/default/s.gif';
//初始化信息提示功能
Ext.QuickTips.init();
//统一指定错误信息提示浮动显示方式
Ext.form.Field.prototype.msgTarget = 'side';
var config = {
title:'Ext.form.TextField例', //表单标题
labelSeparator:':', //表单label与其他元素分割符
labelWidth:60, //标签宽
labelAlign:'right', //标签对齐方式
bodyStyle:'padding:5 5 5 5', //表单边距
frame:true, //是否渲染表单
height:120, //表单高
width:250, //表单宽
renderTo:'form', //表单定位
//表单子元素数组
items:[
new Ext.form.TextField({
fieldLabel:'用户名',
id:'userName',
selectOnFocus:true, //得到焦点自动选择文本
allowBlank:false, //不允许为空
blankText:'用户名不可为空', //空验证失败错误提示信息
//javascript邮件验证正则表达式
regex:/^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/,
regexText:'用户格式错误' //javascript正则表达式验证失败错误信息提示
}),
new Ext.form.TextField({
fieldLabel:'密码',
inputType:'password', //设置输入类型为password
allowBlank:false,
blankText:'密码不可为空'
})
]
}
var form = new Ext.form.FormPanel(config);
});
分享到:
相关推荐
14. **`textfield`** - `Ext.form.TextField`,表单文本框,用于输入单行文本。 15. **`trigger`** - `Ext.form.TriggerField`,触发录入项,用于创建带有触发按钮的输入字段。 16. **`checkboxgroup`** - `Ext....
var employee_title = new Ext.form.TextField({ fieldLabel: 'Title', name: 'title', width: 190 }); ``` - **日期字段**:用于输入日期,通常会提供一个日历插件供用户选择日期。 ```javascript var ...
{header: 'Email', width: 150, sortable: true, dataIndex: 'email', editor: new Ext.form.TextField()} ], plugins: new Ext.grid.RowEditor() }); ``` 3. **分页**:EXT支持分页,通过配置Store的paging属性...
7.2.1 文本输入控件Ext.form.TextField 7.2.2 多行文本输入控件Ext.form.TextArea 7.2.3 单选框 7.2.4 复选框 7.2.5 下拉列表框 7.2.6 日期输入控件Ext.form.DateField 7.2.7 在线编辑器Ext.form.HtmlEditor ...
items: [new Ext.form.TextField({fieldLabel: '姓名'})] }); panel.render('content'); ``` ### Ext.Window `Ext.Window` 提供了一个灵活的、可拖动的对话框,可以包含任何Extjs组件。它常用于显示模态对话框或...
7.2.1 文本输入控件Ext.form.TextField 7.2.2 多行文本输入控件Ext.form.TextArea 7.2.3 单选框 7.2.4 复选框 7.2.5 下拉列表框 7.2.6 日期输入控件Ext.form.DateField 7.2.7 在线编辑器Ext.form.HtmlEditor ...
例如,`textfield` 对应 `Ext.form.TextField`。 - 常见的 `xtype` 包括:`textfield`, `timefield`, `numberfield`, `datefield`, `combo` 和 `textarea`。 - 由于EXTJS组件的高度可复用性,这些字段可以灵活地应用...
对应的类是 `Ext.form.Panel`。表单组件用于收集用户输入,可以包含各种表单字段,如文本框、复选框、下拉框等。 4. **文本框(TextField)** - `xtype: 'textfield'` 对应的类是 `Ext.form.field.Text`。文本框...
例如,可能会使用`<ext:form>`标签创建登录表单,`<ext:textfield>`创建输入框,`<ext:button>`创建提交按钮等。这些标签会自动处理用户的输入,并与后端控制器进行交互。 3. **控制器**:在SSH框架中,Struts的...
- 创建一个名为`Ext_Dynamic_Form`的数据库表,用于存储动态窗体的配置。这个表有四个字段:`ID`(唯一标识符)、`UniName`(窗体名称)、`JavaScriptContent`(存储JavaScript脚本内容)和`Memo`(备注)。`...
同时,加载了`Ext.form.login.js`,这是包含登录表单逻辑的脚本文件。 在样式部分,定义了一个`.icon`类,用于设置背景图片,这可能用于登录按钮或者其他图标。 登录界面的实现主要集中在JS源代码中,这部分展示了...
var modifyForm = new Ext.form.FormPanel({ buttonAlign: 'center', bodyStyle: 'padding:5px', width: 550, border: false, method: 'POST', id: 'modifyForm', labelWidth: 85, labelAlign: 'left', ...
### Ext.form.TextField(文本字段) - **allowBlank**:允许为空,默认为`true`。 - **blankText**:为空时显示的验证消息。 - **emptyText**:控件为空时显示的提示信息。 - **grow**:设置文本字段是否动态扩展...
4. **Ext.form.FormPanel** 和 表单控件: - FormPanel是用于创建表单的组件,可以设置`frame`(是否有边框)、`layout`(布局方式)、`defaults`(组件默认属性)等。例如,`layout:'column'`表示列布局,`...
var values = Ext.getCmp("form").getForm().getValues(); Ext.Ajax.request({ url: 'save.php', success: function() { Ext.Msg.alert("success"); }, method: "post", failure: function() { Ext.Msg....
2. **Form**:表单组件,如TextField、TextArea、Checkbox、ComboBox等,用于数据输入和验证。 3. **Grid**:表格组件,用于显示和操作大量数据,支持分页、排序、过滤等功能。 4. **Tree**:树形组件,用于展示层次...
3. **布局管理**:ExtJS支持多种布局方式,如表布局(Table Layout)、流式布局(Form Layout)、绝对布局(Absolute Layout)等,可以根据不同场景灵活选择,满足各种布局需求。 4. **Ajax和数据接口**:ExtJS内置...