前段时间公司让我们学习ExtJS，学习了一个礼拜，完成了个小练习，思来想去决定做个总结，但是又懒得敲word，于是就在代码上每行都加上注释，以后忘记了就翻开来看看。

在这里给出代码。

完成的功能如图所示。

?

/**
 * 默认页面
 * 
 * @author leaves.qq:1330771552
 */

Ext.define('SupplyManagementDesktop.defaultsWindow', {
	extend : 'Ext.ux.desktop.Module',

	requires : ['Ext.data.ArrayStore', 'Ext.util.Format', 'Ext.grid.Panel',
			'Ext.grid.RowNumberer', 'Ext.ux.LiveSearchGridPanel'],

	id : 'defaultsWindow-win',

	/***************************************************************************
	 * ExtJS控件使用按照如下规则。 首先，创建控件，调用Ext.create
	 * weightName:空间命名空间，args：空间参数，用{}包围，当做对象传入
	 * 
	 * ####################################### 注意JS中有如下语法： var object={
	 * paramter1:value1, paramter2:value2, paramter3:value3 }
	 * object.paramter1可以直接获得value1 #####################################
	 * 
	 * ExtJS中所有空间创建方法都如上
	 * 
	 * Ext.create(String weightName,Mixed args)
	 * 所以此处args相当于一个匿名对象（没有引用），但并非真的匿名对象
	 * 
	 */
	// 初始化窗体的方法
	init : function() {
		this.launcher = {
			text : 'Defaults Window',
			iconCls : 'icon-grid',
			// 调用createWindow方法
			handler : this.createWindow,
			scope : this
			// this指向Ext.define（这个方法用来声明命名空间。）定义的命名空间
		};
	},// 初始化窗体的方法结束

	// 创建窗体的方法
	createWindow : function() {
		// 下面进行预定义。就好像C里面的 先定义后使用。不然后定义的在前面使用会认为未初始化。（猜测：可能不跟JS一样，属于ExtJS的语法）
		var dataPanel;// 预定义一个GridPanel，用来显示数据
		var innerPanel;// 存放Panel的容器
		var workerPanel;
		var westPanel;
		var deptStore;
		var moduleObj = this;// 创建windows窗体的时获取下本身的环境,此处不能确定，这个this是指向Ext.define还是指向创建的这个窗体
		var desktop = this.app.getDesktop();

		// 获取窗体，外部最大窗体，具体方法不清楚。
		var win = desktop.getWindow('defaultsWindow-win');

		// 创建按钮bar组件,是上面的几个按钮。
		var buttonBar = Ext.create('Ext.toolbar.Toolbar', {
			dock : 'top',
			items : [{
						xtype : 'button',
						text : '新建',
						iconCls : 'add',
						handler : function() {
							// 自行新建操作，传入一个create字符串用来标示是什么按钮事件，传入dataPanel（注意：上面没有var
							// dataPanel;此处会报错。）因为后面的新建需要用到表格显示的数据（dataPanel.getSelectionModel().getSelection()）
							moduleObj.proAction("create", dataPanel,
									workerPanel);
						}
					}, {
						// 分隔符，不解释。
						xtype : 'tbseparator'
					}, {
						xtype : 'button',
						text : '删除',
						iconCls : 'remove',
						handler : function() {
							moduleObj.proAction("delete", dataPanel);
						}
					}, {
						xtype : 'tbseparator'
					}, {
						xtype : 'button',
						text : '复制',
						iconCls : 'copy',
						handler : function() {
							moduleObj.proAction("copy", dataPanel, workerPanel);
						}
					}, {
						xtype : 'button',
						text : '重置检索',
						iconCls : 'reset',
						handler : function() {
							dataPanel.resetSearch();
						}
					}]
		});// 创建按钮bar组件结束

		// 临时创建的一个用来展示的store
		var theStore = Ext.create('Ext.data.Store', {
			fields : [{
						name : 'projectId',
						type : 'String'
					}, {
						name : 'projectCode',
						type : 'String'
					}, {
						name : 'projectName',
						type : 'String'
					}, {
						name : 'startDate',
						type : 'String'
					}, {
						name : 'endDate',
						type : 'string'
					}, {
						name : 'qualityTarget',
						type : 'string'
					}, {
						name : 'projectLeader',
						type : 'string'
					}, {
						name : 'projectStatus',
						type : 'string'
					}, {
						name : 'qualification',
						type : 'string'
					}, {
						name : 'constructionUnit',
						type : 'string'
					}],
			pageSize : 20,// 每页显示数量。此处设置可以在向后台申请数据的时候“自动”传参一个
			// limit和satrt，start不需要指定ExtJS会自动计算，然后传值。
			proxy : {
				type : 'ajax',// 使用传输方式为ajax（ajax是异步执行的操作，即不需要刷新页面即可申请后台资源。）
				method : 'POST',// post和get是HTML中表单（form）提交两种方式，get会在地址栏显示参数，post不显示
				url : '/Training/myProjectInfoController/getAllProjectInfo.action?deptId='
						+ 0,

				reader : {// 设置读取方式属性
					type : 'json',// 设置读取方式格式为：json字符串
					root : 'root',// 设置根元素，即读取上面f