EXTJS学习笔记：panelForm和combobox

项目用到EXTJS，开始一直用的是JQuery，所以对EXTJS有点陌生。通过几天的时间终于算是摸到点门路了，这只是我的一些笔记，为了帮助自己记忆写的东西。
下面写写panelForm和combobox的用法：


1、先看看panelForm

var searchForm = new Ext.FormPanel({
		frame : true,
		labelAlign : 'right',
		layout : "form",
		labelWidth : 80,
		border : false,
		items : [{
			layout : 'column',
			border : false,
			baseCls : 'x-plain',
			items : [{
				columnWidth : .25,
				layout : 'form',
				baseCls : 'x-plain',
				border : false,
				defaultType : 'textfield',
				labelWidth : 100,
				defaults : {
				anchor : '93%'
				},
				items : [{
					fieldLabel : '任务名称',
					id : 'qtaskNameId',
					name : 'qtaskName'
				},{
					fieldLabel : '要求完成时间',
					id : 'taskLimitTimeId',
					hiddenName : 'taskLimitTime',
					xtype : 'datefield',
					format : 'Y-m-d',
					altFormats : 'Y-m-d',
					
					maxLength : 50
					},{
					fieldLabel : '创建时间',
					id : 'creationTimeId',
					hiddenName : 'creationTime',
					xtype : 'datefield',
					format : 'Y-m-d',
					altFormats : 'Y-m-d',
					
					maxLength : 50
					}]
			}, {
				columnWidth : .23,
				layout : 'form',
				border : false,
				baseCls : 'x-plain',
				labelWidth : 60,
				defaultType : 'textfield',
				defaults : {
				anchor : '93%'
				},
				items : [
					{
						xtype : 'combo',
						fieldLabel : '任务来源',
						id : 'qtaskSourceId',
						hiddenName : 'qtaskSource',
						valueField : 'dicValue',
						displayField : 'dicCnMsg',
						mode : 'remote',
						loadingText : '加载中...',
						store : taskSourceStore,
						selectOnFocus : true,
						editable : false,
						triggerAction : 'all',
						maxLength : 40
					},
					{
						fieldLabel : '到',
						id : 'taskLimitTimeToId',
						hiddenName : 'taskLimitTimeTo',
						xtype : 'datefield',
						format : 'Y-m-d',
						altFormats : 'Y-m-d',
						maxLength : 50
					},
					{
						fieldLabel : '到',
						id : 'creationTimeToId',
						hiddenName : 'creationTimeTo',
						xtype : 'datefield',
						format : 'Y-m-d',
						altFormats : 'Y-m-d',
						maxLength : 50
					}]
			},{
				columnWidth : '.1',
				text : "查询",
				layout : "form",
				defaultType : "button",
				items : [{
					text : '查询',
					handler : function() {
					
						taskName = Ext.getDom("qtaskNameId").value;
						taskSource = Ext.getDom("qtaskSourceId").value;
						taskLimitTime = Ext.getDom("taskLimitTimeId").value;
						taskLimitTimeToId = Ext.getDom("taskLimitTimeToId").value;
						creationTime = Ext.getDom("creationTimeId").value;
						creationTimeTo = Ext.getDom("creationTimeToId").value;
						
						//alert(taskName+','+taskSource+','+taskLimitTime+','+taskLimitTimeToId+','+creationTime+','+creationTimeTo);
						
						// 加载数据
						queryStore.load({
							params : {
								start : 0,
								limit : 10,
								taskName : taskName,
								taskSource : taskSource,
								taskLimitTime : taskLimitTime,
								taskLimitTimeTo : taskLimitTimeTo,
								creationTime : creationTime,
								creationTimeTo : creationTimeTo
							}
						});
						
						//grid.getStore().reload();
					}
						
				}]
			}]
		}]	
	});	

这是一个查询Form，里面的一些参数是什么意思就不用多说了，网上到处都是。个人觉得formPanel比较麻烦点的就是他的布局问题，开始一直把握不好究竟用哪种布局方式，在网上搜索了一大堆的资料，基本上解决了问题。这方面我也是初学，还向各位JE的大虾请教。
2、combobox

先贴点代码：

items : [
					{
						xtype : 'combo',
						fieldLabel : '任务来源',
						id : 'qtaskSourceId',
						hiddenName : 'qtaskSource',
						valueField : 'dicValue',
						displayField : 'dicCnMsg',
						mode : 'remote',
						loadingText : '加载中...',
						store : taskSourceStore,
						selectOnFocus : true,
						editable : false,
						triggerAction : 'all',
						maxLength : 40
					}

combobox开始的时候也难到我了，一直搞不对它的store，所以一直取不到数据，因为store的数据是从数据字典里面取出来的，所以，先得搞清楚究竟它是怎样同后台交互的，要注意的是combobox现实的数据和其真实的值要搞清楚，valueField 是真实值，displayField 是显示值及我们实际看见的值，而前者是从数据库中取出的实际值。

下面store：

var taskSourceStore = new Ext.data.Store({
	autoLoad : true,
	proxy : new Ext.data.HttpProxy({
	url : 'findDic.do?type=TASK_SOURCE'
	}),
	reader : new Ext.data.JsonReader({
			root : 'root'
	}, [{
		name : 'dicValue',
		type : 'string'
	}, {
	name : 'dicCnMsg',
	type : 'string'
}])
});

EXT很多东西都已经给我们封装好的，而且开发出来的界面确实也不错，开发模式也感觉有点OO，只是个人看法，如果有什么说错的地方请JE的朋友帮忙指正。