ext--form layout

最新推荐文章于 2023-12-11 09:48:59 发布
最新推荐文章于 2023-12-11 09:48:59 发布
阅读量128 收藏
点赞数 1
文章标签： ext 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>layout_form.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
	<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">
		Ext.onReady(function(){
			var f = new Ext.form.FormPanel(
				{
					title:"灵活布局的表单",//表单标题
					labelAlign:"right",//标签布局
					labelWidth:65,//标签宽度
					layout:"form",//表单布局，form(由上至下)
					width:700,//表单宽度
					autoHeight:true,//自动计算高度
					frame:true,//显示效果更好
					url:"",//提交到的url
					method:"post",//提交方式
					items:[ //表单组件
						{ // 第一行
							layout:"column",//布局，column(从左到右)，结合form与column可以制作任意布局的表单。
							items:[
								{
									columnWidth:0.33,//占一行的百分比
									layout:"form",//布局
									items:[//具体的表单组件。
										{
											xtype:"textfield",
											name:"family",
											fieldLabel:"姓",
											width:165
										}
									]
								},
								{
									columnWidth:0.33,
									layout:"form",
									items:[
										{
											xtype:"textfield",
											name:"name",
											fieldLabel:"名",
											width:165
										}
									]
								},
								{
									columnWidth:0.33,
									layout:"form",
									items:[
										{
											xtype:"textfield",
											name:"enName",
											fieldLabel:"英文名",
											width:165
										}
									]
								}
							]
						},
						{ // 第2行
							layout:"column",
							items:[
								{
									columnWidth:0.5,
									layout:"form",
									items:[
										{
											xtype:"textfield",
											name:"family",
											fieldLabel:"座右铭1",
											width:250
										}
									]
								},
								{
									columnWidth:0.5,
									layout:"form",
									items:[
										{
											xtype:"textfield",
											name:"name",
											fieldLabel:"座右铭2",
											width:250
										}
									]
								}
							]
						},
						{ // 行3
							layout:"form",
							items:[
								{
									xtype:"textfield",
									name:"up",
									width:500,
									fieldLabel:"奖励"
								}
							]
						},
						{ // 行4
							layout:"form",
							items:[
								{
									xtype:"textfield",
									name:"lown",
									width:500,
									fieldLabel:"处罚"
								}
							]
						},
						{ // 第5行
							layout:"column",
							items:[
								{
									columnWidth:0.25,
									layout:"form",
									items:[
										{
											xtype:"textfield",
											name:"moive",
											fieldLabel:"最爱电影",
											width:125
										}
									]
								},
								{
									columnWidth:0.25,
									layout:"form",
									items:[
										{
											xtype:"textfield",
											name:"music",
											fieldLabel:"最爱音乐",
											width:125
										}
									]
								},
								{
									columnWidth:0.25,
									layout:"form",
									items:[
										{
											xtype:"textfield",
											name:"singer",
											fieldLabel:"最爱歌手",
											width:125
										}
									]
								},
								{
									columnWidth:0.25,
									layout:"form",
									items:[
										{
											xtype:"textfield",
											name:"sport",
											fieldLabel:"最爱运动",
											width:125
										}
									]
								}
							]
						},
						{ // 行6
							layout:"form",
							items:[
								{
									xtype:"htmleditor",
									name:"pragrpha",
									fieldLabel:"文章",
									width:500
								}
							]
						}
					],
					buttonAlign:"center",//按钮布局。
					buttons:[
						{
							text:"确定",
							icon:"../ext/resources/images/default/dd/drop-yes.gif",
							cls:"x-btn-text-icon"
						},{
							text:"取消",
							icon:"../ext/resources/images/default/dd/drop-no.gif",
							cls:"x-btn-text-icon"
						}
					],
					renderTo:"f"//绑定到某个元素上。
				}
			);		
		});
	</script>
  </head>
  
  <body >
  	<div align="center" id="f"></div>
  </body>
</html>



