`
hn2002
  • 浏览: 59421 次
  • 性别: 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
评论
发表评论

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

相关推荐

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

    在EXTJS框架中，`Ext.FormPanel`和`Ext.Ajax.request`提供了两种不同的异步提交方法，它们各自有其特点和适用场景。下面我们将详细探讨这两种方式的区别。 1. **Ext.FormPanel的异步提交** `Ext.FormPanel` 是...

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

    首先，Ext.FormPanel是ExtJS中用于创建表单的主要组件，它允许我们构建复杂的表单布局并处理用户输入的数据。 1. **Checkbox简单示例** Checkbox在ExtJS中用于创建复选框，可以用来让用户选择多个选项。在示例中，...

    EXT.form组件

    1. `form`：`Ext.FormPanel`是EXT JS中的表单面板，它是一个容器，可以容纳各种表单字段和其他组件。表单面板允许你定义布局、提交行为以及处理表单数据的方法。 2. `checkbox`：`Ext.form.Checkbox`是用于创建复选...

    Ext 添加功能form表单实例

    在这个例子中，通过`new Ext.FormPanel`来创建了一个表单面板，并设置了一些关键属性： - `frame`: 设置为`true`，表示表单周围有一个边框。 - `width` 和 `height`: 分别设置了表单的宽度和高度。 - `layout`: ...

    ext几个实例

    【EXTJS】Ext.AJAX与FormPanel在登录案例中的应用 EXTJS是一个强大的JavaScript库，主要用于构建富客户端Web应用程序。在EXTJS中，Ext.AJAX和Ext.FormPanel是两个核心组件，它们分别用于异步与服务器进行数据交互和...

    Ext组件描述，各个组件含义

    **2.16 Form Panel (Ext.FormPanel)** - **xtype**: `form` - **功能描述**：Form Panel 是一个包含表单字段的面板。 - **主要用途**：用于创建和管理表单，支持数据验证和提交。 **2.17 Checkbox (Ext.form....

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

    var store = Ext.create('Ext.data.Store', { model: 'Employee', proxy: { type: 'ajax', url: '/api/employees', reader: { type: 'json', rootProperty: 'data' } }, autoLoad: true }); ``` 3. **...

    ExtJs_xtype一览

    - `form`：`Ext.FormPanel` 或 `Ext.form.FormPanel`，用于创建表单的容器。 - `checkbox`：`Ext.form.Checkbox`，多选框组件。 - `combo`：`Ext.form.ComboBox`，下拉选择框。 - `datefield`：`Ext.form....

    Ext js Xtype

    - **Form Components**: 用于构建表单的组件，如`Ext.FormPanel`，`Ext.form.Checkbox`，`Ext.form.TextField`等。 - **Chart Components**: 提供了各种图表组件，如`Ext.chart.Chart`，`Ext.chart.BarChart`，`Ext....

    Extjs帮助文档.pdf

    接下来将详细介绍文档中提到的几个核心概念，包括`Ext.MessageBox`、`Ext.Panel`、`Ext.Window`、`Ext.FormPanel`、`Ext.TabPanel`、`Ext.XTemplate`和`Ext.TreePanel`以及如何在Extjs中实现主题（换肤）功能。...

    ext学习资料ext学习资料

    Form组件，即`Ext.form.FormPanel`，用于创建和管理表单数据。它可以包含各种输入控件，如文本字段、复选框、下拉列表等。表单数据可以方便地提交到服务器，或者与数据存储进行双向绑定。下面是一个创建简单表单的...

    Extjs4 下拉树 TreeCombo

    var formPanel = Ext.create('Ext.container.Container', { layout: 'fit', items: [treeCombo] }); Ext.create('Ext.container.Viewport', { layout: 'fit', items: [formPanel] }); } }); ``` 在给定的...

    ext判断该用户是否在数据库中存在

    在 Ext.js 中，可以使用 FormPanel 的 validate 事件来实现用户名验证机制。在 FormPanel 中，可以使用 validator 函数来检测用户输入的用户名是否已经存在于数据库中。 在上面的代码中，我们可以看到使用了 Ext....

    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 的ppt ext 的ppt ext 的pptext 的pptext 的ppt

    var form = new Ext.form.FormPanel({ title: ' 用户登录 ', frame: true, items: [textfield], renderTo: document.body }); ``` 方法二是直接在FormPanel配置中定义items，像这样： ```javascript var form ...

    struts+extjs实现UploadDialog

    为了创建一个UploadDialog，你可以使用`Ext.window.Window`或`Ext.container.Viewport`来创建一个弹出窗口，里面包含一个`Ext.form.FormPanel`，并在其中添加`FileField`。当用户选择文件并点击提交按钮时，ExtJS会...

    Ext 3.x 文件批量上传

    在Ext中，我们可以使用`Ext.form.FormPanel`来定义表单，并通过`Ext.form.FileField`（也称为`FileUploadField`）添加文件选择功能。此字段允许用户选择一个或多个文件，并触发上传操作。 `说明.txt`文件可能包含了...

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