`

Ext学习_FormPanel布局2

 
阅读更多
Ext.onReady(function(){
	var form = new Ext.form.FormPanel({
		title: "灵活布局的表单",
		width: 650,
		autoHeight: true,
		frame: true,
		renderTo: "a",
		layout: "form", //整个大的表单是form布局
		labelWidth: 65,
		labelAlign: "left",
		items: [
		 {//行1
			 layout: "column", //从左往右的布局
			 items:[
			        {
			        	columnWidth: .3, //占该行的30%
			        	layout: "form", //从上往下的布局
			        	items: [
			        	  {
			        		  xtype: "textfield",
			        		  fieldLabel: "姓",
			        		  width: 120
			        	  }
			        	]
			        	
			        },{
			        	columnWidth: .3,
			        	layout: "form",
//			        	labelWidth: 30,
			        	items: [
			        	   {
			        		   xtype: "textfield",
			        		   fieldLabel: "名",
			        		   labelStyle: 'text-align: right;',
			        		   width: 120
			        	   }
			        	]
			        },{
			        	columnWidth: .4,
			        	layout: "form",
			        	style: "text-align: right",
			        	items: [
			              {
			            	  xtype: "textfield",
			            	  fieldLabel: "英文名",
			            	  labelStyle: "text-align: right",
			            	  width: 180
			              }
			            ]
			        }
			 ]
		 },{
			 //行2
			 layout: "column",
			 items: [
			    {
			    	columnWidth: .5,
			    	layout: "form",
			    	items: [
			    	 {
			    		 xtype: "textfield",
			    		 fieldLabel: "座右铭1",
			    		 width: 220
			    	 }
			    	]
			    },{
			    	columnWidth: .5,
			    	layout: "form",
			    	style: "text-align: right", //右对齐
			    	items: [
			    	 {
			    		 xtype: "textfield",
			    		 fieldLabel: "座右铭2",
			    		 labelStyle: "text-align: right",
			    		 width: 220
			    	 }
			    	]
			    }
			]
		 },
 

 

分享到:
评论

相关推荐

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

    这个API文档的中文版,"Ext_2.2_API(chinese).rar_Ext 2.2 API_ext js 2_ext-2.2 api_ext2.2",是针对Ext JS 2.2框架的重要参考资料,对于开发者来说尤其有价值,特别是那些中文为母语的开发者,它使得理解框架的...

    Ext table布局实例 formpanel的table布局

    本文将深入探讨“Ext table布局实例”以及“formpanel的table布局”,帮助开发者更好地理解和运用这两种布局方式。 首先,我们要理解什么是Ext table布局。Ext table布局主要用于显示数据,它基于HTML的`<table>`...

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

    TextField经常与`Ext.form.FormPanel`一起使用,形成完整的表单。在表单中,每个TextField作为表单的一个字段,可以通过`FormPanel`的`getForm().load()`和`submit()`方法进行数据加载和提交。 6. **示例代码**: ...

    ext开发_前后台交互

    2. **使用Ext.Ajax.request()** 相比于`form.submit()`,`Ext.Ajax.request()`提供了更多的控制选项,允许开发者手动处理进度条的显示。这种方法适用于更复杂的数据交互场景,尤其是在需要定制化错误处理或数据解析...

    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使用

    通过分析这个EXT 2.0项目源代码,开发者可以学习如何组织EXT应用程序的结构,如何利用EXT的API创建组件,如何处理数据交互,以及如何实现特定的功能。对于想要提升EXT编程技能或者希望理解EXT内部机制的人来说,这是...

    .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-...

    ext学习之路

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

    ext3.0中文API

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

    treeGrid目录拖动到formPanel

    2. `formPanel`的创建,包括字段集、布局和可能的拖放配置。 3. `Ext.dd.DragSource`和`Ext.dd.DropTarget`的实例化和关联。 4. 拖放事件的监听器和处理函数,如`onBeforeDrop`和`onDrop`。 为了实现数据的同步,...

    Ext中表单中各种组件的布局

    ### Ext中表单中各种组件的布局 #### 平行分列布局介绍 在Ext框架中,表单组件是创建用户界面的重要组成部分。通过合理的布局管理可以极大地提升用户体验。本篇将详细介绍Ext中表单中各种组件的布局方法,重点讨论...

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

    2. **关联FormPanel**:确保新字段与FormPanel正确关联,以便在提交表单时能进行验证。这可以通过`formPanel.getForm().add()`方法实现,它会自动将字段加入到表单的验证链中。 3. **更新验证状态**:如果在表单...

    ext 2.0 form demo

    1. FormPanel:EXT中的FormPanel是用于构建表单的基本容器,它可以包含多个表单字段和其他组件。 2. 字段组件:EXT提供了多种内置的表单字段,如TextField(文本输入)、ComboBox(下拉框)、CheckBox(复选框)、...

Global site tag (gtag.js) - Google Analytics