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

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