Ext4 grid调用reconfigure RowEditing对不齐错位解决办法

  Ext4 grid调用reconfigure后,如果grid之配置过RowEditing,会导致生成的编辑器和列不对其,如下图所示

Ext4 grid调用reconfigure后RowEditing对不齐错位解决办法
grid未调用reconfigure前,RowEditing对齐

Ext4 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 grid调用reconfigure后RowEditing对不齐错位解决办法

本示例居于ext4.1.1a,其他ext3-版本自己对照下api是否存在onReconfigure中grid,RowEditing使用方法,自己修改为对应的方法名称

 


原创文章,转载请注明出处:Ext4 grid调用reconfigure RowEditing对不齐错位解决办法

评论(0)Web开发网
阅读(332)喜欢(0)不喜欢(0)extjs开发技巧