`

Ext学习_FormPanel布局3

 
阅读更多
{
			 //行3
			 layout: "form",
			 style: "text-align: left",
			 items: [
			  {
				  xtype: "textfield",
				  fieldLabel: "奖励",
				  width: 567
			  },{
				  xtype: "textfield",
				  fieldLabel: "处罚",
				  width: 567
			  }        
			 ]
		 } ,{
			 //行4
			 layout: "column",
			 items: [
			   {
				   layout: "form",
				   columnWidth: 0.2,
				   items: [
				     {
				    	 xtype: "textfield",
				    	 fieldLabel: "电影最爱",
				    	 width: 50
				     }   
				   ]
			   },{
				   layout: "form",
				   columnWidth: 0.2,
				   items: [
				     {
				    	 xtype: "textfield",
				    	 fieldLabel: "音乐最爱",
				    	 width: 50
				     }
				   ]
			   },{
				   layout: "form",
				   columnWidth: 0.2,
				   items: [
				     {
				    	 xtype: "textfield",
				    	 fieldLabel: "明星最爱",
				    	 width: 50
				     }
				   ]
			   },{
				   layout: "form",
				   columnWidth: 0.2,
				   items: [
				    {
				    	xtype: "textfield",
				    	fieldLabel: "运动最爱",
				    	width: 50
				    }        
				   ]
			   }        
			   
			 ]
		 },{
			 //行5
			 layout: "form",
			 items: [
			  {
				  xtype: "htmleditor",
				  fieldLabel: "获奖文章",
				  enableLists: false,
				  enableSourceEdit: false,
				  height: 150,
				  width: 567
			  }
			 ]
		 }       
		],
		buttonAlign: "center",
		buttons: [
		 {
			 text: "提交"
		 },
		 {
			 text: "重置"
		 }
		]
		
	});
});
 
分享到:
评论

相关推荐

    Ext_2.2_API(chinese).rar_Ext 2.2 API_ext js 2_ext-2.2 api_ext2.2

    总的来说,Ext JS 2.2 API的中文版是开发人员学习和使用此框架的宝贵资源,可以帮助他们更高效地开发出功能强大的Web应用。通过深入理解和掌握这个API,开发者可以充分利用Ext JS 2.2的强大功能,创造出具有专业品质...

    Ext table布局实例 formpanel的table布局

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

    ext-3-TextField-sample.rar_ext_ext TextField_ext textfield inp

    在提供的压缩包中,"ext-3-TextField-sample.rar" 涉及到的是ExtJS 3.x版本中的TextField组件,这是一个基本的用户输入控件,常用于收集用户在网页上的文本信息。这个示例着重介绍了如何创建和使用TextField。 ...

    ext开发_前后台交互

    3. **使用Ext.data.Connection** `Ext.data.Connection`则提供了一种更为底层的Ajax请求管理机制。通过创建`Connection`实例并调用`request()`方法,开发者可以直接控制HTTP请求的发送,包括请求头、响应类型等高级...

    Ext_Designer生成代码的使用

    这些代码通常包含创建Ext JS组件(如TabPanel、FormPanel等)的逻辑。 3. **添加额外的初始化代码**:根据项目需求,可能需要添加一些额外的代码来初始化组件或设置特定的行为。在示例中,可以看到`MyTabsUi`组件被...

    Ext 添加功能form表单实例

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

    ExtJs中表单formPanel的横向布局

    本文将深入探讨如何在ExtJs中使用`FormPanel`组件结合`form`和`column`布局属性来实现横向布局,即在一个表单中元素能够按照列分布,形成一种更为直观和用户友好的界面设计。 ### 一、理解`FormPanel`及其属性 `...

    ext2.0项目源代码供大家学习ext使用

    3. **布局管理**:EXT提供了多种布局模式,如表布局、流式布局、绝对布局等,以适应不同类型的组件排列需求。 4. **Store和Model**:EXT中的Store是数据容器,用于存储和管理数据,而Model定义了数据结构和字段。...

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

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

    EXT_JS实用教程

    - **表单及字段组件**:如`FormPanel`(表单面板)、`Checkbox`(复选框)、`ComboBox`(组合框)、`DateField`(日期字段)等,用于收集用户输入的数据。 每种组件都有其特定的使用场景和配置属性,例如`Panel`...

    EXT--API.zip_ext 3.0 api

    EXT的布局管理器使得在页面上灵活布置组件变得简单,可以实现各种复杂的布局模式,如绝对布局、卡片布局、网格布局等。 API文档是开发者理解EXT 3.0功能的关键,它详细介绍了每个类、方法、属性和事件。例如,...

    ext API帮助文档(chm格式),及ext教程

    EXT的布局管理是其灵活性的关键,有多种布局方式,如fit布局、border布局、form布局等,可以根据需求选择合适的布局以适应不同的界面设计。 学习EXT,不仅需要理解API和基本组件,还要熟悉MVC(Model-View-...

    ext3.0中文API

    总而言之,EXT3.0中文API文档是学习EXT框架的关键资料,它将帮助开发者快速上手EXT,充分利用其功能来构建功能强大、用户友好的Web应用程序。无论你是初学者还是经验丰富的EXT开发者,这份文档都将为你提供宝贵的...

    Ext3.2开源框架

    Ext3.2开源框架是基于JavaScript的Web应用程序开发框架,主要设计用于构建功能丰富的、交互式的用户界面。...无论是新手还是经验丰富的开发者,都可以通过深入学习和掌握Ext3.2,进一步提升自己的开发能力。

    ext学习之路

    ### ext学习之路:深入解析ExtJS 4.20的核心组件与应用 #### 构建与源码(build & source) 在深入探索ExtJS 4.20之前,理解其构建方式与源码结构至关重要。ExtJS的构建过程通常涉及将源代码编译成适合生产环境的...

    treeGrid目录拖动到formPanel

    3. `Ext.dd.DragSource`和`Ext.dd.DropTarget`的实例化和关联。 4. 拖放事件的监听器和处理函数,如`onBeforeDrop`和`onDrop`。 为了实现数据的同步,我们需要确保`formPanel`的模型和`treeGrid`的数据结构匹配。...

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

    3. **更新验证状态**:如果在表单已经初始化并显示的情况下添加字段,可能需要手动触发FormPanel的验证,可以使用`formPanel.getForm().isValid()`来检查整个表单是否有效。 4. **错误处理**:当验证失败时,EXT JS...

    ext 2.0 form demo

    3. 动态布局:EXT 2.0的布局管理器提供了多种布局方式,如表格布局、流式布局、绝对布局等,方便开发者根据需求调整表单元素的位置和排列。 二、EXT 2.0表单组件 1. FormPanel:EXT中的FormPanel是用于构建表单的...

Global site tag (gtag.js) - Google Analytics