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对不齐错位解决办法