继上第六节内容，我们在表单里加了个一个数字字段，隐藏字段，日期字段。如下代码所:
1. index.jsp代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<!--ExtJs框架开始-->
<script type="text/javascript" src="Ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="Ext/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" />
<!--ExtJs框架结束-->
<!--
<script type="text/javascript" src="study/helloWorld.js"></script>
<script type="text/javascript" src='study/window.js'></script>
<script type="text/javascript" src='study/formPanel.js'></script>
<script type="text/javascript" src='study/textField.js'></script>
<script type="text/javascript" src='study/button.js'></script>
<script type="text/javascript" src='study/login.js'></script>
-->
<!--调用/study/number_hidden_data_Field.js 实现登陆页面内的日期/数字/隐藏字段的调用 -->
<script type="text/javascript" src="Ext/src/locale/ext-lang-zh_CN.js"></script><!--中文日期翻译-js-->
<script type="text/javascript" src='study/number_hidden_data_Field.js'></script>
<style type="text/css">
.loginicon
{
background-image: url(study/login.gif) !important;
}
</style>
<style type='text/css'>
.x-form-unit
{
height:22px;
line-height:22px;
padding-left:2px;
display:inline-block;
display:inline;
}
</style>
</head>
<body>
<br>
</body>
</html>
2. number_hidden_data_Field.js 代码如下:
//----------------------这部分是针对身高后面的厘米cm单位 对formField进行重写----------------------//
Ext.override(Ext.form.TextField, {
unitText: '',
onRender: function (ct, position) {
Ext.form.TextField.superclass.onRender.call(this, ct, position);
// 如果单位字符串已定义 则在后方增加单位对象
if (this.unitText != '') {
this.unitEl = ct.createChild({
tag: 'div',
html: this.unitText
});
this.unitEl.addClass('x-form-unit');
// 增加单位名称的同时 按单位名称大小减少文本框的长度 初步考虑了中英文混排 未考虑为负的情况
this.width = this.width - (this.unitText.replace(/[^\x00-\xff]/g, "xx").length * 6 + 2);
// 同时修改错误提示图标的位置
this.alignErrorIcon = function () {
this.errorIcon.alignTo(this.unitEl, 'tl-tr', [2, 0]);
};
}
}
});
//**注意，这个属性并非 Extjs文本框自带的属性，因为我们要在“身高”的后面加上
//**单位，所以在23行---43行对文本框进行了重写，重写时添加了属性"unitText"，并且在样式表中加了样式"x-form-unit"。
//----------------------------重写结束---------------不太懂，没重写过----------------------------//
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var submit = function(){
Ext.MessageBox.alert('This is the sumbit/Reset opration..');
}
new Ext.Window({
iconCls:'loginicon',
width:377,
height:209,
plain:true,
shadow:false,
modal:true,
items:[
new Ext.form.FormPanel({
frame:true,
style:'margin:10px',
bodyStyle:'padding:6px 0px 0px 15px',
labelWidth:59,
items:[
//----------------------1.文本字段开始----------------------//
new Ext.form.TextField({
fieldLabel:'Username',
allowBlank:false,
blankText:'The username is required..'
//width:45
}),
//Password TextField
new Ext.form.TextField({
fieldLabel:'Password',
allowBlank:false,
blankText:'The password is required..'
}),
//----------------------文本字段结束----------------------//
//----------------------2.数字字段开始----------------------//
//创建一个新的NumberField数字文本框对象
new Ext.form.NumberField({
fieldLabel:'Stature',
minValue:'0.01', //设置数字文本框最小值
maxValue:'230', //设置数字文本框最大值
decimalPrecision: 1, //设置小数点后面的位数，当位数超过时系统会自动截断
//unitText:' cm',
unitText: ' cm',
allowBlank:false,
blankText:'The stature field is required..',
width:80
}),
//----------------------数字字段结束----------------------//
//----------------------3.日期字段开始----------------------//
new Ext.form.DateField({ //创建一个新的Datefield日期对象,Extjs的日期为英文类型
fieldLabel:'Data', //所以要加入翻译成中文的js. 此js 在index.jsp页面内
allowBlank:false,
blankText:'The date field is required',
editable:false, //设置为不可编辑
format:'Y/m/d' //当然也可以定格式为 format:'Y-m-d'样式
}),
//----------------------日期字段结束----------------------//
//----------------------4.隐藏字段开始----------------------//
new Ext.form.Hidden({ //创建一个新的Hidden对象，隐藏字段用作参数占位符， 一般用来保存一些不希望用户直接看到的参数，并发送到服务器，例如：用户ID等。
id:'userId', //这个名称是在服务端接收值的名称。发送参数格式如下：userid:123
name:'123'
})
//----------------------隐藏字段结束----------------------//
],
//Button
buttonAlign:'center',
buttons:[
new Ext.Button({
text:'Submit',
handler:submit
}),
new Ext.Button({
text:'Reset',
listeners:{'mouseover':submit}
})
]
}
)
]
}).show();
});
3. 效果如下：
相关推荐
11. numberfield - xtype: 'numberfield', 描述: 数字编辑器 12. radio - xtype: 'radio', 描述: 单选按钮 13. textarea - xtype: 'textarea', 描述: 多行文本框 14. textfield - xtype: 'textfield', 描述: 表单...
- `Hidden`：隐藏域，不显示在用户界面上，但可以在表单提交时发送数据。 3. **代码自动生成规则** 自动生成ExtJS代码的过程通常包括以下步骤： - 分析数据库结构：获取字段名称、类型和注释。 - 选择组件类型...
5. **表单类**：表单面板(FormPanel)和各类字段如复选框(Checkbox)、组合框(ComboBox)、日期字段(DateField)、隐藏字段(Hidden)、HTML编辑器(HtmlEditor)、数字字段(NumberField)、单选按钮(Radio)、文本区域...
- hidden：隐藏字段 - htmleditor：HTML编辑器 - label：标签 - numberfield：数字输入框 - radio：单选按钮 - textarea：文本区域 - textfield：文本输入框 - timefield：时间选择框 - trigger：触发字段，可以带一...
- **Hidden**: `Ext.form.Hidden`，隐藏字段。 - **HtmlEditor**: `Ext.form.HtmlEditor`，HTML编辑器。 - **NumberField**: `Ext.form.NumberField`，数字输入框。 - **Radio**: `Ext.form.Radio`，单选按钮。 ...
- **描述**: 隐藏的表单字段。 9. **`htmleditor`:** - **`xtype`**: `htmleditor` - **`Class`**: `Ext.form.HtmlEditor` - **描述**: HTML编辑器。 10. **`label`:** - **`xtype`**: `label` - **`...
- `hidden`: 隐藏字段，不在界面上显示，但会随表单一起提交。 - `htmleditor`: HTML编辑器，用于编辑HTML内容。 - `numberfield`: 数字输入框，验证输入为数字。 - `radio`: 单选按钮，用于选择单个选项。 - `...
- `hidden`：`Ext.form.Hidden`，隐藏字段，不会在表单提交时发送。 - `htmleditor`：`Ext.form.HtmlEditor`，HTML编辑器组件。 - `numberfield`：`Ext.form.NumberField`，数字输入框。 - `radio`：`Ext.form....
11. **`numberfield`:** 数字编辑器组件，用于让用户输入数字，通过`Ext.form.NumberField`类实现。 12. **`radio`:** 单选按钮组件，通过`Ext.form.Radio`类实现。 13. **`textarea`:** 多行文本组件，用于创建...
- **`hidden` (Ext.form.Hidden)**: 表单隐藏域组件，用于在表单中包含隐藏的信息。 - **`htmleditor` (Ext.form.HtmlEditor)**: HTML编辑器组件，允许用户编辑HTML内容。 - **`label` (Ext.form.Label)**: 标签组件...
ExtJS的表单功能非常强大，支持多种表单字段类型。 ##### 5.1 表单面板 - **普通表单面板**： ```javascript new Ext.form.FormPanel({ title: 'Basic Form', labelWidth: 50, bodyPadding: 10, items: [ {...
- **表单及字段组件**：包括FormPanel、Checkbox、ComboBox、DateField、Field、FieldSet、Hidden、HtmlEditor、NumberField、Radio、TextArea、TextField和TimeField等，用于创建和管理用户输入。 EXT JS的文件...
11. **`numberfield`** - `Ext.form.NumberField`，数字编辑器，用于输入数字。 12. **`radio`** - `Ext.form.Radio`，单选按钮，用于从一组选项中选择一项。 13. **`textarea`** - `Ext.form.TextArea`，多行...
- `formcomponents`: `form`, `checkbox`, `checkboxgroup`, `combo`, `datefield`, `displayfield`, `field`, `fieldset`, `hidden`, `htmleditor`, `label`, `numberfield`, `radio`, `radiogroup`, `textarea`, `...
### ExtJS控件详解 #### 基本组件 **Ext.Button** - **描述**: 提供了一种标准的用户交互方式，通常用于触发特定事件或功能。 - **用途**: 创建按钮，可以设置图标、文本、工具提示等。 **Ext.SplitButton** - **...
- **功能描述**：Hidden 是一个隐藏的字段，通常用于存储不希望用户看到的数据。 - **主要用途**：用于存储后台需要的额外数据。 **2.23 HTML Editor (Ext.form.HtmlEditor)** - **xtype**: `htmleditor` - **功能...