Extjs 4 解决 grid + checkboxmodel+rowediting 对齐的bug
在Extjs 4.0中，实现 行选择、行编辑很简单，但是checkboxmodel 和 rowediting插件组合存在一个对齐的bug。
在线demo:http://extjshelp.sinaapp.com/rowedit/
?
grid + checkboxmodel 的显示效果如下：
?双击编辑一行：
?注意到，编辑器没有和grid表头对齐。原因就是我们加了一列checkbox。这是Extjs 4.0 的bug，rowediting 插件和checkboxmodel组件之间没有配合好。
解决方法，让item项的编辑器往右边"挤一挤":
?
{text:'Item',dataIndex:'item',editor:{ margin:'0 0 0 22 ' }},现在看起来整齐了：
?完整的代码：
?
Ext.onReady(function(){var store = {type:'array',fields:["item","price"],data:[["Steve Bible",0.99],["Steve Bible",0.99],["Steve Bible",0.99],["Steve Bible",0.99]]}var checkmodel = Ext.create('Ext.selection.CheckboxModel')var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {clicksToMoveEditor: 2,autoCancel: false })var grid = Ext.create("Ext.grid.Panel",{store:store,plugins: [rowEditing],selModel:checkmodel,columns:[{text:'Item',dataIndex:'item',editor:{ margin:'0 0 0 22 ' }},{text:'Price',dataIndex:'price',editor:{type:'numberfield'}},],region:'center'})Ext.create('Ext.container.Viewport',{layout:'border',items:[grid]})})?
?
<html><head><link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css"><script type="text/javascript" src="../extjs/ext-all.js"></script><script type="text/javascript" src="app.js"></script></head><body></body></html>?
?