zoukankan      html  css  js  c++  java

  • ExtJS 4.0 改善Ext.grid.plugin.RowEditing (重构,v1.4版本,20110911)

    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.      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. }  
  • 相关阅读:
    linux追加中文字库，解决imagemagick 中文乱码的问题。
    laravel 学习
    postman post 数据格式
    PHP5各个版本的新功能和新特性总结
    laravel 自定义常量方法
    微信服务号获得openid 跟用户信息
    【转】solr deltaImportQuery deltaQuery parentDeltaQuery 用法规则
    Shell
    [spring] org.springframework.beans.factory.NoSuchBeanDefinitionException: No bean named 'sessionFactory' is d .
    [transaction] org.hibernate.HibernateException: createQuery is not valid without active transaction
  • 原文地址：https://www.cnblogs.com/zhaoxd/p/3047585.html
Copyright © 2011-2022 走看看