日期:2014-05-16 浏览次数:20350 次
直接上代码
这是源码下载地址:
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){