Ext4.0 自带的Ext.ux.RowEditing还不够完善,随手写个ux来用下,

?

v1.4 2011-09-12 变更内容:

1.重构,修复不少bug以及合并/新增一些配置项(具体看附件中的文档)

2.支持jsduck生成文档 (https://github.com/senchalabs/jsduck)

?

?

v1.0 2011.04.27 变更内容:
1.增加canceledit事件
2.增加startAdd方法,方便crud表格的添加操作
3.添加点击取消按钮后,自动重置或删除记录的功能

v1.1 2011.05.03 变更内容:
1.startAdd方法增加position参数,修复autoSync设值的bug
2.配置参数removePhantomsOnCancel改名为autoRecoverOnCancel
3.startEdit前先调用cancelEdit函数,以便正确的恢复现场

v1.2 2011.05.04 变更内容:
1.包名改为Ext.ux.grid.plugin
2.添加配置参数hideTooltipOnAdd
3.判断是否删除新增记录的逻辑优化
4.代码风格等方面的改进

?

v1.3 2011.05.22 变更内容:?

1. 设置clicksToEdit为0,可取消双击/单击事件触发编辑

2. 提供field默认配置,只需给column添加一个fieldType?

?

           {
               text: 'Enable',
               dataIndex: 'enable',
               width: 80,
               renderer: function(v){return v?'Enable':'Disable'},
               fieldType: 'checkboxfield',
               field: {
                   boxLabel: 'Enable'
               }
           }

代码如下:

?

 /**
 * @class Ext.ux.grid.plugin.RowEditing
 * @extends Ext.grid.plugin.RowEditing
 * @xtype ux.rowediting
 * 
 * 对Ext原有的RowEditing插件增加新功能.<br/>
 * Improve Ext.ux.grid.plugin.RowEditing,add some usefull features.<br/>
 * 
 * @author      tz <atian25@qq.com> <br/>
 * @date        2011-08-20  <br/>
 * @version     1.4   <br/>
 * @blog        http://atian25.iteye.com    <br/>
 * @forum       http://www.sencha.com/forum/showthread.php?131482-Ext.ux.RowEditing-add-some-usefull-features<br/>
 *
 */
Ext.define('Ext.ux.grid.plugin.RowEditing', {
    extend: 'Ext.grid.plugin.RowEditing',
    alias: 'plugin.ux.rowediting', 
    
    /**
     * 是否添加记录在当前位置<br/>
     * whether add record at current rowIndex.<br/>
     * see {@link #cfg-addPosition}
     * @cfg {Boolean}
     */
    addInPlace: false,
    
    /**
     * 添加记录的具体位置 <br/>
     * * 当addInPlace为true时,该参数<=0代表当前位置之前,否则代表当前位置之后<br/>
     * * 当addInPlace为false时,代表具体的rowIndex,-1则为最后<br/>
     * Special rowIndex of added record.<br/>
     * * when {@link #cfg-addInPlace} is true, this cfg means before(<=0) or after(>0) current rowIndex.<br/>
     * * when {@link #cfg-addInPlace} is false, this cfg means the exact rowIndex.-1 means at the end.
     * @cfg {Number}
     */
    addPosition: 0,
    
    /**
     * 是否点击触发事件,0代表不触发,1代表单击,2代表双击,默认为双击.<br/>
     * The number of clicks on a grid required to display the editor (disable:0,click:1,dblclick:2)
     * @cfg {Number}
     */
    clicksToEdit:2,
    
    /**
     * 是否在取消编辑的时候自动删除添加的记录
     * if true, auto remove phantom record on cancel,default is true.
     * @cfg {Boolean}
     */
    autoRecoverOnCancel: true,
    
    /**
     * adding flag
     * @private
     * @type Boolean
     */
    adding: false,
    
    autoCancel:true,
    
    /**
     * when add record, hide error tooltip for the first time
     * @private
     * @type Boolean
     */
    hideTooltipOnAdd: true,
    
    /**
     * register canceledit event && relay canceledit event to grid
     * @param {Ext.grid.Panel} grid
     * @override
     * @private
     */
    init:function(grid){
        var me = this;
        /**
         * 取消编辑事件.<br/>
         * Fires canceledit event.And will be relayEvents to Grid.<br/>
         * @see {@link Ext.ux.grid.RowActions#event-beforeaction} <br/>
         * @event canceledit
         * @param {Object} context
         */
        me.addEvents('canceledit');
        me.callParent(arguments);
        grid.addEvents('canceledit');
        grid.relayEv