<! 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 >