Extjs 4 解决 grid + checkboxmodel+rowediting 对齐的bug

最新推荐文章于 2019-07-17 10:44:58 发布

tonyboat2090

最新推荐文章于 2019-07-17 10:44:58 发布

阅读量230

点赞数

分类专栏： extjs 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/tonyboat2090/article/details/84151771

版权

extjs 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在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>

tonyboat2090

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Extjs 4 解决 grid + checkboxmodel+rowediting 对齐的bug

在Extjs 4.0中，实现行选择、行编辑很简单，但是checkboxmodel 和 rowediting插件组合存在一个对齐的bug。在线demo:http://extjshelp.sinaapp.com/rowedit/ grid + checkboxmodel 的显示效果如下：双击编辑一行：注意到，编辑器没有和grid表头对齐。原因就是我们加了一列checkbox。...
复制链接

扫一扫

专栏目录