EXTjs学习笔记（6）

    讨论了如何创建组件，如何对组件进行校验，如何将组件与后台交互等。 当我们准备使用这些工具组件进行实际开发时，第一个浮现在脑海的就是要实现系统的界面布局即原型模型，在现有的开发模式下一般是设计人员根据客户需求通过viso 等工具设计出用户交互界面，然后由美工进行美化实现，最后交友开发人员进行填充业务代码进行交互实现。 EXT精美的组件让我们完全可以摒弃掉美工这个环节的开销和瓶颈，开发人员完全可以根据设计人员绘制出的交互界面通过EXT简单的实现出来。 那么我们如何使用EXT实现设计人员的交互界面呢，如何进行有效的布局呢。 如果没有使用过EXT的话第一个想法肯定是表格，iframe，frame等。 EXT使得布局的开发更加简单，让我们开始学习吧。

 

1. 概念

    表格中分了行列，在设计时需要根据具体的布局设计好行数和列数，在EXT中也有类似的概念但是已经有很大的不同之处，建议初学时不要类比，因为反而会搞混。

    EXT的两种布局方式，form，column 默认是 column，当使用column方式时可以设置columnWidth 来设置每一组组件占用的列宽 来对行进行分割。

    这里不能直接映射理解为行、列，因为每次定义了一个column行 不意味着就会生成一行 然后再分割，再分割的时候可能会产生新的行。 理解为第一次定义行区域，第二次定义行区域，然后根据columnWidth进行对行分割。 比如将第一个区域分成两份，此时这两份如果只在分开的两个区域各创建一个组件则形成一个一行两列的区域，如果每个划分区域创建两个纵向（form）布局的组件，则形成一个两行两列的区域，如果各创建三个，则是三行三列的了。创建起来更简单了但是与原有分割方法有了很大的区别。

    当要在上面的基础上再创建一行一列的区域时，则需要再划分出一个行区域 column布局，然后在此布局下创建form布局并且占满全格。

 

2. 实例：

Ext.onReady(function() {
			Ext.QuickTips.init();
			var form = new Ext.FormPanel({
						title : "LayOut测试",
						width : 800,
						autoHeight : true,
						frame : true,
						lableAlight : "right",
						lableWith : "10",
						layout : 'form',
						items : [{
									layout : 'column',
									items : [{
												columnWidth : .3,
												layout : 'form',
												items : [{
															xtype : 'textfield',
															fieldLabel : 'First Name',
															name : 'first',
															anchor : '95%'
														}, {
															xtype : 'textfield',
															fieldLabel : 'Company',
															name : 'company',
															anchor : '95%'
														}, {
															xtype : 'textfield',
															fieldLabel : 'Company',
															name : 'company',
															anchor : '95%'
														}]
											}, {
												columnWidth : .3,
												layout : 'form',
												items : [{
															xtype : 'textfield',
															fieldLabel : 'Last Name',
															name : 'last',
															anchor : '95%'
														}, {
															xtype : 'textfield',
															fieldLabel : 'Email',
															name : 'email',
															vtype : 'email',
															anchor : '95%'
														}]
											}, {
												columnWidth : .3,
												layout : 'form',
												items : [{
															xtype : 'textfield',
															fieldLabel : 'Last Name',
															name : 'last',
															anchor : '95%'
														}, {
															xtype : 'textfield',
															fieldLabel : 'Email',
															name : 'email',
															vtype : 'email',
															anchor : '95%'
														}]
											}]
								}, {
									layout : 'column',
									items : [{
												layout : 'form',
												items : [{
															xtype : 'textfield',
															fieldLabel : 'Last Name',
															name : 'last',
															anchor : '95%'
														}]
											}]
								}]
					});
			form.render(Ext.getBody());
		});

 

3. 小结：

    布局这里说实话我总是想到表格，这样两个又映射不上反而把自己搞混了。 个人觉得还是不要去联想就按照EXT现有的布局方式去开发去理解。EXT 更像是在使用敏捷开发一样 什么时候想用的时候我就划分区域然后再分割，而表格则是在做之前就做了规划。