ext 2.0 渲染HTML表单 (含中文版日期选单控件)

最新推荐文章于 2017-09-12 09:22:21 发布

转载最新推荐文章于 2017-09-12 09:22:21 发布 · 128 阅读

文章标签：

#javascript #ViewUI

本文介绍了一个使用 ExtJS 框架创建的基本表单示例，包括文本输入框、下拉菜单、日期选择器及多行文本输入框等组件，并展示了如何通过 JavaScript 进行配置和渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<! 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 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 class ="x-box-bl" >

< div class ="x-box-br" >

< div class ="x-box-bc" ></ 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 >