本文介绍了一个使用 ExtJS 框架创建的基本表单示例，其中包括了文字输入框、下拉选单、日期选择器及多行文本输入框等组件，并通过 JavaScript 进行了初始化设置。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ext form render</title>
<link rel='stylesheet' href='ext-all.css'>
<style type='text/css'>
.x-form-field-wrap {}{display:inline;} /**//* display DateFields inline */ .x-form-field-wrap .x-form-date-trigger-nonie {}{top:-1px;} /**//* remove 1px top padding for non-IE browsers */ </style>
<link rel="stylesheet" type="text/css"
href="framework/ext-2.0.2/resources/css/ext-all.css" />
<script type="text/javascript"
src="framework/ext-2.0.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="framework/ext-2.0.2/ext-all.js"></script>
<script type="text/javascript"
src='framework/ext-2.0.2/adapter/yui-utilities.js'></script>
</head>
<body>
<div class="x-box-tl">
<div class="x-box-tr">
<div class="x-box-tc"></div>
</div>
</div>
<div class="x-box-ml">
<div class="x-box-mr">
<div class="x-box-mc">
<form id="form2" method="post">
<h3>表单范例</h3>
<table>
<tr>
<td class="title">文字输入：</td>
<td style="font-family: verdana;"><input type="text" id="tf"
name="text2" /></td>
</tr>
<tr>
<td class="title">下拉选单：</td>
<td style="font-family: verdana;"><select id="cb" name="st2">
<option></option>
<option>Aeiou</option>
<option>Andy</option>
<option>Amy</option>
<option>Aloha</option>
<option>Apple</option>
<option>Application</option>
<option>Aprik</option>
<option>Backup</option>
<option>Book</option>
</select></td>
</tr>
<tr>
<td class="title">日期选择：</td>
<td style="font-family: verdana;"><input type="text" id="df"
name="df" /></td>
</tr>
<tr>
<td class="title">多行输入：</td>
<td><textarea id="ta2" name="ta" cols="50" rows="6"></textarea></td>
</tr>
<tr>
<td class="title"></td>
<td>
<div id="btn"></div>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
<div class="x-box-bl">
<div class="x-box-br">
<div class="x-box-bc"></div>
</div>
</div>
</body>
</html>
<script type='text/javascript'>
Ext.onReady(function(){
// 定义表单
userForm = new Ext.form.BasicForm('form2');
// 渲染输入框
var tf = new Ext.form.TextField({
applyTo: 'tf',
id: 'tf',
allowBlank: false,
width: 340
});
// 渲染下拉框
var cb = new Ext.form.ComboBox({
transform: 'cb'
});
// 渲染日历框
var df = new Ext.form.DateField({
applyTo: 'df',
timePicker: true
});
// 渲染文本域
var ta = new Ext.form.TextArea({
applyTo: 'ta'
});
var btn = new Ext.Button({
applyTo: 'btn',
text: '提交'
});
userForm.add(tf);
userForm.add(df);
userForm.add(cb);
// 覆写日历
Date.dayNames = ["日", "一", "二", "三", "四", "五", "六"];
if (Ext.DatePicker) {
Ext.apply(Ext.DatePicker.prototype, {
todayText: "今天",
minText: "日期在最小日期之前",
maxText: "日期在最大日期之后",
disabledDaysText: "",
disabledDatesText: "",
monthNames: Date.monthNames,
dayNames: Date.dayNames,
nextText: '下月 (Control+Right)',
prevText: '上月 (Control+Left)',
monthYearText: '选择一个月 (Control+Up/Down 来改变年)',
todayTip: "{0} (Spacebar)",
okText: "确定",
cancelText: "取消",
format: "y年m月d日"
});
}
});
</script>
<html><head><title>ext form render</title><link rel='stylesheet' href='ext-all.css'><style type='text/css'> .x-form-field-wrap {}{display:inline;} /**//* display DateFields inline */ .x-form-field-wrap .x-form-date-trigger-nonie {}{top:-1px;} /**//* remove 1px top padding for non-IE browsers */ </style><link rel="stylesheet" type="text/css" href="framework/ext-2.0.2/resources/css/ext-all.css" /><script type="text/javascript" src="framework/ext-2.0.2/adapter/ext/ext-base.js"></script><script type="text/javascript" src="framework/ext-2.0.2/ext-all.js"></script><script type="text/javascript" src='framework/ext-2.0.2/adapter/yui-utilities.js'></script></head><body><div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div><div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc"><form id="form2" method="post"><h3>表单范例</h3><table> <tr> <td class="title">文字输入：</td> <td style="font-family: verdana;"><input type="text" id="tf" name="text2" /></td> </tr> <tr> <td class="title">下拉选单：</td> <td style="font-family: verdana;"><select id="cb" name="st2"> <option></option> <option>Aeiou</option> <option>Andy</option> <option>Amy</option> <option>Aloha</option> <option>Apple</option> <option>Application</option> <option>Aprik</option> <option>Backup</option> <option>Book</option> </select></td> </tr> <tr> <td class="title">日期选择：</td> <td style="font-family: verdana;"><input type="text" id="df" name="df" /></td> </tr> <tr> <td class="title">多行输入：</td> <td><textarea id="ta2" name="ta" cols="50" rows="6"></textarea></td> </tr> <tr> <td class="title"></td> <td> <div id="btn"></div> </td> </tr></table></form></div></div></div><div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div></body></html><script type='text/javascript'> Ext.onReady(function(){ // 定义表单 userForm = new Ext.form.BasicForm('form2'); // 渲染输入框 var tf = new Ext.form.TextField({ applyTo: 'tf', id: 'tf', allowBlank: false, width: 340 }); // 渲染下拉框 var cb = new Ext.form.ComboBox({ transform: 'cb' }); // 渲染日历框 var df = new Ext.form.DateField({ applyTo: 'df', timePicker: true }); // 渲染文本域 var ta = new Ext.form.TextArea({ applyTo: 'ta' }); var btn = new Ext.Button({ applyTo: 'btn', text: '提交' }); userForm.add(tf); userForm.add(df); userForm.add(cb); // 覆写日历 Date.dayNames = ["日", "一", "二", "三", "四", "五", "六"]; if (Ext.DatePicker) { Ext.apply(Ext.DatePicker.prototype, { todayText: "今天", minText: "日期在最小日期之前", maxText: "日期在最大日期之后", disabledDaysText: "", disabledDatesText: "", monthNames: Date.monthNames, dayNames: Date.dayNames, nextText: '下月 (Control+Right)', prevText: '上月 (Control+Left)', monthYearText: '选择一个月 (Control+Up/Down 来改变年)', todayTip: "{0} (Spacebar)", okText: "确定", cancelText: "取消", format: "y年m月d日" }); }});</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
