ExtJS 4.0 改善Ext.grid.plugin.RowEditing (重构,v1.4版本,2011-09-11)

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 

 

Js代码  收藏代码
  1. {  
  2.     text: 'Enable',  
  3.     dataIndex: 'enable',  
  4.     width: 80,  
  5.     renderer: function(v){return v?'Enable':'Disable'},  
  6.     fieldType: 'checkboxfield',  
  7.     field: {  
  8.         boxLabel: 'Enable'  
  9.     }  
  10. }  

 


代码如下:

 

 

Js代码  收藏代码
    1.  /** 
    2.  * @class Ext.ux.grid.plugin.RowEditing 
    3.  * @extends Ext.grid.plugin.RowEditing 
    4.  * @xtype ux.rowediting 
    5.  *  
    6.  * 对Ext原有的RowEditing插件增加新功能.<br/> 
    7.  * Improve Ext.ux.grid.plugin.RowEditing,add some usefull features.<br/> 
    8.  *  
    9.  * @author      tz <atian25@qq.com> <br/> 
    10.  * @date        2011-08-20  <br/> 
    11.  * @version     1.4   <br/> 
    12.  * @blog        http://atian25.iteye.com    <br/> 
    13.  * @forum       http://www.sencha.com/forum/showthread.php?131482-Ext.ux.RowEditing-add-some-usefull-features<br/> 
    14.  * 
    15.  */  
    16. Ext.define('Ext.ux.grid.plugin.RowEditing', {  
    17.     extend: 'Ext.grid.plugin.RowEditing',  
    18.     alias: 'plugin.ux.rowediting',   
    19.       
    20.     /** 
    21.      * 是否添加记录在当前位置<br/> 
    22.      * whether add record at current rowIndex.<br/> 
    23.      * see {@link #cfg-addPosition} 
    24.      * @cfg {Boolean} 
    25.      */  
    26.     addInPlace: false,  
    27.       
    28.     /** 
    29.      * 添加记录的具体位置 <br/> 
    30.      * * 当addInPlace为true时,该参数<=0代表当前位置之前,否则代表当前位置之后<br/> 
    31.      * * 当addInPlace为false时,代表具体的rowIndex,-1则为最后<br/> 
    32.      * Special rowIndex of added record.<br/> 
    33.      * * when {@link #cfg-addInPlace} is true, this cfg means before(<=0) or after(>0) current rowIndex.<br/> 
    34.      * * when {@link #cfg-addInPlace} is false, this cfg means the exact rowIndex.-1 means at the end. 
    35.      * @cfg {Number} 
    36.      */  
    37.     addPosition: 0,  
    38.       
    39.     /** 
    40.      * 是否点击触发事件,0代表不触发,1代表单击,2代表双击,默认为双击.<br/> 
    41.      * The number of clicks on a grid required to display the editor (disable:0,click:1,dblclick:2) 
    42.      * @cfg {Number} 
    43.      */  
    44.     clicksToEdit:2,  
    45.       
    46.     /** 
    47.      * 是否在取消编辑的时候自动删除添加的记录 
    48.      * if true, auto remove phantom record on cancel,default is true. 
    49.      * @cfg {Boolean} 
    50.      */  
    51.     autoRecoverOnCancel: true,  
    52.       
    53.     /** 
    54.      * adding flag 
    55.      * @private 
    56.      * @type Boolean 
    57.      */  
    58.     adding: false,  
    59.       
    60.     autoCancel:true,  
    61.       
    62.     /** 
    63.      * when add record, hide error tooltip for the first time 
    64.      * @private 
    65.      * @type Boolean 
    66.      */  
    67.     hideTooltipOnAdd: true,  
    68.       
    69.     /** 
    70.      * register canceledit event && relay canceledit event to grid 
    71.      * @param {Ext.grid.Panel} grid 
    72.      * @override 
    73.      * @private 
    74.      */  
    75.     init:function(grid){  
    76.         var me = this;  
    77.         /** 
    78.          * 取消编辑事件.<br/> 
    79.          * Fires canceledit event.And will be relayEvents to Grid.<br/> 
    80.          * @see {@link Ext.ux.grid.RowActions#event-beforeaction} <br/> 
    81.          * @event canceledit 
    82.          * @param {Object} context 
    83.          */  
    84.         me.addEvents('canceledit');  
    85.         me.callParent(arguments);  
    86.         grid.addEvents('canceledit');  
    87.         grid.relayEvents(me, ['canceledit']);  
    88.     },  
    89.       
    90.     /** 
    91.      * 提供默认的Editor配置 
    92.      *      @example 
    93.      *      {header:'手机',dataIndex:'phone',fieldType:'numberfield',field:{allowBlank:true}} 
    94.      * provide default field config 
    95.      * @param {String} fieldType 可选值:numberfield,checkboxfield,passwordField 
    96.      * @return {Object}  
    97.      * @protected 
    98.      */  
    99.     getFieldCfg: function(fieldType){  
    100.         switch(fieldType){  
    101.             case 'passwordField':  
    102.                 return {  
    103.                     xtype: 'textfield',  
    104.                     inputType: 'password',  
    105.                     allowBlank:false  
    106.                 }  
    107.             case 'numberfield':  
    108.                 return {  
    109.                     xtype: 'numberfield',  
    110.                     hideTrigger: true,  
    111.                     keyNavEnabled: false,  
    112.                     mouseWheelEnabled: false,  
    113.                     allowBlank:false  
    114.                 }  
    115.                   
    116.             case 'checkboxfield':  
    117.                 return {  
    118.                     xtype: 'checkboxfield',  
    119.                     inputValue: 'true',  
    120.                     uncheckedValue: 'false'  
    121.                 }  
    122.             }  
    123.     },  
    124.       
    125.     /** 
    126.      * Help to config field,just giving a fieldType and field as additional cfg. 
    127.      * see {@link #getFieldCfg} 
    128.      * @private 
    129.      * @override 
    130.      */  
    131.     getEditor: function() {  
    132.         var me = this;  
    133.   
    134.         if (!me.editor) {  
    135.             Ext.each(me.grid.headerCt.getGridColumns(),function(item,index,allItems){  
    136.                 if(item.fieldType){  
    137.                     item.field = Ext.applyIf(item.field||{},this.getFieldCfg(item.fieldType))  
    138.                 }  
    139.             },this)  
    140.             // keep a reference for custom editor..  
    141.             me.editor = me.initEditor();  
    142.         }  
    143.         me.editor.editingPlugin = me  
    144.         return me.editor;  
    145.     },  
    146.       
    147.     /** 
    148.      * if clicksToEdit===0 then mun the click/dblclick event 
    149.      * @private 
    150.      * @override 
    151.      */  
    152.     initEditTriggers: function(){  
    153.         var me = this   
    154.         var clickEvent = me.clicksToEdit === 1 ? 'click' : 'dblclick'  
    155.         me.callParent(arguments);   
    156.         if(me.clicksToEdit === 0){  
    157.             me.mun(me.view, 'cell' + clickEvent, me.startEditByClick, me);   
    158.         }  
    159.     },  
    160.       
    161.     /** 
    162.      * 添加记录 
    163.      * add a record and start edit it (will not sync store) 
    164.      * @param {Model/Object} data Data to initialize the Model's fields with <br/> 
    165.      * @param {Object} config see {@link #cfg-addPosition}.  
    166.      */  
    167.     startAdd: function(data,config){  
    168.         var me = this;  
    169.         var cfg = Ext.apply({  
    170.             addInPlace: this.addInPlace,  
    171.             addPosition: this.addPosition,  
    172.             colIndex: 0  
    173.         },config)  
    174.           
    175.         //find the position  
    176.         var position;  
    177.         if(cfg.addInPlace){  
    178.             var selected = me.grid.getSelectionModel().getSelection()  
    179.             if(selected && selected.length>0){  
    180.                 position = me.grid.store.indexOf(selected[0])   
    181.                 console.log('a',position)  
    182.                 position += (cfg.addPosition<=0) ? 0: 1  
    183.             }else{  
    184.                 position = 0  
    185.             }  
    186.         }else{  
    187.             position = (cfg.addPosition==-1 ? me.grid.store.getCount() : cfg.addPosition) || 0  
    188.         }  
    189.           
    190.         var record = data.isModel ? data : me.grid.store.model.create(data);  
    191.         var autoSync = me.grid.store.autoSync;  
    192.         me.grid.store.autoSync = false;  
    193.         me.grid.store.insert(position, record);  
    194.         me.grid.store.autoSync = autoSync;  
    195.           
    196.         me.adding = true  
    197.         me.startEdit(position,cfg.colIndex);  
    198.           
    199.         //since autoCancel:true dont work for me  
    200.         if(me.hideTooltipOnAdd && me.getEditor().hideToolTip){  
    201.             me.getEditor().hideToolTip()  
    202.         }  
    203.     },  
    204.       
    205.     /** 
    206.      * 编辑之前,自动取消编辑 
    207.      * Modify: if is editing, cancel first. 
    208.      * @private 
    209.      * @override 
    210.      */  
    211.     startEdit: function(record, columnHeader) {  
    212.         var me = this;  
    213.         if(me.editing){  
    214.             me.cancelEdit();   
    215.         }  
    216.         me.callParent(arguments);  
    217.     },  
    218.       
    219.     /** 
    220.      * 修改adding的状态值 
    221.      * Modify: set adding=false 
    222.      * @private 
    223.      * @override 
    224.      */  
    225.     completeEdit: function() {  
    226.         var me = this;  
    227.         if (me.editing && me.validateEdit()) {  
    228.             me.editing = false;  
    229.             me.fireEvent('edit', me.context);  
    230.         }  
    231.         me.adding = false  
    232.     },  
    233.       
    234.     /** 
    235.      * 取消编辑 
    236.      * 1.fireEvent 'canceledit' 
    237.      * 2.when autoRecoverOnCancel is true, if record is phantom then remove it 
    238.      * @private 
    239.      * @override 
    240.      */  
    241.     cancelEdit: function(){  
    242.         var me = this;  
    243.         if (me.editing) {  
    244.             me.getEditor().cancelEdit();  
    245.             me.editing = false;  
    246.             me.fireEvent('canceledit', me.context);   
    247.             if (me.autoRecoverOnCancel){  
    248.                 if(me.adding){  
    249.                     me.context.record.store.remove(me.context.record);  
    250.                     me.adding = false  
    251.                 }else{  
    252.                     //不需要reject,因为Editor没有更改record.  
    253.                     //me.context.record.reject()  
    254.                 }  
    255.             }  
    256.         }  
    257.     }  
    258. })  
    259.   
    260. //ext-lang-zh_CN  
    261. if (Ext.grid.RowEditor) {  
    262.     Ext.apply(Ext.grid.RowEditor.prototype, {  
    263.         saveBtnText: '保存',  
    264.         cancelBtnText: '取消',  
    265.         errorsText: '错误信息',  
    266.         dirtyText: '已修改,你需要提交或取消变更'  
    267.     });  
    268. }  
posted @ 2013-04-27 17:37  赵雪丹  阅读(832)  评论(0)  编辑  收藏  举报