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

Ext.FormPanel 及控件横排显示

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

在实际的网页开发中，大部分时间都要涉及到Form表单的处理。在Ext 框架 中也提供了很多这方面的控件，而且还有一个专门的FormPanel布局，该布局默认为放在面板上面的所有控件都是换行放置，而在实际应用中为了美观，有些需要横排，特别是Radio控件，这个时候就需要我们重新定制这些控件的布局了，该例子中使用CSS 来实现这些功能，先贴出一张效果图。



　　实现上面效果的具体代码 如下：


Js代码 复制代码
  1. <!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >   
  2. <html xmlns= "http://www.w3.org/1999/xhtml" >   
  3. <head>   
  4. <meta http-equiv= "Content-Type"  content= "text/html; charset=UTF-8"  />   
  5. <title>Ext中FormPanel面板及Form控件横排测试(CSS)</title>   
  6. <link rel= "stylesheet"  type= "text/css"  media= "all"  href= "../ext/resources/css/ext-all.css"  />   
  7. <style type= "text/css"  media= "all" >   
  8.     .allow- float  {clear:none!important;}  /* 允许该元素浮动 */   
  9.     .stop- float  {clear:both!important;}  /* 阻止该元素浮动 */   
  10.     .sex-male { float :left;}   
  11.     .sex-female { float :left;padding:0 0 0 20px;}   
  12.     .age-field { float :left;padding:0 0 0 58px;*padding:0 0 0 50px!important;*padding:0 0 0 50px;}   
  13. </style>   
  14. </head>   
  15. <body>   
  16. <scrīpt type= "text/javascrīpt"  src= "../ext/adapter/ext/ext-base.js" ></scrīpt>   
  17. <scrīpt type= "text/javascrīpt"  src= "../ext/ext-all.js" ></scrīpt>   
  18. <scrīpt type= "text/javascrīpt"  src= "../ext/build/locale/ext-lang-zh_CN.js" ></scrīpt>   
  19. <scrīpt type= "text/javascrīpt" >Ext.BLANK_IMAGE_URL =  '../ext/resources/images/default/s.gif' ;</scrīpt>   
  20. <scrīpt type= "text/javascrīpt" >   
  21. Ext.onReady( function () {   
  22. //创建Form面板   
  23. var  fp =  new  Ext.form.FormPanel({   
  24.     buttonAlign: 'center' ,   
  25.     labelAlign: 'right' ,   
  26.     labelWidth:40,   
  27.     frame: true ,   
  28.     bodyStyle: 'padding:8px 0 0 0;' ,   
  29.     items:[{   
  30.         xtype: 'textfield' ,   
  31.         fieldLabel: '姓名' ,   
  32.         name: 'n_username' ,   
  33.         id: 'i_username' ,   
  34.         width:320   
  35.     },{   
  36.         xtype: 'radio' ,   
  37.         fieldLabel: '性别' ,   
  38.         boxLabel: '男' ,   
  39.         name: 'sex' ,   
  40.         id: 'male' ,   
  41.         itemCls: 'sex-male' ,  //向左边浮动,处理控件横排   
  42.         clearCls: 'allow-float' ,  //允许两边浮动,在实际生成的HTML 结构中有专门的DIV阻断浮动   
  43.         checked: true   
  44.     },{   
  45.         xtype: 'radio' ,   
  46.         boxLabel: '女' ,   
  47.         name: 'sex' ,   
  48.         id: 'female' ,   
  49.         itemCls: 'sex-female' ,  //向左浮动,处理控件横排   
  50.         clearCls: 'allow-float' ,  //允许两边浮动   
  51.         hideLabel: true   //不显示前面"性别"的标签   
  52.     },{   
  53.         xtype: 'textfield' ,   
  54.         fieldLabel: '年龄' ,   
  55.         name: 'n_age' ,   
  56.         id: 'i_age' ,   
  57.         itemCls: 'age-field' ,  //向左浮动,处理控件横排   
  58.         width:133   
  59.     },{   
  60.         xtype: 'textfield' ,   
  61.         fieldLabel: '住址' ,   
  62.         name: 'n_address' ,   
  63.         id: 'i_address' ,   
  64.         itemCls: 'stop-float' ,  //不允许浮动,结束控件横排   
  65.         width:320   
  66.     }],   
  67.     buttons:[{   
  68.         text: '确定' ,   
  69.         handler:onOK  //实际应用一般是处理fp.getForm.submit()事件   
  70.     }, {   
  71.         text: '重置' ,   
  72.         handler: function (){ fp.getForm().reset(); }   
  73.     }],   
  74.     keys:[{  //处理键盘回车事件   
  75.         key:Ext.EventObject.ENTER,   
  76.         fn:onOK,   
  77.         scope: this   
  78.     }]   
  79. });   
  80.   
  81. //确定按钮事件,这里只是简单获取各控件值,实际应用一般和后台脚本结合   
  82. function  onOK() {   
  83.      var  strMsg;   
  84.     strMsg =  '姓名：'  + fp.getComponent( 'i_username' ).getValue() +  '，性别：' ;   
  85.      if  (fp.getComponent( 'male' ).checked) strMsg +=  '男' ;   
  86.      if  (fp.getComponent( 'female' ).checked) strMsg +=  '女' ;   
  87.     strMsg +=  '，年龄：'  + fp.getComponent( 'i_age' ).getValue();   
  88.     strMsg +=  '，住址：'  + fp.getComponent( 'i_address' ).getValue();   
  89.     alert(strMsg);   
  90. }   
  91.   
  92. //创建主窗口   
  93. new  Ext.Window({   
  94.     title: 'Ext中FormPanel面板及Form控件横排测试(CSS)' ,   
  95.     width:400,   
  96.     closable: false ,   
  97.     collapsible: true ,   
  98.     draggable: false ,   
  99.     resizable: false ,   
  100.     modal: true ,   
  101.     border: false ,   
  102.     items:[fp],   
  103.     buttons:[]   
  104. }).show();   
  105. });   
  106. </scrīpt>   
  107. </body>   
  108. </html>   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ext中FormPanel面板及Form控件横排测试(CSS)</title>