luckystar2008
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
formlayout详细讲解
12-14
详细讲解了swing 基于form的布局实现原理
FormLayout表格布局
Grace_1203的博客
04-25 3655
总结： （1） FormLayout用的data类是:FormData。 FormData用另外一 个类来控制窗口小部件的大小和位置: FormAttachment。 一个FormData最多用4个FormAttachment,它们分别对应这个小部件的4个面:顶部，底部，左边和右边 FormLayout通过设置FormData四边的附加值(FormAttachment对象)来设置控件的布...
自定义布局管理器-FormLayout
novelly的专栏
06-22 1083
自定义布局管理器-FormLayout                                        第二部分：自定义布局管理器 在java.awt包与javax.swing包下有许多现成的布局类，比如BorderLayout、FlowLayout，还有较为复杂的、用于精确定位的布局类GridBagLayout、SpringLayout等。起初我刚刚从事gooey时（06年
[QT_047]Qt学习之表单布局器（QFormLayout）
kongcheng253的博客
01-28 4997
Qt学习之表单布局器（QFormLayout）
ext-3.0框架源码
01-16
4. **布局管理**：`Ext.layout`包含各种布局管理器，如`Ext.layout.container.Fit`和`Ext.layout.container.Border`，它们负责计算和调整组件的大小和位置。 5. **AJAX通信**：`Ext.Ajax`提供了与服务器交互的接口...
ExtJs常用布局--layout详解实例代码
05-23
ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有：border、form、absolute、column、accordion、table、fit、card、anchor 另外，不常见的布局有：tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...
Ext框架开发文档及ext-core.js
09-25
2. **布局管理器（Layout Managers）**：EXT提供了一系列的布局管理器，如Fit、Border、Form、Table等，用于自动调整组件的大小和位置，适应不同的屏幕尺寸和内容变化。 3. **数据绑定（Data Binding）**：EXT支持...
EXT搜索面板
06-21
EXT搜索面板var cfg = { border: false, defaults: { border: false, layout: { type: 'hbox' }, defaults: { margin: '0 3 0 0', border: false, maxWidth: 300, minWidth: 180, layout: { type: 'form'...
Ext Form 示例
09-28
layout: 'form', items: [/* 表单字段将在这里定义 */] }); ``` 3. **添加表单字段**：使用 `items` 配置项定义表单中包含的字段，如文本框、选择框、复选框等。 ```javascript items: [{ xtype: 'textfield', ...
PyQt6 表单布局Form Layout (QFormLayout)
最新发布
java1234的博客
12-11 628
FormLayout控件表示表单布局，它的基类是QFormLayout，该控件以表单方式进行布局。 表单是一种网页中常见的与用户交互的方式，其主要由两列组成，第一列用来显示信息，给用户提示，而第二列需要用户进行输入或者选择
FormLayout
weixin_34358365的博客
05-18 458
2019独角兽企业重金招聘Python工程师标准>>> ...
Qt学习12：常用Layout布局方式总结
ylh的博客
07-03 5420
Qt学习记录：常用布局QBoxLayout，QGridLayout，QFormLayout，QStackedLayout，QTabWidget，QStackedWidget，QSplitter等类详解
java swt 布局_SWT中的布局之-----FormLayout(表格式布局)
weixin_39551993的博客
02-24 540
表格式(FormLayout类) 表格式布局管理器,通过创建组件各个边的距离来布局组件,和GridLayout一样强大.用GridLayout与FormLayout都可以实现相同的界面效果,但有时使用后者会更有效,而且不会像GridLayout因为容器大小变化而导致布局错位.使用marignWidth,marginHeight设置边距(这两个属性,来设置容器的左边距和上边距(单位:像素))使用Fo...
Qt设计师属性系列：FormLayout（表单布局）
前进加油
04-25 2029
Layout（布局）： layoutFieldGrowthPolicy： from：formLayout的layoutFieldGrowthPolicy属性（作者：老猿Python）
Ext.layout.FormLayout
方逸涛的专栏
08-30 3887
这是用来创建一个表单的布局，负责渲染和其部件内的子元件。渲染出来的Field是能够支持HTML label元素的用户体验设计。 This layout manager is specifically designed for rendering and managing child Components of forms. It is responsible for rendering the labels of s. 此类可以被继承或通过配置项layout:'form'Ext.Containerl
Qt学习之路15--布局管理器（QFormLayout）
热门推荐
一念之间、
08-20 2万+
前面两节学习了布局管理器中的QBoxLayout和QGridLayout。 今天学习Qt中的第三种布局管理器–QFormLayout 在正式介绍之前抛出一个问题，怎样设计下面这个GUI界面？ 根据之前学习过的内容来看有以下三种方式： - 绝对定位，左边摆放QLabel，右边放QLineEdit。 - 嵌套使用QBoxLayout，在QVBoxLayout中嵌套使用QHBoxLayou...
PyQt(Python+Qt)学习随笔：formLayout的layoutFormAlignment 属性
老猿Python
11-11 1373
一、引言 Qt Designer的表单布局（formLayout）中，layoutFormAlignment 用于控制表单布局中所有子部件在布局框内的对齐方式（与layoutLabelAlignment类似，也包括垂直和水平方向两个方向）。如图： 此属性实际对应的是QFormLayout的formAlignment 属性，缺省值取决于部件或应用程序样式。对于 QMacStyle样式，缺省值是Qt...
Ext3.2 布局——form layout
专注于应用与管理！
02-09 1260
formlayout是为表单而制定的布局。但是并不建议使用panel，然后设置layout:'form'，实际开发中，通常首选使用 FormPanel (默认情况下配置成FormLayout作为它的布局类) 因为它同时为表单的loading(加载)，validating(校验)和submitting(提交)提供了内建的功能。如以下示例： Ext.onReady(function() {
FormLayout(一)
shesunshine的成长笔记
08-20 701
 象其它的layout类一样，FormLayout用的data类是:FormData。FormData用另外一个类来控制窗口小部件的大小和位置: FormAttachment.一个FormData最多用4个FormAttachment,它们分别对应这个小部件的4个面:顶部，底部，左边和右边。FormAttachment定义了小部件在parent composite或是这个composite里其它部件的位置。FormAttachment计算位置和大小的方法:y=ax+b在这个等式中,在数学上y代表的是纵坐标,
layout : 'form', xtype : 'treefield', fieldLabel 不显示
06-02
在 Ext JS 4 中，如果你设置了 `layout` 为 `'form'`，那么你需要将 `treefield` 放在 `form` 中的一个 `container` 中，并将其设置为 `items` 的一部分。同时，你还需要将 `form` 的 `render` 方法调用到一个 `Ext....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值