Ext4 grid调用reconfigure RowEditing对不齐错位解决办法
Ext4 grid调用reconfigure后，如果grid之配置过RowEditing，会导致生成的编辑器和列不对其，如下图所示
grid未调用reconfigure前，RowEditing对齐
grid调用reconfigure后，RowEditing不对齐
解决办法就是重新构造RowEditing的UI。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ext4 grid调用reconfigure后RowEditing对不齐错位解决办法</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../shared/example.css" />
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function () {
Ext.define('User1', { extend: 'Ext.data.Model', fields: ['name', 'addr'] });
Ext.define('User2', { extend: 'Ext.data.Model', fields: ['name', 'addr', 'age', 'sex'] });
var store = Ext.create('Ext.data.Store', {
model: 'User1',
data: { total: 2, users: [{ name: 'name1', addr: 'addr1' }, { name: 'name2', addr: 'addr2' }] },
proxy: { type: 'memory', reader: { type: 'json', root: 'users' } }
});
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 2,
//注意给插件起id，方便grid使用getPlugin方法获取插件，否则自己修改onReconfigure中grid.getPlugin('rowEditor')代码，通过下标获取
pluginId: 'rowEditor'
});
var grid = Ext.create('Ext.grid.Panel', {
store: store,
width: 500, height: 300,
columns: [{ dataIndex: 'name', header: 'name', editor: { allowBlank: false } }, { dataIndex: 'addr', editor: { allowBlank: false } }],
renderTo: document.body,
plugins: [rowEditing]
});
Ext.get('btnRE').on('click', function () {
reconfigure(grid);
});
});
//以下代码来源：http://stackoverflow.com/questions/11963870/using-ext-grid-panel-reconfigure-breaks-the-grids-rowediting-plugin
/**
* @event reconfigure
* Fires after a reconfigure.
* @param {Ext.grid.Panel} this
* @param {Ext.data.Store} store The store that was passed to the {@link #method-reconfigure} method
* @param {Object[]} columns The column configs that were passed to the {@link #method-reconfigure} method
*/
function onReconfigure(grid, store, columnConfigs) {
var columns = grid.headerCt.getGridColumns(), rowEditingPlugin = grid.getPlugin('rowEditor');
// Re-attached the 'getField' and 'setField' extension methods to each column
rowEditingPlugin.initFieldAccessors(columns);
// Re-create the actual editor (the UI component within the 'RowEditing' plugin itself)
// 1. Destroy and make sure we aren't holding a reference to it.
Ext.destroy(rowEditingPlugin.editor);
rowEditingPlugin.editor = null;
// 2. This method has some lazy load logic built into it and will initialize a new row editor.
rowEditingPlugin.getEditor();
}
function reconfigure(grid) {//重新构造extjs grid columns
var store = Ext.create('Ext.data.Store', {
model: 'User2',
data: {
total: 100, users: [
{ name: 'name1', addr: 'addr1', age: 'age1', sex: 'sex1' },
{ name: 'name2', addr: 'addr2', age: 'age2', sex: 'sex2' },
{ name: 'name3', addr: 'addr3', age: 'age3', sex: 'sex3' },
{ name: 'name4', addr: 'addr4', age: 'age4', sex: 'sex4' }]
},
proxy: { type: 'memory', reader: { type: 'json', root: 'users' } }
});
var columnConfigs = [{ dataIndex: 'name', editor: { allowBlank: false } }, { dataIndex: 'addr', editor: { allowBlank: false } }, { dataIndex: 'age', editor: { allowBlank: false } }, { dataIndex: 'sex', editor: { allowBlank: false } }]
grid.reconfigure(store, columnConfigs);
//更新extjs grid rowEditing控件，可以注释掉这句查看效果
onReconfigure(grid, store, columnConfigs);
}
</script>
</head>
<body>
<input type="button" value="reconfigure" id="btnRE" />
</body>
</html>
最终效果如下
本示例居于ext4.1.1a，其他ext3-版本自己对照下api是否存在onReconfigure中grid，RowEditing使用方法，自己修改为对应的方法名称
加支付宝好友偷能量挖...
原创文章，转载请注明出处：Ext4 grid调用reconfigure RowEditing对不齐错位解决办法