1. #1
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,509
    Vote Rating
    374
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default EditorGrid validation plugin

    EditorGrid validation plugin


    Hi folks,

    I've just finished coding of an EditorGrid validation plugin and I decided to give it some lifetime on this forum before I'll post it to Ext wiki.

    Test and comment it please. Thanks.

    Code:
    PHP Code:
    Ext.namespace('Ext.ux''Ext.ux.plugins');

    /**
     * EditorGrid validation plugin
     * Adds validation functions to the grid
     *
     * @author  Jozef Sakalos, aka Saki
     * @version 0.1
     *
     * Usage: 
     * grid = new Ext.grid.EditorGrid({plugins:new Ext.ux.plugins.GridValidator(), ...})
     */
    Ext.ux.plugins.GridValidator = function(config) {

        
    // initialize plugin
        
    this.init = function(grid) {
            
    Ext.apply(grid, {
                
    /**
                 * Checks if a grid cell is valid
                 * @param {Integer} col Cell column index
                 * @param {Integer} row Cell row index
                 * @return {Boolean} true = valid, false = invalid
                 */
                
    isCellValid:function(colrow) {
                    if(!
    this.colModel.isCellEditable(colrow)) {
                        return 
    true;
                    }
                    var 
    ed this.colModel.getCellEditor(colrow);
                    if(!
    ed) {
                        return 
    true;
                    }
                    var 
    record this.store.getAt(row);
                    if(!
    record) {
                        return 
    true;
                    }
                    var 
    field this.colModel.getDataIndex(col);
                    
    ed.field.setValue(record.data[field]);
                    return 
    ed.field.isValid(true);
                } 
    // end of function isCellValid

                /**
                 * Checks if grid has valid data
                 * @param {Boolean} editInvalid true to automatically start editing of the first invalid cell
                 * @return {Boolean} true = valid, false = invalid
                 */
                
    ,isValid:function(editInvalid) {
                    var 
    cols this.colModel.getColumnCount();
                    var 
    rows this.store.getCount();
                    var 
    rc;
                    var 
    valid true;
                    for(
    0rowsr++) {
                        for(
    0colsc++) {
                            
    valid this.isCellValid(cr);
                            if(!
    valid) {
                                break;
                            }
                        }
                        if(!
    valid) {
                            break;
                        }
                    }
                    if(
    editInvalid && !valid) {
                        
    this.startEditing(rc);
                    }
                    return 
    valid;
                } 
    // end of function isValid
            
    });
        }; 
    // end of function init
    }; // GridValidator plugin end 
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  2. #2
    Sencha User
    Join Date
    Mar 2007
    Posts
    12
    Vote Rating
    0
    wanclark is on a distinguished road

      0  

    Default


    nice!

  3. #3
    Ext User
    Join Date
    Jul 2007
    Location
    BKK, Thailand
    Posts
    17
    Vote Rating
    0
    shane.fox is on a distinguished road

      0  

    Default


    Thanks, this was useful.

  4. #4
    Ext User
    Join Date
    Aug 2007
    Location
    beijing
    Posts
    30
    Vote Rating
    0
    linizou is on a distinguished road

      0  

    Default


    useful
    http://blog.linizou.com
    ---------------------------------------------

  5. #5
    Ext User
    Join Date
    Feb 2008
    Posts
    4
    Vote Rating
    0
    cassioam is on a distinguished road

      0  

    Default


    Thank you!

  6. #6
    Ext User
    Join Date
    Jun 2007
    Posts
    67
    Vote Rating
    0
    jschick is on a distinguished road

      0  

    Default


    This plugin is just what I was looking for. Thanks!

    Because I only allow editing of one row at a time I added the following function to the plugin.

    Code:
                /**
                 * Checks if row has valid data
                 * @param {Integer} row index
                 * @param {Boolean} editInvalid true to automatically start editing of the first invalid cell
                 * @return {Boolean} true = valid, false = invalid
                 */
                ,isRowValid:function(row, editInvalid) {
                    var cols = this.colModel.getColumnCount();
                    var c;
                    var valid = true;
                    for(c = 0; c < cols; c++) {
                        valid = this.isCellValid(c, row);
                        if(!valid) {
                            break;
                        }
                    }
                    if(editInvalid && !valid) {
                        this.startEditing(row, c);
                    }
                    return valid;
                } // end of function isRowValid

  7. #7
    Ext User spectrus's Avatar
    Join Date
    Feb 2008
    Posts
    43
    Vote Rating
    0
    spectrus is on a distinguished road

      0  

    Question can't quite get it (this.preventMark?)

    can't quite get it (this.preventMark?)


    Thanks a lot, looks like a very useful plugin!

    Tried to get it working, but can't quite get it yet. My invalid test cell is not getting assigned the 'invalid' CSS class because its preventMark value is being set to 'true'. What is this parameter and where can I control it in the grid config (if anywhere)?

    PHP Code:
    markInvalid : function(msg){
        if(!
    this.rendered || this.preventMark){ return; }
    ...

    Edit: Never mind, it's me. It's not the this.preventMark (which I see you're just passing in as 'true' - stupid me!), it's the !this.rendered check. I'm running the check at grid's 'show' event. Are the cells still not rendered at that point?

    And one more: when the plugin's working (hope to see it myself), after it's done then all the invalid cells on the grid are being displayed as invalid (i.e. with red border) without being clicked on, correct?

    Thanks!

  8. #8
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,509
    Vote Rating
    374
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Cells will be marked invalid only if you start editing. To tell truth, I've more-the-less temporarily abandoned devel of this plugin as it was not the most important part of my project. There is still a lot of space for improvement...
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  9. #9
    Ext User spectrus's Avatar
    Join Date
    Feb 2008
    Posts
    43
    Vote Rating
    0
    spectrus is on a distinguished road

      0  

    Default


    I see. But wouldn't that be taken care of by the grid anyway? For example an empty mandatory cell is being marked as invalid when clicked even without running the plugin. The usefullness of the plugin escapes me then, and please correct me if I'm wrong. Or will the plugin prove to be more useful for more complex cell editors/column model definitions?

    Thank you for a quick response!

  10. #10
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,509
    Vote Rating
    374
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    The original idea was to prevent submit of invalid grid to server and/or forcing user to edit the invalid fields. Of course, if invalid cells were visually marked it would add a lot of value...
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM