1. #1
    Sencha User atian25's Avatar
    Join Date
    Oct 2008
    Location
    china
    Posts
    114
    Vote Rating
    2
    atian25 is on a distinguished road

      0  

    Cool Ext.ux.grid.plugin.RowEditing - add some usefull features

    Ext.ux.grid.plugin.RowEditing - add some usefull features


    Features:
    1.add canceledit event
    2.add startAdd fn (support position)

    Download:RowEditing.zip

    ChangeLog:
    • v1.4 2011-09-11refactor and change doc style to jsduck
    Code:
     /**
     * @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-09-11  <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.relayEvents(me, ['canceledit']);
        },
        
        /**
         * 提供默认的Editor配置
         *      @example
         *      {header:'手机',dataIndex:'phone',fieldType:'numberfield',field:{allowBlank:true}}
         * provide default field config
         * @param {String} fieldType 可选值:numberfield,checkboxfield,passwordField
         * @return {Object} 
         * @protected
         */
        getFieldCfg: function(fieldType){
            switch(fieldType){
                case 'passwordField':
                    return {
                        xtype: 'textfield',
                        inputType: 'password',
                        allowBlank:false
                    }
                case 'numberfield':
                    return {
                        xtype: 'numberfield',
                        hideTrigger: true,
                        keyNavEnabled: false,
                        mouseWheelEnabled: false,
                        allowBlank:false
                    }
                    
                case 'checkboxfield':
                    return {
                        xtype: 'checkboxfield',
                        inputValue: 'true',
                        uncheckedValue: 'false'
                    }
                }
        },
        
        /**
         * Help to config field,just giving a fieldType and field as additional cfg.
         * see {@link #getFieldCfg}
         * @private
         * @override
         */
        getEditor: function() {
            var me = this;
    
    
            if (!me.editor) {
                Ext.each(me.grid.headerCt.getGridColumns(),function(item,index,allItems){
                    if(item.fieldType){
                        item.field = Ext.applyIf(item.field||{},this.getFieldCfg(item.fieldType))
                    }
                },this)
                // keep a reference for custom editor..
                me.editor = me.initEditor();
            }
            me.editor.editingPlugin = me
            return me.editor;
        },
        
        /**
         * if clicksToEdit===0 then mun the click/dblclick event
         * @private
         * @override
         */
        initEditTriggers: function(){
            var me = this 
            var clickEvent = me.clicksToEdit === 1 ? 'click' : 'dblclick'
            me.callParent(arguments); 
            if(me.clicksToEdit === 0){
                me.mun(me.view, 'cell' + clickEvent, me.startEditByClick, me); 
            }
        },
        
        /**
         * 添加记录
         * add a record and start edit it (will not sync store)
         * @param {Model/Object} data Data to initialize the Model's fields with <br/>
         * @param {Object} config see {@link #cfg-addPosition}. 
         */
        startAdd: function(data,config){
            var me = this;
            var cfg = Ext.apply({
                addInPlace: this.addInPlace,
                addPosition: this.addPosition,
                colIndex: 0
            },config)
            
            //find the position
            var position;
            if(cfg.addInPlace){
                var selected = me.grid.getSelectionModel().getSelection()
                if(selected && selected.length>0){
                    position = me.grid.store.indexOf(selected[0]) 
                    console.log('a',position)
                    position += (cfg.addPosition<=0) ? 0: 1
                }else{
                    position = 0
                }
            }else{
                position = (cfg.addPosition==-1 ? me.grid.store.getCount() : cfg.addPosition) || 0
            }
            
            var record = data.isModel ? data : me.grid.store.model.create(data);
            var autoSync = me.grid.store.autoSync;
            me.grid.store.autoSync = false;
            me.grid.store.insert(position, record);
            me.grid.store.autoSync = autoSync;
            
            me.adding = true
            me.startEdit(position,cfg.colIndex);
            
            //since autoCancel:true dont work for me
            if(me.hideTooltipOnAdd && me.getEditor().hideToolTip){
                me.getEditor().hideToolTip()
            }
        },
        
        /**
         * 编辑之前,自动取消编辑
         * Modify: if is editing, cancel first.
         * @private
         * @override
         */
        startEdit: function(record, columnHeader) {
            var me = this;
            if(me.editing){
                me.cancelEdit(); 
            }
            me.callParent(arguments);
        },
        
        /**
         * 修改adding的状态值
         * Modify: set adding=false
         * @private
         * @override
         */
        completeEdit: function() {
            var me = this;
            if (me.editing && me.validateEdit()) {
                me.editing = false;
                me.fireEvent('edit', me.context);
            }
            me.adding = false
        },
        
        /**
         * 取消编辑
         * 1.fireEvent 'canceledit'
         * 2.when autoRecoverOnCancel is true, if record is phantom then remove it
         * @private
         * @override
         */
        cancelEdit: function(){
            var me = this;
            if (me.editing) {
                me.getEditor().cancelEdit();
                me.editing = false;
                me.fireEvent('canceledit', me.context); 
                if (me.autoRecoverOnCancel){
                    if(me.adding){
                        me.context.record.store.remove(me.context.record);
                        me.adding = false
                    }else{
                        //不需要reject,因为Editor没有更改record.
                        //me.context.record.reject()
                    }
                }
            }
        }
    })
    
    
    //ext-lang-zh_CN
    if (Ext.grid.RowEditor) {
        Ext.apply(Ext.grid.RowEditor.prototype, {
            saveBtnText: '保存',
            cancelBtnText: '取消',
            errorsText: '错误信息',
            dirtyText: '已修改,你需要提交或取消变更'
        });
    }
    Last edited by atian25; 10 Sep 2011 at 5:13 PM. Reason: version update,refactor and change doc style to jsduck
    @from: china
    @web: http://atian25.iteye.com
    @extensions: (extjs 4.x)
    * Ext.ux.grid.plugin.RowEditing - add some usefull features (v1.4 updated 2011-09-11)
    * Ext.ux.button.AutoRefresher
    * Ext.ux.form.field.DateTime

  2. #2
    Sencha User kender's Avatar
    Join Date
    Jul 2009
    Location
    Italy
    Posts
    23
    Vote Rating
    0
    kender is on a distinguished road

      0  

    Default


    thanks, I also added a custom change to "startAdd", to add a new record first or last
    Code:
    startAdd: function(data,last){
    var position = (last) ? 0 : parseInt( this.grid.store.getCount() );
    var record = this.grid.store.model.create(data);
    this.grid.store.autoSync = false;
    this.grid.store.insert(position, record);
    this.grid.store.autoSync = true;
    this.startEdit( position , 0 );
    }
    if "last" is true, new record will be added at last position
    Kender is not a thief!

  3. #3
    Sencha Premium Member harrydeluxe's Avatar
    Join Date
    Jul 2007
    Location
    Nürnberg, Germany
    Posts
    78
    Vote Rating
    29
    harrydeluxe has a spectacular aura about harrydeluxe has a spectacular aura about

      0  

    Default


    Thank you! Here is my adapted version:



    Source on Github:
    https://github.com/harrydeluxe/extjs.../RowEditing.js

    Demo:
    http://harrydeluxe.github.com/extjs-...owediting.html

    PHP Code:
    /**
     * Ext.ux.grid.RowEditing Class
     * 
     * @extends Ext.grid.plugin.RowEditing
     * 
     * The Initial Developer of the Original Code is tz (atian25@qq.com)
     * @see http://www.sencha.com/forum/showthread.php?131482-Ext.ux.RowEditing-add-some-usefull-features
     * 
     * @author Harald Hanek (c) 2011
     * @version 1.0 License: MIT
     *          (http://www.opensource.org/licenses/mit-license.php)
     */

    Ext.define('Ext.ux.grid.RowEditing', {
        
    extend'Ext.grid.plugin.RowEditing',
        
    alias'plugin.ux.rowediting',

        
    removePhantomsOnCanceltrue,

        
    init: function(grid) {
            var 
    me this;
            
    me.addEvents('canceledit');
            
    me.callParent(arguments);
            
    grid.addEvents('canceledit');
            
    grid.relayEvents(me, ['canceledit']);

            
    me.on('edit', function(editor) {
                
    delete editor.record._blank;
            });
        },

        
    /**
         * add a record and start edit it
         * 
         * @param {Object} data Data to initialize the Model's fields with
         * @param {Number} position The position where the record will added. -1
         *            will be added record at last position.
         */
        
    startAdd: function(dataposition) {
            var 
    me this;

            var 
    record me.grid.store.model.create(data);
            
    record._blank true;

            
    position = (position && position != -&& parseInt(position 1) <= parseInt(me.grid.store.getCount())) ? position : (position == -1) ? parseInt(me.grid.store.getCount()) : 0;

            var 
    autoSync me.grid.store.autoSync;
            
    me.grid.store.autoSync false;
            
    me.grid.store.insert(positionrecord);
            
    me.grid.store.autoSync autoSync;
            
    me.startEdit(position0);
        },

        
    startEditByClick: function() {
            var 
    me this;

            if (!
    me.editing || me.clicksToMoveEditor === me.clicksToEdit) {
                if (
    me.context && me.context.record._blankme.cancelEdit();

                
    me.callParent(arguments);
            }
        },

        
    cancelEdit: function() {
            var 
    me this;
            if (
    me.editing) {
                
    me.getEditor().cancelEdit();
                
    me.callParent(arguments);
                
    me.fireEvent('canceledit'me.context);

                if (
    me.removePhantomsOnCancel) {
                    if (
    me.context.record._blank && me.context.record.store) {
                        
    me.context.store.remove(me.context.record);
                    } else {
                        
    me.context.record.reject();
                    }
                }
            }
        }
    }); 
    Last edited by harrydeluxe; 24 Feb 2012 at 2:35 AM. Reason: move to gh-pages branch
    DELACAP | Github
    "don't code today what you can't debug tomorrow"

  4. #4
    Sencha User atian25's Avatar
    Join Date
    Oct 2008
    Location
    china
    Posts
    114
    Vote Rating
    2
    atian25 is on a distinguished road

      0  

    Default


    thanks for sharing, harrydeluxe,kender

    1. why using custom _blank than record.phantom ?
    2. position as same as i thought, but i think it's no need to check whether position > count
    3. startEditByClick override is imperfect, when call startEdit by program

    next, i want to add dynamicform to rowediting, then we can choose RowEditor or DynamicForm to be rowediting plugin's editor.
    @from: china
    @web: http://atian25.iteye.com
    @extensions: (extjs 4.x)
    * Ext.ux.grid.plugin.RowEditing - add some usefull features (v1.4 updated 2011-09-11)
    * Ext.ux.button.AutoRefresher
    * Ext.ux.form.field.DateTime

  5. #5
    Sencha Premium Member harrydeluxe's Avatar
    Join Date
    Jul 2007
    Location
    Nürnberg, Germany
    Posts
    78
    Vote Rating
    29
    harrydeluxe has a spectacular aura about harrydeluxe has a spectacular aura about

      0  

    Default


    @atian25
    The cancelEdit function i will only for new added records, therefore i add "_blank". But if i have several records and i still do not have this commitet, they are all still Phantoms. Now when i edit one of them and click cancel, then the record will deleted. So i added "_blank".
    DELACAP | Github
    "don't code today what you can't debug tomorrow"

  6. #6
    Sencha User atian25's Avatar
    Join Date
    Oct 2008
    Location
    china
    Posts
    114
    Vote Rating
    2
    atian25 is on a distinguished road

      0  

    Default


    @harrydeluxe
    got it. u r right.
    so i update a version 1.2 but using property 'adding' instead of _blank

    does anyone know why autoCancel:true dont work for me, the error tip show when startAdd
    @from: china
    @web: http://atian25.iteye.com
    @extensions: (extjs 4.x)
    * Ext.ux.grid.plugin.RowEditing - add some usefull features (v1.4 updated 2011-09-11)
    * Ext.ux.button.AutoRefresher
    * Ext.ux.form.field.DateTime

  7. #7
    Sencha Premium Member harrydeluxe's Avatar
    Join Date
    Jul 2007
    Location
    Nürnberg, Germany
    Posts
    78
    Vote Rating
    29
    harrydeluxe has a spectacular aura about harrydeluxe has a spectacular aura about

      0  

    Default


    Quote Originally Posted by atian25 View Post
    does anyone know why autoCancel:true dont work for me, the error tip show when startAdd
    see http://www.sencha.com/forum/showthre...t=errorSummary
    DELACAP | Github
    "don't code today what you can't debug tomorrow"

  8. #8
    Sencha User atian25's Avatar
    Join Date
    Oct 2008
    Location
    china
    Posts
    114
    Vote Rating
    2
    atian25 is on a distinguished road

      0  

    Default


    v1.3 2011-05-22
    Enhancements
    set clicksToEdit==0 to mun the click/dblclick event
    help to config field,just giving a fieldType and field as additional cfg
    Code:
               {
                   text: 'Enable',
                   dataIndex: 'enable',
                   width: 80,
                   renderer: function(v){return v?'Enable':'Disable'},
                   fieldType: 'checkboxfield',
                   field: {
                       boxLabel: 'Enable'
                   }
               }
    @from: china
    @web: http://atian25.iteye.com
    @extensions: (extjs 4.x)
    * Ext.ux.grid.plugin.RowEditing - add some usefull features (v1.4 updated 2011-09-11)
    * Ext.ux.button.AutoRefresher
    * Ext.ux.form.field.DateTime

  9. #9
    Sencha Premium Member
    Join Date
    Feb 2011
    Posts
    8
    Vote Rating
    0
    ggunders is on a distinguished road

      0  

    Default


    Is textarea going to be supported in Ext4 for this plugin? It worked alright on 3.x.

    thx

  10. #10
    Sencha User kender's Avatar
    Join Date
    Jul 2009
    Location
    Italy
    Posts
    23
    Vote Rating
    0
    kender is on a distinguished road

      0  

    Default


    the textarea doesn't render well neither in the example provided (editing the xtype in one column), with original Ext.grid.plugin.RowEditing
    Kender is not a thief!

Similar Threads

  1. [CLOSED][DUP][4.0] RowEditing bug && feature
    By atian25 in forum Ext:Bugs
    Replies: 1
    Last Post: 26 Apr 2011, 11:13 PM
  2. RowEditing Plugin
    By mujahid in forum Ext: Discussion
    Replies: 0
    Last Post: 21 Apr 2011, 4:50 AM
  3. [CLOSED]Ext.grid.RowEditing - size problems
    By bydooweedoo in forum Ext:Bugs
    Replies: 1
    Last Post: 15 Mar 2011, 7:22 PM
  4. Some usefull examples
    By Rapotor in forum Community Discussion
    Replies: 11
    Last Post: 20 Feb 2008, 2:40 AM
  5. Just found a very usefull tool (Testing data Generator)
    By Micha in forum Ext 1.x: Help & Discussion
    Replies: 9
    Last Post: 24 Jul 2007, 7:01 AM

Thread Participants: 16

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi