`
WaterSugar
  • 浏览: 94424 次
  • 性别: Icon_minigender_1
  • 来自: 宁波
社区版块
存档分类
最新评论

Ext中FormPanel面板及Form控件横排测试(CSS)

    博客分类：
  • Ajax
EXTCSSFPJavaScriptFirebug 
阅读更多

 

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

 

 

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

 

<!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>
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all.js"></script>
<script type="text/javascript" src="../ext/build/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';</script>
<script type="text/javascript">
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();
});
</script>
</body>
</html>

 

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

 

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

 

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

分享到：
| 用Rewrite增强ThinkPHP框架中应用程序的安 ...
评论
6 楼 equalto 2008-07-22  
如果是3个,又怎么解决.
一点一点的算width,实在麻烦.
radio checkbox这个东西本来就特殊,应该单独再写个field组件的,struts2里面的标签,就把checkbox和checkboxgroup分开写了,而radio,是直接的作为radiogroup的概念来写的.

如果觉得自己写的累,用这个简单的办法可以搞定:
(范例代码我在ff下用firebug跑的,css的一点技巧而已.)
Ext.getBody().update('');

Ext.util.CSS.createStyleSheet('.float-left {float:left;}');

new Ext.FormPanel({
    style : 'width:300px',
    title : 'dddd',
    renderTo : Ext.getBody(),
    items : [{
xtype : 'radio',
fieldLabel: 'hha',
boxLabel : 'male',
itemCls : 'float-left',
style : 'float:left'
}, {
xtype : 'radio',
itemCls : 'float-left',
hideLabel : true,
boxLabel : 'fmale'
}, {
xtype : 'radio',
hideLabel : true,
boxLabel : 'eunuch'
}]
})

5 楼 pypcjs 2008-07-02  
谢谢兄弟啊,解决我的问题.
我就有点疑问了,怎么ext的radio还要写css来解决横排,这有点不方便啊.
4 楼 xmvigour 2008-04-20  
如果三行（六个控件） 同时有两行是横排的 firefox会显示不了叠在一起 ie6没问题
3 楼 WaterSugar 2008-04-20  
单独使用Ext.Form中的控件？我不怎么明白，能否详细说明一下？
2 楼 siyuan 2008-04-18  
请问可以单独使用Ext.Form中的控件吗？
1 楼 teachman 2008-04-07  
哥们，你的文章真不错。能知道你的QQ吗，以后想请教你问题

我的33097397
发表评论

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

相关推荐

    Ext 添加功能form表单实例

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

    EXT.form组件

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

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

    var fom = new Ext.form.FormPanel({ width: 480, height: 480, frame: true, plain: true, layout: "column", items: [ { layout: "form", columnWidth: .5, labelWidth: 50, items: [ // 上文提到的...

    Ext table布局实例 formpanel的table布局

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

    ext3.0所有控件演示代码

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

    Ext日期时间(时分秒)控件

    标题中的“Ext日期时间(时分秒)控件”指的是在Web开发中使用的一种特定的用户界面组件，它允许用户选择或输入日期和时间。在本文中，我们将会深入探讨这个主题，包括ExtJS框架中的DateTime控件的使用、功能以及如何...

    Ext2.0 form使用实例

    在Ext2.0中，这些控件都可以方便地添加到FormPanel中，例如： ```javascript items: [ {xtype: 'textfield', fieldLabel: '姓名'}, {xtype: 'passwordfield', fieldLabel: '密码'}, {xtype: 'combobox', ...

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

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

    extJs中关于formPanel动态添加组件的验证问题

    在EXT JS这个强大的JavaScript框架中，FormPanel是用于创建表单的重要组件，它允许开发者构建交互式的、数据驱动的Web应用程序。FormPanel不仅提供了一种布局管理方式，还支持各种表单元素，如文本框、复选框、下拉...

    ext2.0 DateTimeField控件

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

    ext简单登录css/js插件

    在这个登录插件中，我们可能使用了EXT中的FormPanel和Button组件来创建登录表单和提交按钮。 2. **CSS样式（ext-all.css）**：`ext-all.css`文件包含了EXT框架的基础样式，用于美化EXT组件的外观。登录插件的CSS...

    ext几个实例

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

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

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

    EXT异步提交FORM表单

    var form = new Ext.form.FormPanel({ id: 'myForm', url: 'yourActionUrl', method: 'POST', items: [ {fieldLabel: '用户名', name: 'username'}, {fieldLabel: '密码', name: 'password', inputType: '...

    EXT3.0官方时间（时分秒）控件（支持多浏览器）

    3. 将DateTimeField添加到布局中，如面板（Panel）或表单（FormPanel）。 4. 配置事件监听器，处理用户的选择行为。 总之，EXT3.0官方时间（时分秒）控件是构建现代Web应用时不可或缺的一个工具，它提供了一种高效...

    Ext2.0 form使用实例的例程

    在这个“Ext2.0 form使用实例的例程”中，我们将深入探讨Ext 2.0的表单（form）组件及其应用。 表单在任何应用程序中都扮演着至关重要的角色，用于收集和验证用户输入的数据。Ext 2.0的表单组件提供了一整套完整的...

    Ext上传文件 Demo

    2. **Ext FileField**: FileField是Ext中用于文件选择的控件，用户可以通过这个组件选择本地文件。配置FileField时，我们通常会设置`name`属性来标识文件字段，并可以设置`allowBlank`属性控制是否允许用户不选择...

    ExtJs 动态添加表单

    var formPanel = Ext.create('Ext.form.Panel', { layout: 'form', items: [] }); ``` 2. **定义表单字段**： 根据需求，我们可以定义各种类型的字段。例如，添加一个文本字段： ```javascript var ...

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