<link rel="stylesheet" type="text/css" media="all" href="../ext/resources/css/ext-all.css" />
<style type="text/css" media="all">
	.allow-float {clear:none!important;} /* 允许该元素浮动 */
	.stop-float {clear:both!important;} /* 阻止该元素浮动 */
	.sex-male {float:left;}
	.sex-female {float:left;padding:0 0 0 20px;}
	.age-field {float:left;padding:0 0 0 58px;*padding:0 0 0 50px!important;*padding:0 0 0 50px;}
</style>
</head>
<body>
<scrīpt type="text/javascrīpt" src="../ext/adapter/ext/ext-base.js"></scrīpt>
<scrīpt type="text/javascrīpt" src="../ext/ext-all.js"></scrīpt>
<scrīpt type="text/javascrīpt" src="../ext/build/locale/ext-lang-zh_CN.js"></scrīpt>
<scrīpt type="text/javascrīpt">Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';</scrīpt>
<scrīpt type="text/javascrīpt">
Ext.onReady(function() {
//创建Form面板
var fp = new Ext.form.FormPanel({
	buttonAlign:'center',
	labelAlign:'right',
	labelWidth:40,
	frame:true,
	bodyStyle:'padding:8px 0 0 0;',
	items:[{
		xtype:'textfield',
		fieldLabel:'姓名',
		name:'n_username',
		id:'i_username',
		width:320
	},{
		xtype:'radio',
		fieldLabel:'性别',
		boxLabel:'男',
		name:'sex',
		id:'male',
		itemCls:'sex-male', //向左边浮动,处理控件横排
		clearCls:'allow-float', //允许两边浮动,在实际生成的HTML结构中有专门的DIV阻断浮动
		checked:true
	},{
		xtype:'radio',
		boxLabel:'女',
		name:'sex',
		id:'female',
		itemCls:'sex-female', //向左浮动,处理控件横排
		clearCls:'allow-float', //允许两边浮动
		hideLabel:true //不显示前面"性别"的标签
	},{
		xtype:'textfield',
		fieldLabel:'年龄',
		name:'n_age',
		id:'i_age',
		itemCls:'age-field', //向左浮动,处理控件横排
		width:133
	},{
		xtype:'textfield',
		fieldLabel:'住址',
		name:'n_address',
		id:'i_address',
		itemCls:'stop-float', //不允许浮动,结束控件横排
		width:320
	}],
	buttons:[{
		text:'确定',
		handler:onOK //实际应用一般是处理fp.getForm.submit()事件
	}, {
		text:'重置',
		handler:function(){ fp.getForm().reset(); }
	}],
	keys:[{ //处理键盘回车事件
		key:Ext.EventObject.ENTER,
		fn:onOK,
		scope:this
	}]
});

//确定按钮事件,这里只是简单获取各控件值,实际应用一般和后台脚本结合
function onOK() {
	var strMsg;
	strMsg = '姓名：' + fp.getComponent('i_username').getValue() + '，性别：';
	if (fp.getComponent('male').checked) strMsg += '男';
	if (fp.getComponent('female').checked) strMsg += '女';
	strMsg += '，年龄：' + fp.getComponent('i_age').getValue();
	strMsg += '，住址：' + fp.getComponent('i_address').getValue();
	alert(strMsg);
}

//创建主窗口
new Ext.Window({
	title:'Ext中FormPanel面板及Form控件横排测试(CSS)',
	width:400,
	closable:false,
	collapsible:true,
	draggable:false,
	resizable:false,
	modal:true,
	border:false,
	items:[fp],
	buttons:[]
}).show();
});
</scrīpt>
</body>
</html>


