Page 1 of 4 123 ... LastLast
Results 1 to 10 of 35

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

  1. #1
    Sencha User atian25's Avatar
    Join Date
    Oct 2008
    Location
    china
    Posts
    114

    Cool 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 <[email protected]> <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

    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
    80

    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 ([email protected])
     * @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

    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
    80

    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

    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
    80

    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

    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

    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

    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!

Page 1 of 4 123 ... LastLast

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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •