extjs项目整理二

girdpanel curd

/**
* viewConfig作用在grid's UI试图上的配置项对象， 任何Ext.grid.GridView可用的配置
*选项都可在这里指定。
* forceFit True表示为自动展开/缩小列的宽度以适应grid的宽度，这样就不会出现水
*平的滚动条。ColumnModel中任意的width的设置可覆盖此配置项。
**/
TabPanelGrid = Ext.extend(Ext.grid.GridPanel, {
	initComponent : function() {
		if(!this.csm){
			this.sm = new Ext.grid.CheckboxSelectionModel();
		}else{
			this.sm = this.csm;
		}
		//this.autoHeight = true;
		this.stripeRows = true;
		//this.border = false;
		this.viewConfig = {
			forceFit : true
		};
		this.createColumns();
		this.createBbar();
		this.createtbar();
		TabPanelGrid.superclass.initComponent.call(this);
	}
}		

CreateColumns

/**
* dataIndex（可选的）数据索引，相当于Grid记录集（Ext.data.Store里面的
* Ext.data.Record ）*中字段名称，字段的值用于展示列里面的值（column's value）。*如不指定，Record*的数据列中的索引将作为列的索引。
**/
createColumns : function() {
		var cols = [];
		cols.push(this.sm);
		for ( var i = 0; i < this.cols.length; i++) {
			var f = this.cols[i];
			if(f.dataIndex)cols.push(f);
		}
		this.columns = cols;
	}

createBbar

	createBbar : function() {
		this.bbar = new Ext.PagingToolbar( {
			displayInfo : true,
			store : this.store
		});
	}

createTbar

createtbar : function() {
		this.tbar = new Ext.Toolbar( {
			items : [ "-", {
				text : '增加',
				handler : this.createRecord.createDelegate(this)
			}, "-", {
				text : '修改',
				handler : this.updateRecord.createDelegate(this)
			}, "-", {
				text : '删除',
				handler : this.removeRecord.createDelegate(this)
			}, "-", new Ext.ux.form.SearchField( {
				store : this.store,
				width : 150
			}) ]
		});
	}

createRecord

/**
*this.cols 是全局cols(初始化时的那个cols)
*cols 是函数里面声明的cols
**/
createRecord : function() {
		this.showWindow();
		form = this.getForm();
		form.baseParams = {
			create : true
		};
		//表单置空
		var emptyRecord = {};
		for ( var i = 0; i < this.cols.length; i++) {
				var f = this.cols[i].dataIndex;
				emptyRecord[f] = '';
		}
		form.setValues(emptyRecord);
	}

updateRecord

	updateRecord : function() {
		var r = this.getSelectedRecord();
		if (r != false) {
			this.showWindow();
			this.form = this.getForm();
			this.form.baseParams = {create : false};
			this.form.loadRecord(r);
		}
	}

getSelectedRecord

/**
*getSelectionModel返回grid的RowSelectionModel
*getSelections() : Array 
*返回以选取的纪录。Returns the selected records 
*getSelected() : Record 
*返回选区中的第一个记录。
**/
getSelectedRecord : function() {
		var sm = this.getSelectionModel();
		if (sm.getCount() == 0) {
			Ext.Msg.alert('信息', '请选择记录！');
			return false;
		} else {
			return sm.getSelections()[0];
	}
	}

getForm

/**
*getForm() : ext.form.BasicForm
*返回该面板包含的Form
**/
getForm : function() {
		return this.getFormPanel().getForm();
}	

getFormPanel

getFormPanel : function() {
		if (!this.gridForm) {
			this.gridForm = this.createForm();
		}
		return this.gridForm;
	}	

CreateForm

/**
*this.cols 初始化得到
* trackResetOnLoad : Boolean 
*如果为true，则表单对象的form.reset()方法重置到最后一次加载的数据或*setValues()数据，以相对于一开始创建表单那时的数据。
**/
createForm : function() {
		var items = new Array();
		for ( var i = 0; i < this.cols.length; i++) {
			var object = this.cols[i].formItem;
			if(object){
				items.push(object);
			}
		}
		var form = new Ext.form.FormPanel( {
			frame : true,
			defaultType : 'textfield',
			buttonAlign : 'center',
			labelAlign : 'rigth',
			labelWidth : 70,
			layout : 'form',
			trackResetOnLoad : true,
			url : this.formUrl,
			reader : this.store.reader,
			items : items,
			buttons : [ {
				text : '提交',
				handler : this.submintRecord.createDelegate(this)
			}, {
				text : '重置',
				handler : function() {
					form.getForm().reset();
				}
			} ]
		});
		return form;
	}

submintRecord

/**
* beginEdit() 属于record属性 
* 进入编辑。编辑期间，没有与所在的store任何关联的事件。
* endEdit()
* 结束编辑。如数据有变动，则会通知所在的store。
**/
submintRecord : function() {
		var form = this.getForm();
		var values = form.getFieldValues();
		if(!form.isValid()) return;
		var self = this;
		if (form.baseParams.create) {
			var data = new Ext.data.Record();
			for ( var name in values) {
				data.set(name,values[name]);
			}
		} else {
			var r = this.getSelectedRecord();
			r.beginEdit();
			for ( var name in values) {
				r.set(name, values[name]);
			}
			r.endEdit();
		}
		var tag = form.submit({
			success : function(form,action){
				if(action.result){
					if(form.baseParams.create)self.store.load();
				};
			},
			failure : function(form,action){
				Ext.Msg.alert("提示","操作错误!您可能没有权限或会话过期!");
			}
		});
		this.window.hide();
	}

removeRecord

removeRecord : function() {
		var r = this.getSelectedRecord();
		var self = this;
		if (r != false) {
			Ext.Msg.confirm("提示","是否确定删除！",function(btn){
				if(btn == 'yes'){
					Ext.Ajax.request({
					url:self.deleteUrl,
					params: { id: r.id},
					success:function(response, opts){
						self.store.load();
						try{
							var object = Ext.util.JSON.decode(response.responseText);
							if(object && !object.success){
								Ext.Msg.alert("错误！",object.msg);
							}
						}catch(e){

						}	
					},
					failure : function(response,Optional){
						Ext.Msg.alert("错误！",response.responseText);
					}
					});			
				}
			});
		}
	}

showWindow

/**
*closeAction : String 
*当关闭按钮被点击时执行的动作。“close”缺省的动作是从DOM树中移
*除window并彻底加以销毁。“hide”是另外一个有效的选项，只是在视
*觉上通过偏移到零下(negative)的区域的手法来隐藏，这样使得window可
*通过show 的方法再显示. 
*modal : Boolean 
*True 表示为当window显示时对其后面的一切内容进行遮罩，false表示为
*限制对其它UI元素的语法（默认为 false）。
*constrain : Boolean 
*True表示为将window约束在视图中显示，false表示为允许window在视
*图之外的地方显示（默认为false）。可选地设置constrainHeader使得头
*部只被约束。
*shim : Boolean 
*False表示为禁止用iframe填充，有些浏览器可能需要设置（默认为true）
*。注意此项只当floating = true时有效。
**/
showWindow : function() {
		if (!this.window) {
			var fromPanel = this.getFormPanel();
			var win = new Ext.Window( {
				title : 'user information',
				closeAction : 'hide',
				modal : true,
				constrain : true,
				shim : false,
				width : 300,
				items : [ fromPanel ]
			});
			win.show();
			this.window = win;
		} else {
			this.window.show();
		}
	}