`
hn2002
  • 浏览: 58216 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Ext.FormPanel 5

    博客分类：
  • ext
EXTCSSASPHTMLprototype 
阅读更多

本例子的完整代码 ：

 <!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>
分享到：
| Ext.FormPanel 4
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    .archExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇).doc

    .archExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇).doc

    Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别

    (1)Ext.FormPanel f.getForm().submit({ url:”……”, params:{ XX:xx …..} success: function (c,v,e) { //e: 触发事件 var json=Ext.decode(v.response.responseText); }, failure:function(c,v,e){} }) (2)Ext....

    Ext的FormPanel组件

    Ext的FormPanel组件说明formPanel的详细使用说明

    ExtJs入门实例

    5. ExtJs2.0学习系列(5)--Ext.FormPanel之第二式 6. ExtJs2.0学习系列(6)--Ext.FormPanel之第三式(ComboBox篇) 7. ExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇) 8. ExtJs2.0学习系列(8)--Ext....

    ExtAspNet_v2.3.2_dll

    -Grid中TemplateField生成到页面中控件具有唯一ID，例如Grid1_ct5_Label2,Grid1_ct6_Label2(feedback:geruger)。 +2009-09-27 v2.1.2 -为Tree控件增加GetExpandAllNodesReference和...

    ext几个实例

    本篇是关于Ext.Ajax + Ext.FormPanel + MySQL数据库的完整登录案例,一个是html的form表单,一个是Ext的FormPanel表单,在提交或结合Ext.Ajax多少还是有区别的.

    extjs form textfield的隐藏方法

    this.formpanel = new Ext.FormPanel({ items: [{ fieldLabel: ‘代码’, name: ‘FCode’, anchor:’100%’, id: ‘fid’ },{ fieldLabel: ‘名称’, name: ‘FName’, anchor:’100%’ // anchor width by ...

    Ext+JS高级程序设计.rar

    第5章 在.NET中使用Ext.Direct 142 5.1 路由器包的内容 142 5.2 DIY一个Ext.Direct实例 152 5.3 NewtonSoft.JSON 155 5.3.1 JSON的序列化和反序列化 155 5.3.2 LINQ to JSON 158 5.3.3 JSON文本的输出 162 5.4 本章...

    Extjs中DisplayField的日期或者数字格式化扩展

    使用 Ext.form.FormPanel 来处理数据时候，某些字段是需要只读的。当然我们可以使用 Ext.form.TextField，然后设置成 ReadOnly，不过这样子的显示效果不是很好，因为始终会有个输入框。所以我们必须使用 Ext.form....

    Extjs优化(二)Form表单提交通用实现

    a.formPanel.getForm().submit({ scope: b, url: a.url, method: “post”, params: a.params, waitMsg: “正在提交数据…”, success: function(c, d) { Ext.ux.Toast.msg(“操作信息”, “成功信息保存！...

    Ext table布局实例 formpanel的table布局

    Ext的formpanel table布局实例，有效解决了页面resize时列宽不跟随改变的问题，即列宽的自适应宽度

    ext-2.3.0+CKEditor 3.0.1+ckfinder_asp_1.4配置详解及工程源码

    var tab2 = new Ext.FormPanel({ labelAlign: 'top', title: 'Inner Tabs', bodyStyle:'padding:5px', width: 1000, items: [{ layout:'column', border:false, items:[{ columnWidth:.5, layout: 'form'...

    ExtJs实现数据加载和提交经典代码

    FormPanel中的 form对象为Ext.form.BasicForm类型的对象，它有load和submit方法分别用于加载数据和提交数据。而这两个方法都是通过调用 Ext.form.BasicForm中的doAction方法来操作的。doAction方法带有两个参数，...

    深入浅出ExtJS第2版

    3.12.5　自定义编辑器 66 3.13　分组表格控件--group 66 3.13.1　分组表格简介 67 3.13.2　分组表格视图 Ext.grid.GroupingView 68 3.14　可拖放的表格 69 3.14.1　拖放改变表格的大小 69 3.14.2　在同一个表格里...

    extjs中验证实例

    var fset = new Ext.FormPanel({ title:"学习表单字段元素的字段集", width:600, height:400, frame:true, renderTo:"myForm", items:[ {xtype:"fieldset", width:500, labelAlign:"right", labelWidth:...

    ext实现完整的登录代码

    //定义表单 var simple = new Ext.FormPanel({ labelWidth: 75, baseCls: ‘x-plain’, width: 150, defaultType: ‘textfield’,//默认字段类型 //定义表单元素 items: [{ fieldLabel: ‘帐户’, name:...

    Extjs自动填充

    new Ext.form.FormPanel({ height : 90, width:500, labelWidth : 200, labelPad : 0, renderTo :'auto', frame : true, items : [ { xtype : 'combo', triggerAction : 'query', forceSelection : true,...

    ExtJs中处理后台传过来的date对象显示到页面上

    在使用ExtJs开发时会遇到这样的问题，后台传来一个java对象，里面有一个date类型的数据，现在要显示到页面上，我们该如何写才能不用将date转换成string的直接在页面上显示。下面解决办法：例如：在员工查询页面上，...

Magicbox
Global site tag (gtag.js) - Google Analytics