日期:2014-05-16  浏览次数:20365 次

Extjs4---grid的搜索、修改、删除功能---结合struts2、hibernate

直接上代码

这是源码下载地址:

http://download.csdn.net/detail/lc448986375/4572357

代码太多,其他的没有粘过来,想看的可以去下载源码


页面代码与上面几篇文章相同,只是导入的js文件不同

editgrid.js

//下面两行代码必须要,不然会报404错误
Ext.Loader.setConfig({enabled:true});
//我的searchGrid和ext4在同一目录下,所以引用时要到根目录去"../"
Ext.Loader.setPath('Ext.ux','../ext4_example_editgrid/ext4/examples/ux');

//预加载
Ext.require(
		[
		 	'Ext.grid.*',
		 	'Ext.toolbar.Paging',
		 	'Ext.util.*',
		 	'Ext.data.*',
		 	'Ext.state.*',
		 	'Ext.form.*',
		 	//注意引用
		 	'Ext.ux.form.SearchField',
		 	//Checkbox需要引用
		 	'Ext.selection.CheckboxModel' ,
		 	'Ext.selection.CellModel', 
		 	'Ext.ux.CheckColumn'
		 ]
);

Ext.onReady(
		function(){
			
			var isEdit = false; 
			//创建Model
			Ext.define(
					'User',
					{
						extend:'Ext.data.Model',
						fields:[
						        {name:'id',mapping:'id'},
						        {name:'name',mapping:'name'},
						        {name:'sex',mapping:'sex'},
						        {name:'age',mapping:'age'},
						        {name:'birthdate',mapping:'birthdate',type:'date',dataFormat:'Y-m-d'}
						]
					}
			)
			
			//创建本地数据源
			var sexStore = Ext.create(
					'Ext.data.Store',
					{
						fields:['id','name'],
						data:[
						      {"id":"1","name":"男"},
						      {"id":"2","name":"女"}
						]
					}
			);
			
			//创建数据源
			var store = Ext.create(
					'Ext.data.Store',
					{
						model:'User',
						
						//设置分页大小
						pageSize:5,
						proxy: {
					        type: 'ajax',
					        url : 'user_get',
					        reader: {
								//数据格式为json
					            type: 'json',
					            root: 'users',
					            //获取数据总数
					            totalProperty: 'totalCount'
					        }
					    },
						autoLoad:true
					}
			);
			
			//创建多选框
			 var checkBox = Ext.create('Ext.selection.CheckboxModel'); 
			var cellEditing = Ext.create('Ext.grid.plugin.CellEditing',
					{
						//表示“双击”才可以修改内容(取值只能为“1”或“2”)
						clicksToEdit:2
					}
			
			);
			
			//创建grid
			var grid = Ext.create('Ext.grid.Panel',{
				
					tbar:[
						{
							xtype:'button',
							text:'添加',
							handler:'addUser'
						},{
							xtype:'button',
							text:'修改',
							handler:updateUser
						},{
							xtype:'button',
							text:'删除',
							handler:deleteUser
						}
					],
					
					store:store,
					//添加到grid
					selModel:checkBox,
					//表示可以选择行
					disableSelection: false,
					columnLines: true, 
					loadMask: true, 
					//添加修改功能
					plugins: [cellEditing] ,
					columns:[
					         {
					        	id:'id',
					        	//表头
					        	header:'编号',
					        	width:40,
					        	//内容
					        	dataIndex:'id',
					        	sortable:true,
					         	editor:{
					         		xtype:'textfield',
					         		allowBlank:false
					         	}
					         
					         },{
					        	 id:'name',
					        	 header:'姓名',
					        	 
					        	 width:100,
					        	 dataIndex:'name',
					        	 sortable:false,
					        	 editor:{
					        	 		xtype:'combobox',
					        	 		allowBlank:false
					         	 }
					        
					         	},{
					         		id:'sex',
					         		header:'性别',
					         		width:100,
					         		dataIndex:'sex',
					         		editor:{
					         			xtype:'combobox',
					         			store:sexStore,
					         			displayField:'name',
					         			valueField:'name',
					         			listeners:{     
	         			                    select : function(combo, record,index){