在editorgrid中关于checkbox

我在用extjs的那个editorgrid时很纳闷的一件事，那个setmodel如果单元格选，那个复选框 不能勾上，且不和我要求，最后是参考别人的之后才解决的

 

http://tech.ddvip.com/2009-09/1253973091134515.html转载

用复选框表示真假值

　

　　在学习中Ext.grid.EditorGridPanel 的时候碰到一个知识点,如何用复选框来表示真假值,当然我们可以直接这样

　　Js代码

{　
　　header　:　"管理员?",　
　　dataIndex　:　'manager',　
　　width　:　55,　
　　editor　:　new　Ext.form.CheckBox()　
}　

　　但是这样给我们的感觉不是很好,每次都要我们点击才会出现CheckBox,不能让他默认就显示在哪里,而且表示当前值?官方给了我们一个示例,下面是示例的源代码

Ext.onReady(function(){　
　　Ext.QuickTips.init();　
　
　　function　formatDate(value){　
　　　　return　value　?　value.dateFormat('M　d,　Y')　:　'';　
　　};　
　　//　shorthand　alias　
　　var　fm　=　Ext.form;　
　
　　//　custom　column　plugin　example　
　　var　checkColumn　=　new　Ext.grid.CheckColumn({　
　　　　header:　"Indoor?",　
　　　　dataIndex:　'indoor',　
　　　　width:　55　
　　});　
　
　　//　the　column　model　has　information　about　grid　columns　
　　//　dataIndex　maps　the　column　to　the　specific　data　field　in　
　　//　the　data　store　(created　below)　
　　var　cm　=　new　Ext.grid.ColumnModel([{　
　　　　　　id:'common',　
　　　　　　header:　"Common　Name",　
　　　　　　dataIndex:　'common',　
　　　　　　width:　220,　
　　　　　　editor:　new　fm.TextField({　
　　　　　　　　allowBlank:　false　
　　　　　　})　
　　　　},{　
　　　　　　header:　"Light",　
　　　　　　dataIndex:　'light',　
　　　　　　width:　130,　
　　　　　　editor:　new　Ext.form.ComboBox({　
　　　　　　　　typeAhead:　true,　
　　　　　　　　triggerAction:　'all',　
　　　　　　　　transform:'light',　
　　　　　　　　lazyRender:true,　
　　　　　　　　listClass:　'x-combo-list-small'　
　　　　　　})　
　　　　},{　
　　　　　　header:　"Price",　
　　　　　　dataIndex:　'price',　
　　　　　　width:　70,　
　　　　　　align:　'right',　
　　　　　　renderer:　'usMoney',　
　　　　　　editor:　new　fm.NumberField({　
　　　　　　　　allowBlank:　false,　
　　　　　　　　allowNegative:　false,　
　　　　　　　　maxValue:　100000　
　　　　　　})　
　　　　},{　
　　　　　　header:　"Available",　
　　　　　　dataIndex:　'availDate',　
　　　　　　width:　95,　
　　　　　　renderer:　formatDate,　
　　　　　　editor:　new　fm.DateField({　
　　　　　　　　format:　'm/d/y',　
　　　　　　　　minValue:　'01/01/06',　
　　　　　　　　disabledDays:　[0,　6],　
　　　　　　　　disabledDaysText:　'Plants　are　not　available　on　the　weekends'　
　　　　　　})　
　　　　},　
　　　　checkColumn　
　　]);　
　
　　//　by　default　columns　are　sortable　
　　cm.defaultSortable　=　true;　
　
　　//　this　could　be　inline,　but　we　want　to　define　the　Plant　record　
　　//　type　so　we　can　add　records　dynamically　
　　var　Plant　=　Ext.data.Record.create([　
　　　　　　//　the　"name"　below　matches　the　tag　name　to　read,　except　"availDate"　
　　　　　　//　which　is　mapped　to　the　tag　"availability"　
　　　　　　{name:　'common',　type:　'string'},　
　　　　　　{name:　'botanical',　type:　'string'},　
　　　　　　{name:　'light'},　
　　　　　　{name:　'price',　type:　'float'},　　　　　　　//　automatic　date　conversions　
　　　　　　{name:　'availDate',　mapping:　'availability',　type:　'date',　dateFormat:　'm/d/Y'},　
　　　　　　{name:　'indoor',　type:　'bool'}　
　　　]);　
　
　　//　create　the　Data　Store　
　　var　store　=　new　Ext.data.Store({　
　　　　//　load　using　HTTP　
　　　　url:　'plants.xml',　
　
　　　　//　the　return　will　be　XML,　so　lets　set　up　a　reader　
　　　　reader:　new　Ext.data.XmlReader({　
　　　　　　　　//　records　will　have　a　"plant"　tag　
　　　　　　　　record:　'plant'　
　　　　　　},　Plant),　
　
　　　　sortInfo:{field:'common',　direction:'ASC'}　
　　});　
　
　　//　create　the　editor　grid　
　　var　grid　=　new　Ext.grid.EditorGridPanel({　
　　　　store:　store,　
　　　　cm:　cm,　
　　　　renderTo:　'editor-grid',　
　　　　width:600,　
　　　　height:300,　
　　　　autoExpandColumn:'common',　
　　　　title:'Edit　Plants?',　
　　　　frame:true,　
　　　　plugins:checkColumn,　
　　　　clicksToEdit:1,　
　
　　　　tbar:　[{　
　　　　　　text:　'Add　Plant',　
　　　　　　handler　:　function(){　
　　　　　　　　var　p　=　new　Plant({　
　　　　　　　　　　common:　'New　Plant　1',　
　　　　　　　　　　light:　'Mostly　Shade',　
　　　　　　　　　　price:　0,　
　　　　　　　　　　availDate:　(new　Date()).clearTime(),　
　　　　　　　　　　indoor:　false　
　　　　　　　　});　
　　　　　　　　grid.stopEditing();　
　　　　　　　　store.insert(0,　p);　
　　　　　　　　grid.startEditing(0,　0);　
　　　　　　}　
　　　　}]　
　　});　
　
　　//　trigger　the　data　store　load　
　　store.load();　
});　
　
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+'">&#160;</div>';　
　　}　
};　

