Ext.FormPanel 5-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_12467/article/details/81793101

本文展示了一个使用ExtJS框架创建的复杂表单实例，包括多种输入类型如文本框、日期选择器、下拉列表等，并通过选项卡面板进行组织。此外还提供了一个CSS浮动属性的示例。

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

本例子的完整代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>


<title>

简单的表单例子</title>

     

<meta http-equiv="content-type" content="text/html; charset=utf-8">


<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css">


</head>

<body>

 

<scrīpt type="text/javascrīpt" src="../../adapter/ext/ext-base.js"></scrīpt>

 

<scrīpt type="text/javascrīpt" src="../../ext-all.js"></scrīpt>

 

<scrīpt type="text/javascrīpt" src="../../ext-lang-zh_CN.js"></scrīpt>

 

<scrīpt>

Ext





.QuickTips.init();

Ext.form.Field.prototype.msgTarget = 'side';

var simpleForm = new Ext.FormPanel({

   

labelAlign: 'left',

   

title: '

表单例子',

   

buttonAlign:'right',

   

bodyStyle:'padding:5px',

   

width: 600,

   

frame:true,

   

labelWidth:80,

   

items: [{

       

layout:'column',

       





border:false,

       

labelSeparator:'



：',

       



items:[{

           

columnWidth:.5,

           

layout: 'form',

           

border:false,

           

items: [{

               

xtype:'textfield',

               

fieldLabel: '

姓名',

               

name: 'name',

               

anchor:'90%'

}]

},{

           

columnWidth:.25,

           

layout: 'form',

       

    

border:false,

           

items: [{

            

         

style:'margin-top:5px',

               

xtype:'radio',

               

fieldLabel: '

性别',

               

boxLabel:'

男',

               

name: 'sex',

               

checked:true,

               

inputValue:'

男',

               

anchor:'95%'

}]

},{

           

columnWidth:.25,

           

layout: 'form',

           

labelWidth:0,

           

labelSeparator:'',

           

hideLabels:true,

           

border:false,

           

items: [{

            

         

style:'margin-top:5px',

               

xtype:'radio',

               

fieldLabel: '',

               

boxLabel:'

女',

               

name: 'sex',

               

inputValue:'

女',

               

anchor:'95%'

}]

},{

      

     

columnWidth:.5,

           

layout: 'form',

           

border:false,

           

items: [{

               

xtype:'datefield',

               

fieldLabel: '

出生日期',

               

name: 'birthday',

               

anchor:'90%'

}]

},{

           

columnWidth:.5,

           

layout: 'form',

           

border:false,

           

items: [{

               

xtype:'combo',

                                                            

store: new Ext.data.SimpleStore(

                                     

       

fields: ["retrunValue", "displayText"],

                                     

       

data: [[1,'

小学'],[2,'

初中'],[3,'

高中'],[4,'

中专'],[5,'

大专'],[6,'

大学']]

}),

                                     

     

valueField :"retrunValue",

                                     

     

displayField: "displayText",

                                     

     

mode: 'local',

                                     

     

forceSelection: true,

                                     

     

blankText:'

请选择学历',

                                     

     

emptyText:'

选择学历',

                                     

     

hiddenName:'education',

                                     

     

editable: false,

                                                    

       

triggerAction: 'all',

                                                    

       

allowBlank:false,

               

fieldLabel: '

学历',

               

name: 'education',

               

anchor:'90%'

}]

},{

           

columnWidth:.35,

           

layout: 'form',

           

border:false,

           

items: [{

               

xtype:'checkbox',

               

fieldLabel: '

权限组',

               

boxLabel:'

系统管理员',

               

name: 'popedom',

            

   

inputValue:'1',

               

anchor:'95%'

}]

},{

           

columnWidth:.2,

           

layout: 'form',

           

labelWidth:0,

           

labelSeparator:'',

           

hideLabels:true,

           

border:false,

           

items: [{

               

xtype:'checkbox',

               

fieldLabel: '',

               

boxLabel:'

管理员',

               

name: 'pepedom',

               

inputValue:'2',

               

anchor:'95%'

}]

},{

           

columnWidth:.2,

 

          

layout: 'form',

           

labelWidth:0,

           

labelSeparator:'',

           

hideLabels:true,

           

border:false,

           

items: [{

               

xtype:'checkbox',

               

fieldLabel: '',

               

boxLabel:'

普通用户',

               

name: 'pepedom',

               

inputValue:'3',

               

anchor:'95%'

}]

},{

           

columnWidth:.25,

           

layout: 'form',

           

labelWidth:0,

           

labelSeparator:'',

           

hideLabels:true,

           

border:false,

           

items: [{

               

xtype:'checkbox',

               

fieldLabel: '',

               

boxLabel:'

访客',

               

name: 'pepedom',

               

inputValue:'4',

               

anchor:'95%'

}]

},{

           

columnWidth:.5,

           

layout: 'form',

           

border:false,

           

items: [{

               

xtype:'textfield',

               

fieldLabel: '

电子邮件',

               

name: 'email',

               

vtype:'email',

               

allowBlank:false,

               

anchor:'90%'

}]

},{

           

columnWidth:.5,

           

layout: 'form',

           

border:false,

           

items: [{

               

xtype:'textfield',

               

fieldLabel: '

个人主页',

               

name: 'url',

               

vtype:'url',

               

anchor:'90%'

}]

}]

},{

       

xtype:'tabpanel',

       

plain:true,

       

activeTab: 0,

       

height:235,

       

defaults:{bodyStyle:'padding:10px'},

       

items:[{

           

title:'

登录信息',

           

layout:'form',

           

defaults: {width: 230},

           

defaultType: 'textfield',

           

items: [{

               

fieldLabel: '

登录名',

               

name: 'loginID',

           

    





allowBlank:false,

               

vtype:'alphanum',

               

allowBlank:false

},{

           

          

inputType:'password',

               

fieldLabel: '

密码

',

               

name: 'password',

               

allowBlank:false

}]

},{

           

title:'

数字时间字母

',

           

layout:'form',

           

defaults: {width: 230},

           



defaultType: 'textfield',

           

items: [{

           

          

xtype:'numberfield',

               

fieldLabel: '

数字',

               

name: 'number'

},{

           

          

xtype:'timefield',

               

fieldLabel: '

时间',

               

name: 'time'

},{

               

fieldLabel: '

纯字母',

               

name: 'char',

               

vtype:'alpha'

}]

},{

           

title:'

文本区域',

           

layout:'fit',

           

items: {

               

xtype:'textarea',

               

id:'area',

               

fieldLabel:''

}]

}],

   

buttons: [{

       

text: '

保存',

       

handler:function(){

       

      

if(simpleForm.form.isValid()){

       

       

      

this.disabled=true;

       

              

simpleForm.form.doAction('submit',{

                                                    

url:'test.asp',

                                                    

method:'post',

                                                    

params:'',

                                             

       

success:function(form,action){

                                                    

       

Ext.Msg.alert('

操作',action.result.data);

                                                    

       

this.disabled=false;

},

                                             

       

failure:function(){

                                                    

       

Ext.Msg.alert('

操作','

保存失败！');

                                                    

       

this.disabled=false;

});

},{

       

text: '

取消',

       

handler:function(){simpleForm.form.reset();}

}]

});

simpleForm.render(document.body);

 

</scrīpt>

</body>

</html>

后台文件的代码

(ASP)

：

<%@Language=VBscrīpt 

CodePage=65001%>

<%

dim temp

For Each x In Request.Form

 

temp=temp& x & "

：" & Request.Form(x) & ","

next

Response.Charset="utf-8"

Session.CodePage=65001

response.write "{success:true,data:'"&temp&"'}"

%>

CSS  



属性

float

的测试文件代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

 

<title>float

测试例子</title>

       

<meta http-equiv="content-type" content="text/html; charset=utf-8">

</head>

<body>

       

<div style='background:black;width:200px;height:200px;'>

              

<div style='background:red;width:50px;height:50px;float:left;'></div>

              

<div style='background:green;width:50px;height:50px;float:left;'></div>

              

<div style='background:red;width:50px;height:50px;float:left;'></div>

              

<div style='background:green;width:50px;height:50px;float:left;'></div>

              

<div style='background:red;width:50px;height:50px;float:left;'></div>

              

<div style='background:green;width:50px;height:50px;float:left;'></div>

       

</div>

</body>

</html>