　　上面代码比较简单，而且也添加了注释，这里只简单说明一下。


　　对于实现Radio控件的横排，首先是通过itemCls属性，修改他的浮动，使之float:left，同时还要修改clearCls，修改成clear:none，允许控件两边都可以浮动，这是因为在实际生成的HTML结构中，会有一个DIV专门负责清除浮动，如果使用默认的设置，接下来的那个控件并不会紧挨着他，也就是还会继续换行，对于第二个Raido控件，必须添加hideLabel:false属性，这样才能省去前面的标签设置，其他设置跟第一个一样。


　　如果要还原成换行布置，必须在想还原成换行布置的控件上设置itemCls属性，修改为clear:both，而这个设置在IE中好像不用设置也可以，而在FF中必须添加，所以干脆添加在上面，保证两个浏览器都正常浏览。

  • 大小: 16.1 KB
分享到：
Ext.FormPanel 5
评论
发表评论

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

相关推荐

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

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

    EXT.form组件

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

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

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

    Ext 添加功能form表单实例

    综上所述，这个实例展示了如何在Ext中创建一个完整的表单，包括表单的布局、字段的定义及验证、按钮及事件处理等多个方面。对于初学者来说，这是一个很好的学习资源，可以帮助他们快速掌握如何使用Ext构建复杂的Web...

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

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

    ext几个实例

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

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

    在ExtJs中处理后台传递的Date对象并将其正确地显示在页面上，通常涉及到数据模型（Model）、存储（Store）、列模型（ColumnModel）以及渲染器（Renderer）的配置。以下是一个详细的步骤说明： 1. **创建数据模型...

    ext3.0所有控件演示代码

    `Ext.form.FormPanel`是表单的基础，通过`items`属性添加字段，`fields`定义字段配置。表单提交和验证可以通过`actionMethods`和`buttons`进行控制。 3. 分页工具栏（Paging Toolbar）：EXT3.0提供了一个便捷的分页...

    Ext控件大全,适合新手学习

    根据提供的文件信息，我们可以深入探讨Ext控件的相关知识点。标题提到的是“Ext控件大全”，并且描述中指出这些资料非常适合IT人士尤其是新手学习使用。接下来，我们将基于此内容详细解析Ext控件的基础知识、应用...

    ExtJs_xtype一览

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

    EXT选择月份的控件

    EXT选择月份的控件是EXT库中用于展示和选择日期的一种组件，主要针对月份级别的选择。EXT是一个基于JavaScript的富客户端应用框架，广泛应用于构建功能强大的Web应用程序。它提供了丰富的UI组件，包括日期选择器，这...

    ext学习资料ext学习资料

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

    Extjs帮助文档.pdf

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

    Ext js Xtype

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

    Extjs4 下拉树 TreeCombo

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

    ext 的ppt ext 的ppt ext 的pptext 的pptext 的ppt

    Ext Form支持多种控件，包括： - `Ext.form.TextArea`：用于多行文本输入。 - `Ext.form.DateField`：用于选择日期。 - `Ext.form.Hidden`：用于隐藏字段，不显示在用户界面上。 - `Ext.form.HtmlEditor`：提供一个...

    ext2.0 DateTimeField控件

    在EXT JS 2.0框架中，DateTimeField控件是一个非常实用的组件，它扩展了基本的DateField控件，提供了更丰富的日期时间选择功能，包括小时、分钟和秒的显示与选择。这个控件是为了解决用户需要输入精确到秒的日期时间...

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