ExtJS（7）- Form技巧

1、基礎的Form表單

    首先Form是一個容器，可用於存放展現各類組件，form中提供了對form中組件的校驗，與數據獲取等方法來方便form操做。

2、Form的佈局

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

form中推薦通常用table的方式來佈局

3、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();
	}
});

4、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
		
		//一些特殊組件須要再組織手動添加
	}
});

5、當查看詳情時設置只讀

能夠直接將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);