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

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

相关推荐

    .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入门实例

    4. ExtJs2.0学习系列(4)--Ext.FormPanel之第一式 5. ExtJs2.0学习系列(5)--Ext.FormPanel之第二式 6. ExtJs2.0学习系列(6)--Ext.FormPanel之第三式(ComboBox篇) 7. ExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他...

    ExtAspNet_v2.3.2_dll

    +在aspx页面中必须显示的声明控件的集合属性（比如Tabs(TabStrip), Items(PanelBase), Nodes(TreeNode)）。 -这将会影响所有的aspx页面，所以要特别关注。 -重命名AccordionPanel为AccordionPane (这也是在Asp...

    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

    第8章 Ext用户界面控件 216 8.1 布局 216 8.1.1 在FormPanel中使用HBoxLayout进行布局 216 8.1.2 在FormPanel中使用HBoxLayout和VBoxLayout进行布局 219 8.1.3 Panel的body的样式范围 224 8.2 Form表单组件 226 ...

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

    当然我们可以使用 Ext.form.TextField，然后设置成 ReadOnly，不过这样子的显示效果不是很好，因为始终会有个输入框。所以我们必须使用 Ext.form.DisplayField，但是 Ext.form.DisplayField 没有一个format的属性，...

    深入浅出ExtJS第2版

    深入浅出ExtJS第2版+源码..1　下载EXT发布包 1 1.2　如何查看EXT自带的API和示例 1 1.3　为什么有些示例必须放在服务器上 ...4.3　EXT支持的控件 77 4.3.1　控件继承图 77 4.3.2　表单控件 78 4.3.3　基本输入控

    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(“操作信息”, “成功信息保存！...

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

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

    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 列表框(multiselect)的动态添加列表项的方法

    因为它这个是创建时自动加载的ArrayStore(关键字是:data: ds),没有动态增加的示例,但我们的项目需要有三个列表框,并且后两个的内容要根据第一个列表框内容动态的加载,因此要在选择第一个列表框的内容时,动态填充后两...

    extjs中验证实例

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

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

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

    ext实现完整的登录代码

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

    Extjs学习笔记之二 初识Extjs之Form

    Extjs中的表单组件是Ext.form.BasicForm，不过最简单最常用的是Ext.form.FormPanel控件，它继承自Panel，具有一定的界面显示控制能力，它其中包含着一个BasicForm对象，用来执行向服务器提交，加载等动作。...

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