Extjs 增删改查基本功能页面Js

var ContactPepole_URL = '/etl/sms/getAllContactPepole'; 
var PAGESIZE=10;
/**************ContactPepoleForm组件****************************/
ContactPepoleForm = Ext.extend(Ext.ux.Form,{
	constructor: function(){
//		this.contactId = this.createHidden('联系人ID', 'contactId', '95%');
		this.name = this.createTextField('<font color="red">*</font>联系人姓名','name','95%','',null,50,'证件号码最大长度为50');
		this.tel = this.createTextField('<font color="red">*</font>联系人电话','tel','95%','',null,50,'证件号码最大长度为50');
		this.address = this.createTextField('联系人住址','address','95%','',null,50,'证件号码最大长度为50');
		this.remark = this.createTextArea('备注:', 'remark', 80, '97%', 2);
		
		this.address.allowBlank = true;
		
		ContactPepoleForm.superclass.constructor.call(this, {
	            anchor: '100%',
	            autoHeight:true,
	            labelWidth: 90,
	            labelAlign :'right',
	            frame: true,
	            bodyStyle:"padding: 5px 5px 0",
	            layout: 'tableform',
	            layoutConfig: {columns : 2},
	            items:[		
	                this.name,
	                this.tel,
	                this.address,
	                {xtype:'textfield'},
	                this.remark
	                //this.contactId
	            ],
	            buttonAlign :'center',
	            buttons: [
	               {text: '保存', width: 20,iconCls: 'save',handler:this.addFormClick,scope:this},
	               {text: '修改', width: 20,iconCls:'edit', handler: this.updateFormClick, scope: this},
	               {text: '重置', width: 20,iconCls:'redo', handler: this.onResumeClick, scope: this},               
	               {text: '清空', width: 20, iconCls:'redo',  handler: this.resetFormClick, scope: this},
	               {text: '关闭', width: 20,iconCls:'delete', handler: this.onCloseClick, scope: this}
	            ]
	        });
	},
	addFormClick: function(){
		if(this.getForm().isValid()){
			this.getForm().submit({
				waitMsg: '正在提交数据...',
				url: '/etl/sms/saveContactPepole',
				method: 'POST',
				success: function(form,action){
					Ext.MessageBox.alert("系统提示：","添加成功！");
					contactPepoleGrid.contactPepoleAddWindow.hide();
					contactPepoleGrid.vbbar.doLoad(contactPepoleGrid.vbbar.cursor);
				},
				failure: function(form,action){
					Ext.MessageBox.alert("系统提示：","添加失败！");
				}
			});
		}
	},
	updateFormClick: function(){
		var contactId = contactPepoleGrid.getSelectionModel().getSelections()[0].get('contactId');
		if(this.getForm().isValid()){
			this.getForm().submit({
				waitMsg: '正在提交，请稍后...',
				url: '/etl/sms/updateContactPepole',
				method: 'POST',
				params: {contactId: contactId},
				success: function(form,action){
					Ext.Msg.alert("系统提示：","修改成功！");
					contactPepoleGrid.contactPepoleUpdateWindow.hide();
					contactPepoleGrid.vbbar.doLoad(contactPepoleGrid.vbbar.cursor);
				},
				failure: function(){
					Ext.Msg.alert("系统提示：","修改失败！");
				}
			});
		}
	},
	//关闭
    onCloseClick: function(){
        this.ownerCt.hide();
    },
    resetFormClick: function() {        
        this.getForm().reset();
    },
  //重置
    onResumeClick: function() {        
    	contactPepoleGrid.onModifyClick();
    }
	
});
/*****************ContactPepoleAddWindow组件**********************/
ContactPepoleAddWindow = Ext.extend(Ext.Window, {
    constructor: function() {
    	this.contactPepoleForm = new ContactPepoleForm();
    	this.contactPepoleForm.buttons[1].hide();
    	this.contactPepoleForm.buttons[2].hide();
    	
    	this.contactPepoleForm.get(3).hide();
    	
    	ContactPepoleAddWindow.superclass.constructor.call(this, {
    		title:'添加短信联系人',
    		width: 700,
			anchor: '100%',
			autoHeight: true,
			resizable: false,
			plain: true,
			modal: true,
			closeAction: 'hide',
            items: [this.contactPepoleForm]
        });
    }
});
/********************ContactPepoleUpdateWindow组件*************************/
ContactPepoleUpdateWindow = Ext.extend(Ext.Window, {
	constructionForm : null,
    constructor: function() {
    	this.contactPepoleForm = new ContactPepoleForm();
    	this.contactPepoleForm.buttons[0].hide();   //隐藏添加按钮
    	this.contactPepoleForm.buttons[3].hide(); 
    	
    	this.contactPepoleForm.get(3).hide();
    	
    	ContactPepoleUpdateWindow.superclass.constructor.call(this, {
			title: '修改短信联系人',
			width: 500,
			anchor: '100%',
			autoHeight: true,
			resizable: false,
			plain: true,
			modal: true,
			closeAction: 'hide',
            items: [this.contactPepoleForm]
        });
    }
});
/****************ContactPepoleGrid***********************/
ContactPepoleGrid = Ext.extend(UxGrid,{
	constructor: function(height){
		this.store = new Ext.data.Store({
			proxy: new Ext.data.HttpProxy({url:ContactPepole_URL,method:'POST'}),
			reader: new Ext.data.JsonReader({totalProperty:'total',root:'rows'},[
			         {name:'contactId'},{name:'name'},{name:'tel'},
			         {name:'address'},{name:'remark'}
					 ])
		});
		this.vtbar = new Ext.Toolbar({
			items: [
			       '-',{xtype:'button',text:'添加',iconCls:'add',handler:this.onAddClick,scope:this}, 
			       '-',{xtype:'button',text:'修改',iconCls:'edit',handler:this.onModifyClick,scope:this}, 
			       '-',{xtype:'button',text:'删除',iconCls:'delete',handler:this.onDeleteClick,scope:this},
			       '->',{xtype:'label',text:'联系人姓名：'},{xtype:'textfield',id:'nameText'},
			       '-',{xtype:'button',text:'查询',iconCls:'query',handler:function(){
			    	   			var name = Ext.getCmp('nameText').getValue();
			    	   			contactPepoleGrid.store.baseParams= {name:name};
			    	   			contactPepoleGrid.store.load({params:{start:0,limit:PAGESIZE}});
			       			}
			       
			       		}
			]
		});
		this.vbbar = this.createPagingToolbar(PAGESIZE);
		this.contactPepoleAddWindow = new ContactPepoleAddWindow();
		this.contactPepoleUpdateWindow = new ContactPepoleUpdateWindow();
		
		this.vsm = new Ext.grid.CheckboxSelectionModel();
		this.vcm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),
		             this.vsm,
		            {header:'联系人ID',dataIndex:'contactId',sortable:true,hidden:true},                       
					{header:'联系人姓名',dataIndex:'name',width:120,sortable:true},                        
					{header:'联系人电话',dataIndex:'tel',width:120,sortable:true},                        
					{header:'联系人住址',dataIndex:'address',width:100,sortable:true},                        
					{header:'备注',dataIndex:'remark',sortable:true,width:200,
						renderer: function(value, metadata, record, rowIndex, columnIndex, store) {  
				               metadata.attr = 'ext:qtip=' + value +'';  
				               return value;  
				             } 
					}                   
		           ]);
		ContactPepoleGrid.superclass.constructor.call(this,{
			region: 'center',
			title: '短信联系人',
			frame: true,
			height: height,
			//autoWidth : true,
//			autoExpandColumn: 'aa',
            viewConfig: {
                forceFit: false
            },
			loadMask: {
				msg: '正在载入数据，请稍后...'
			},
			sm: this.vsm,
			cm: this.vcm,
			tbar: this.vtbar,
			bbar: this.vbbar,
			ds: this.store,
            listeners: {
                "dblclick": { fn: this.onModifyClick, scope: this}, 		//响应双击事件
                "rowcontextmenu": {fn: this.onRightMenuClick, scope: this}  //响应右击事件
            }
		});
	},
    onAddClick: function(){
    	var win = this.contactPepoleAddWindow;
    		win.show();
    		win.contactPepoleForm.getForm().reset();
    },
    onModifyClick: function() {
    	var records = this.getSelectionModel().getSelections();
   		if(records.length > 0) {
   			if(records.length == 1){
   				vrecord = records[0];
   		    	var win = this.contactPepoleUpdateWindow;
   		    	win.contactPepoleForm.getForm().loadRecord(vrecord);
   		    	win.show();
   			}else{
   				Ext.Msg.alert('系统提示','不能修改多条记录！');
   			}
   		}else{
   			Ext.Msg.alert('系统提示','请选择一条记录！');
   		}    	
    },
    onDeleteClick: function(){
    	var records = this.getSelectionModel().getSelections();
    	var valueStr = [];
    	for(var i=0;i<records.length;i++){
    		valueStr.push(records[i].get('contactId'));
    	}
    	if(records.length>0){
    		Ext.Msg.confirm('系统提示：',"确定删除这"+records.length+"条信息吗？",function(btn){
    			if(btn == 'yes'){
    				Ext.Ajax.request({
    					url: '/etl/sms/deleteContactPepole',
    					method: 'POST',
    					params: {contactId: valueStr},
    					success: function(){
    						Ext.Msg.alert('系统提示','删除成功！');
    						contactPepoleGrid.store.load({params:{start:0,limit:PAGESIZE}});
    					},
    					failure: function(){
    						Ext.Msg.alert('系统提示','删除失败！');
    					}
    				});
    			}
    		});
    	}else{
    		Ext.Msg.alert('系统提示','请选择一条记录！');
    	}
    }
	
	
});
/*********************onReady 组件渲染及处理*************************************************/
Ext.onReady(function(){
    Ext.QuickTips.init();                               //开启快速提示
    Ext.form.Field.prototype.msgTarget = 'side';        //提示方式"side"
    
    contactPepoleGrid = new ContactPepoleGrid(Ext.getBody().getViewSize().height);
    contactPepoleGrid.store.load({params:{start:0,limit:PAGESIZE}});
	new Ext.Viewport({
		layout: 'border',
		items: [
		        contactPepoleGrid   
		]
	});
});