　但是问题又来了.我们点击修改值而后台却不被更新,所以我们要对onMouseDown修改一下.

　　Js代码　　　

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　cindex　=　this.grid.getView().findCellIndex(t);　
　　var　record　=　this.grid.store.getAt(index);　
　　var　field　=　this.grid.colModel.getDataIndex(cindex);　
　　var　e　=　{　
　　grid　:　this.grid,　
　　record　:　record,　
　　field　:　field,　
　　originalValue　:　record.data[this.dataIndex],　
　　value　:　!record.data[this.dataIndex],　
　　row　:　index,　
　　column　:　cindex,　
　　cancel　:　false　
　　};　
　　if　(this.grid.fireEvent("validateedit",　e)　!==　false　&&　!e.cancel)　{　
　　delete　e.cancel;　
　　record.set(this.dataIndex,　!record.data[this.dataIndex]);　
　　this.grid.fireEvent("afteredit",　e);　
　　}　
　}　
　}　

　　这样当我们的afteredit被触发后就会执行我们事先设定好的程序,调用业务逻辑修改后台数据.

　　下面是EditorGridPanel的处理代码

　　Js代码　　　

//其他代码省略,这里是grid的listeners属性的配置代码　
　
listeners　:　{　
　'afteredit'　:　function(e)　{　
　　Ext.Ajax.request({　
　　url　:　'updateUser.action',　
　　params　:　{　
　　　filedName　:　e.field,　
　　　fieldValue　:　e.value,　
　　　userId　:　e.record.data.userId　
　　},　
　　success　:　function()　{　
　　　//alert('ok');　
　　},　
　　failure　:　function()　{　
　　　Ext.Msg.show({　
　　　title　:　'错误提示',　
　　　msg　:　'修改数据发生错误,操作将被回滚!',　
　　　fn　:　function()　{　
　　　　e.record.set(e.field,　e.originalValue);　
　　　},　
　　　buttons　:　Ext.Msg.OK,　
　　　icon　:　Ext.Msg.ERROR　
　　　});　
　　}　
　　});　
　}　
　}