ExtJS（7）- Form技巧

一、基础的Form表单

    首先Form是一个容器，可用于存放展示各种组件，form中提供了对form中组件的校验，与数据获取等方法来方便form操作。

二、Form的布局

layout: {
    type: ‘table‘,
    columns: 2
}

form中推荐一般用table的方式来布局

三、Form的验证与提交

form提交以前都要经过验证，

if(me.form.isValid()){
    var obj = me.form.getFieldValues();
    //obj即form中获取的参数对象，对象key值对应各组件的name
}

验证后推荐ajax的提交方式

Ext.Ajax.request({
	url: url,
	jsonData: obj, //以对象形式提交到后台
	params:obj, //以parmas的形式提交到后台
	success: function(res){
		Pactera.logger.showMsg("Save team success.");
		me.callback();
		me.up(‘window‘).close();
	}
});

四、Form的数据加载

Ext.Ajax.request({
	url: ‘team?id=‘+ me.teamId,
	success: function(res){
		var responseText = arguments[0].responseText;
		var team = Ext.decode(responseText);
		var teamRecord = new Pactera.model.Team(team);//通过Model实例化为record
		me.form.loadRecord(teamRecord);//form加载record
		
		//一些特殊组件需要再组织手动添加
	}
});

五、当查看详情时设置只读

可以直接将form的disabled属性设置为true,

也可以将form下的各组件的readOnly属性设置为true,

var setFlagByArr = function(arr){
	for(var i in arr){
		arr[i].setReadOnly(true);
	}
}

var arr1 = form.query(‘textfield‘);
var arr2 = form.query(‘radio‘);
var arr3 = form.query(‘checkbox‘);

setFlagByArr(arr1);
setFlagByArr(arr2);
setFlagByArr(arr3);

本文出自 “雪飘七月” 博客，请务必保留此出处http://xuepiaoqiyue.blog.51cto.com/4391594/1675696

ExtJS（7）- Form技巧

原文：http://xuepiaoqiyue.blog.51cto.com/4391594/1675696