Ext Js Grid 编辑 新增 删除 保存的一个小示例
文章转自http://tiantiankaixin.iteye.com/blog/743228
?
Ext Js Grid 编辑 新增 删除 保存的一个小示例 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Paging</title> <link rel="stylesheet" type="text/css" href="css/ext-all.css" /> <script type="text/javascript" src="ext-base.js"></script> <script type="text/javascript" src="ext-all.js"></script> <script type="text/javascript" src="edit-grid-paging.js"></script> <link rel="stylesheet" type="text/css" href="grid-examples.css" /> <link rel="stylesheet" type="text/css" href="examples.css" /> </head> <body> <script type="text/javascript" src="examples.js"></script> <div id="topic-grid"></div> </body> </html> edit-grid-paging.js Ext.onReady(function(){ Ext.QuickTips.init(); var authereditor = Editgridselect.init();//自定义下拉列表 数据取自数据库返回的Json var Plant = Ext.data.Record.create([ {name: 'title', type: 'string'}, {name: 'forumtitle', type: 'string'}, {name: 'forumid'}, {name: 'author', type: 'string'}, {name: 'replycount', type: 'int'}, {name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'}, {name: 'lastposter'}, {name: 'excerpt'}, {name: 'threadid'} ]); var store = new Ext.data.Store({ proxy: new Ext.data.ScriptTagProxy({ //支持跨域获取数据 url: 'http://extjs.com/forum/topics-browse-remote.php' }), reader: new Ext.data.JsonReader({ root: 'topics', totalProperty:'totalCount', id: "threadid" }, Plant) }) store.setDefaultSort('lastpost', 'desc'); // pluggable renders /* function renderTopic(value, p, record){ return String.format( '<b>{0}</b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>', value, record.data.forumtitle, record.id, record.data.forumid); } */ function renderTopic(value, p, record){ return String.format( '<b>{0}</b>', value, record.data.forumtitle, record.id, record.data.forumid); } function renderLast(value, p, r){ return String.format('{0} by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']); } function examineflag(value){ return value ? '是' : '否'; }; // 顶部工具栏按钮 var contrltar = [{ text: '添加', handler : function(){ var p = new Plant({ title: '', forumtitle:'', forumid:'', author: '', replycount: 0, lastpost: (new Date()).clearTime(), lastposter:'', excerpt:'新内容' }); //var n = ds.totalLength; grid.stopEditing(); store.insert(0,p); //ds.insert(n, p); grid.startEditing(0,1); //grid.startEditing(n, 0); } },{ text: '删除', handler : function(){ var gcm = grid.getSelectionModel(); var rows = gcm.getSelections(); if(rows.length>0){ for (var i = 0; i < rows.length; i++) { var row = rows; var data = row.data; alert(row.data.threadid); store.remove(row); } }else{ Ext.Msg.alert('提示','请选择要删除的记录'); } } }]; //底部工具栏按钮 var pagingBar = new Ext.PagingToolbar({ pageSize: 10, store: store, beforePageText:'当前页', afterPageText:'共{0}页', firstText:'首页', lastText:'尾页', nextText:'下一页', prevText:'上一页', refreshText:'刷新', displayInfo: true, displayMsg: '显示{0} - {1}条 共{2}条记录', emptyMsg: "无记录显示", items:[ '-', { pressed: true, enableToggle:true, text: '查看详情', //cls: 'x-btn-text-icon details', toggleHandler: function(btn, pressed){ var view = grid.getView(); view.showPreview = pressed; view.refresh(); } }] }); var checkbox = new Ext.grid.CheckboxSelectionModel(); var cm = new Ext.grid.ColumnModel([ checkbox, { id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 }) header: "主题", dataIndex: 'title', width: 320, renderer: renderTopic, sortable: true, editor: new Ext.form.TextArea({ allowBlank: false, blankText:'请输入主题' }) },{ header: "作者", dataIndex: 'author', width: 100, //hidden: true, sortable: true, editor: authereditor },{ header: "回复数", dataIndex: 'replycount', width: 70, align: 'right', sortable: true, editor: new Ext.form.TextField({ allowBlank: false }) },{ id: 'last', header: "最后发表", dataIndex: 'lastpost', width: 150, renderer: renderLast, sortable: true, editor: new Ext.form.DateField({ format: 'm/d/y', minValue: '01/01/06', disabledDays: [0, 6], disabledDaysText: '周末不能选' }) },{ header: "审核否", dataIndex: 'indoor', width: 55, renderer: examineflag, editor: new Ext.grid.GridEditor(new Ext.form.Checkbox()) } ]); var grid = new Ext.grid.EditorGridPanel({ store: store, renderTo: 'topic-grid', cm: cm, width:980, id:'egridpanel', height:550, title:'编辑表格', autoExpandColumn:'common', clicksToEdit:1,//设置点击几次才可编辑 frame:true, sm:checkbox, loadMask: true,//装载动画 stripeRows:false,//条纹 //autoHeight: true,//一定要写，否则显示的数据会少一行 //selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),//设置单行选中模式, 否则将无法删除数据 // customize view config viewConfig: { forceFit:true, enableRowBody:true, //showPreview:true, showPreview:true, getRowClass : function(record, rowIndex, p, store){ //if(this.showPreview){ if(!this.showPreview){ p.body = '<p>'+record.data.excerpt+'</p>'; return 'x-grid3-row-expanded'; } return 'x-grid3-row-collapsed'; } }, tbar: contrltar, bbar: pagingBar }); grid.on("afteredit", afteredit, grid);//监听编辑后事件 store.load({params:{start:0, limit:10}}); function afteredit(e){ // e.column;//修改的列,数字类型 // e.row;//修改过的行从0开始 //e.originalValue;//原始值 //e.value;//新值 var data = e.record.data; // 显示等待对话框 Ext.Msg.wait("请等候", "修改中", "操作进行中..."); var id = data.threadid; //"threadid"为返回Json数据的字段名 Ext.Msg.alert('您成功修改了文章信息', "被修改的内容是:" + e.value + "\n 修改的字段是:" + e.field+"; id是:"+id);// 取得用户名 } }); Ext.ux.SliderTip = Ext.extend(Ext.Tip, { minWidth: 10, offsets : [0, -10], init : function(slider){ slider.on('dragstart', this.onSlide, this); slider.on('drag', this.onSlide, this); slider.on('dragend', this.hide, this); slider.on('destroy', this.destroy, this); }, onSlide : function(slider){ this.show(); this.body.update(this.getText(slider)); this.doAutoWidth(); this.el.alignTo(slider.thumb, 'b-t?', this.offsets); }, getText : function(slider){ return slider.getValue(); } }); Ext.grid.CheckColumn = function(config){ Ext.apply(this, config); if(!this.id){ this.id = Ext.id(); } this.renderer = this.renderer.createDelegate(this); }; Ext.grid.CheckColumn.prototype ={ init : function(grid){ this.grid = grid; this.grid.on('render', function(){ var view = this.grid.getView(); view.mainBody.on('mousedown', this.onMouseDown, this); }, this); }, onMouseDown : function(e, t){ if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){ e.stopEvent(); var index = this.grid.getView().findRowIndex(t); var record = this.grid.store.getAt(index); record.set(this.dataIndex, !record.data[this.dataIndex]); } }, renderer : function(v, p, record){ p.css += ' x-grid3-check-col-td'; return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>'; } }; Ext.namespace('Editgridselect'); Editgridselect.init = function (){ var fm = Ext.form, Ed = Ext.grid.GridEditor; var RecordDef = Ext.data.Record.create([ {name: 'formname'},{name: 'formid'} ]); var groupStore=new Ext.data.Store({ proxy: new Ext.data.HttpProxy({url: 'autherselect.php'}), reader: new Ext.data.JsonReader({id:"sn",root:'datalist'},RecordDef ), remoteSort: true }); groupStore.load(); var combox = new Ext.form.ComboBox({ typeAhead: true,mode : 'local', selectOnFocus : true, forceSelection : true ,triggerAction: 'all', store:groupStore, hiddenName:'formname', valueField : 'formid',displayField : 'formname', lazyRender:true,listeners: { select: function() {this.setValue(combox.getRawValue()); } } }); var editor = new Ed(combox); return editor; } 服务器端： autherselect.php <?php header("Content-Type: text/plain; charset=utf-8"); $select = array('datalist'=>array( array('formname'=>'张三','formid'=>"SCZL"), array('formname'=>'李四','formid'=>"ZLBGV"), array('formname'=>'王五','formid'=>"fagg"), array('formname'=>'Dvaid','formid'=>"fhdf"), array('formname'=>'Rocky','formid'=>"rocky") ) ); echo json_encode($select); //echo "([{'formname':'Java','formid':'java'},{'formname':'EXTJS','formid': 'extjs'}])"; ?> ?