Extjs 四 解决 grid + checkboxmodel+rowediting 对齐的bug
日期：2014-05-16 浏览次数：20772 次
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>?
?
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
