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

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

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

08.jpg

None.gif <! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
None.gif
< html >
None.gif
< head >
None.gif
< title > ext form render </ title >
None.gif
< link  rel ='stylesheet'  href ='ext-all.css' >
ExpandedBlockStart.gifContractedBlock.gif
< style  type ='text/css' > dot.gif  .x-form-field-wrap {dot.gif}{display:inline;} /**//* display DateFields inline */ .x-form-field-wrap .x-form-date-trigger-nonie {dot.gif}{top:-1px;} /**//* remove 1px top padding for non-IE browsers */  </ style >
None.gif
< link  rel ="stylesheet"  type ="text/css"
None.gif    href
="framework/ext-2.0.2/resources/css/ext-all.css"   />
None.gif
< script  type ="text/javascript"
None.gif    src
="framework/ext-2.0.2/adapter/ext/ext-base.js" ></ script >
None.gif
< script  type ="text/javascript"  src ="framework/ext-2.0.2/ext-all.js" ></ script >
None.gif
< script  type ="text/javascript"
None.gif    src
='framework/ext-2.0.2/adapter/yui-utilities.js' ></ script >
None.gif
</ head >
None.gif
< body >
None.gif
< div  class ="x-box-tl" >
None.gif
< div  class ="x-box-tr" >
None.gif
< div  class ="x-box-tc" ></ div >
None.gif
</ div >
None.gif
</ div >
None.gif
< div  class ="x-box-ml" >
None.gif
< div  class ="x-box-mr" >
None.gif
< div  class ="x-box-mc" >
None.gif
< form  id ="form2"  method ="post" >
None.gif
< h3 > 表单范例 </ h3 >
None.gif
< table >
None.gif    
< tr >
None.gif        
< td  class ="title" > 文字输入: </ td >
None.gif        
< td  style ="font-family: verdana;" >< input  type ="text"  id ="tf"
None.gif            name
="text2"   /></ td >
None.gif    
</ tr >
None.gif    
< tr >
None.gif        
< td  class ="title" > 下拉选单: </ td >
None.gif        
< td  style ="font-family: verdana;" >< select  id ="cb"  name ="st2" >
None.gif            
< option ></ option >
None.gif            
< option > Aeiou </ option >
None.gif            
< option > Andy </ option >
None.gif            
< option > Amy </ option >
None.gif            
< option > Aloha </ option >
None.gif            
< option > Apple </ option >
None.gif            
< option > Application </ option >
None.gif            
< option > Aprik </ option >
None.gif            
< option > Backup </ option >
None.gif            
< option > Book </ option >
None.gif        
</ select ></ td >
None.gif    
</ tr >
None.gif    
< tr >
None.gif        
< td  class ="title" > 日期选择: </ td >
None.gif        
< td  style ="font-family: verdana;" >< input  type ="text"  id ="df"
None.gif            name
="df"   /></ td >
None.gif    
</ tr >
None.gif    
< tr >
None.gif        
< td  class ="title" > 多行输入: </ td >
None.gif        
< td >< textarea  id ="ta2"  name ="ta"  cols ="50"  rows ="6" ></ textarea ></ td >
None.gif    
</ tr >
None.gif    
< tr >
None.gif        
< td  class ="title" ></ td >
None.gif        
< td >
None.gif        
< div  id ="btn" ></ div >
None.gif        
</ td >
None.gif    
</ tr >
None.gif
</ table >
None.gif
</ form >
None.gif
</ div >
None.gif
</ div >
None.gif
</ div >
None.gif
< div  class ="x-box-bl" >
None.gif
< div  class ="x-box-br" >
None.gif
< div  class ="x-box-bc" ></ div >
None.gif
</ div >
None.gif
</ div >
None.gif
</ body >
None.gif
</ html >
ExpandedBlockStart.gifContractedBlock.gif
< script  type ='text/javascript' > dot.gif  
InBlock.gif
ExpandedSubBlockStart.gifContractedSubBlock.gifExt.onReady(
function()dot.gif{
InBlock.gif    
// 定义表单 
InBlock.gif
    userForm = new Ext.form.BasicForm('form2');
InBlock.gif    
// 渲染输入框 
ExpandedSubBlockStart.gifContractedSubBlock.gif
    var tf = new Ext.form.TextField(dot.gif{
InBlock.gif        applyTo: 
'tf',
InBlock.gif        id: 
'tf',
InBlock.gif        allowBlank: 
false,
InBlock.gif        width: 
340
ExpandedSubBlockEnd.gif    }
);
InBlock.gif    
// 渲染下拉框 
ExpandedSubBlockStart.gifContractedSubBlock.gif
    var cb = new Ext.form.ComboBox(dot.gif{
InBlock.gif        transform: 
'cb'
ExpandedSubBlockEnd.gif    }
);
InBlock.gif    
// 渲染日历框
ExpandedSubBlockStart.gifContractedSubBlock.gif
    var df = new Ext.form.DateField(dot.gif{
InBlock.gif        applyTo: 
'df',
InBlock.gif        timePicker: 
true
ExpandedSubBlockEnd.gif    }
);
InBlock.gif    
// 渲染文本域
ExpandedSubBlockStart.gifContractedSubBlock.gif
    var ta = new Ext.form.TextArea(dot.gif{
InBlock.gif        applyTo: 
'ta'
ExpandedSubBlockEnd.gif    }
);
ExpandedSubBlockStart.gifContractedSubBlock.gif    
var btn = new Ext.Button(dot.gif{
InBlock.gif        applyTo: 
'btn',
InBlock.gif        text: 
'提交'
ExpandedSubBlockEnd.gif    }
);
InBlock.gif    userForm.add(tf);
InBlock.gif    userForm.add(df);
InBlock.gif    userForm.add(cb);
InBlock.gif    
// 覆写日历 
InBlock.gif
    Date.dayNames = [""""""""""""""];
ExpandedSubBlockStart.gifContractedSubBlock.gif    
if (Ext.DatePicker) dot.gif{
ExpandedSubBlockStart.gifContractedSubBlock.gif        Ext.apply(Ext.DatePicker.prototype, 
dot.gif{
InBlock.gif            todayText: 
"今天",
InBlock.gif            minText: 
"日期在最小日期之前",
InBlock.gif            maxText: 
"日期在最大日期之后",
InBlock.gif            disabledDaysText: 
"",
InBlock.gif            disabledDatesText: 
"",
InBlock.gif            monthNames: Date.monthNames,
InBlock.gif            dayNames: Date.dayNames,
InBlock.gif            nextText: 
'下月 (Control+Right)',
InBlock.gif            prevText: 
'上月 (Control+Left)',
InBlock.gif            monthYearText: 
'选择一个月 (Control+Up/Down 来改变年)',
InBlock.gif            todayTip: 
"{0} (Spacebar)",
InBlock.gif            okText: 
"确定",
InBlock.gif            cancelText: 
"取消",
InBlock.gif            format: 
"y年m月d日"
ExpandedSubBlockEnd.gif        }
);
ExpandedSubBlockEnd.gif    }

ExpandedBlockEnd.gif}
);
None.gif
</ script >
None.gif


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值