RowEditing Plugin: validateedit event

The rowediting plugin fires a validateedit event after its Update button is clicked.

It is fired before the record is populated with the form data.

Here is how to handle the validateedit event if you want to validate a model and show its validation errors:

The editor.editor.form reference is to a BasicForm and not a Form Panel.

validateedit: function(editor, e, eOpts){
    var newModel = e.record.copy(); //copy the old model
    newModel.set(e.newValues); //set the values from the editing plugin form

    var errors = newModel.validate(); //validate the new data
    if(!errors.isValid()){
      editor.editor.form.markInvalid(errors); //the double "editor" is correct
      return false; //prevent the editing plugin from closing
    }
}

ExtJS Faster Loading

Here's how to make your app appear to load faster. It's a trick used in iOS programming:

1. take a screenshot of your application, in its initial but loaded state *
2. blur or mask this image somewhat
3. load this image first, and set it as the HTML background image
4. load ExtJS and your application
5. start your application
6. the app will start and show its interface, and the viewport will cover the HTML background

To make sure an image loads first, put this script at the top:

(new Image()).src = 'path to your startup image';

To set it as the background image, add this style to your index page:

html {
  background-image: url('path to your startup image');
  background-size: 100%;
}

You should also, of course, use Sencha SDK Tools to compress and minimize your files.

* remove any user-specific or time-sensitive info

Polymorphic JSON: Changing the model type based on the response

I am using the Party Model, and needed to create an Individual or Organization model depending on the JSON response. Had to override Ext.data.reader.Reader to do it. Ideally, Sencha would fire a "creating model" event or hook that would let us pick the model at Read time. The system looks like this:

PARTY
id
name
getText() - returns name

ORGANIZATION : PARTY
doingBusinessAs
getText() - returns doingBusinessAs

INDIVIDUAL : PARTY
middleName
firstName
birthday
getText() override - returns full name

Handles overridden fields and associations properly. You should use the name property on belongsTo associations if you want to override it.


Here is the override code:

Ext.data.reader.Reader.override({
    extractData:function(root){


        var me = this,
            records = [],
            Model   = me.model,
            length  = root.length,
            convertedValues, node, record, i;


        if (!root.length && Ext.isObject(root)) {
            root = [root];
            length = 1;
        }


        for (i = 0; i < length; i++) {
            node = root[i];

        /* OVERRIDE */
        if(me.types){
        var typeCode = node[me.typeProperty || 'type'];
        var type = me.types[typeCode];
        me.model = Ext.ClassManager.get(type); //the model reference is used in other functions
        Model = me.model;
        me.buildExtractors(true); //need to rebuild the field extractors
        }
        /* END OVERRIDE */


        record = new Model(undefined, me.getId(node), node, convertedValues = {});

            record.phantom = false;

            me.convertRecordData(convertedValues, node, record);

            records.push(record);


            if (me.implicitIncludes) {
                me.readAssociated(record, node);
            }
        }


        return records;
    }
});

//Here is how you would use it:

Ext.define('My.model.Party', {
    extend:'Ext.data.Model',


    requires:[
    'My.model.Individual',
    'My.model.Organization'
    ],


    fields:[
    'id',
    'type',
    'name',
    {
    name:'text',
    mapping:'name'
    }
    ],


    proxy:{
    type:'ajax',
    url:'parties',
    reader: {
        root:'parties',
        types:{
        'i':'My.model.Individual',
        'o':'My.model.Organization'
        }
    }
    }
});

// the json:

{
success: true,
parties:[
{ id:4, type:'i', name:'chief', firstName:'el', middleName:'_', birthday:'May 1' },
{ id:99, type:'o', name:'Sencha, Inc.', doingBusinessAs:'Sencha' }
]
}

Your Parties store would then contain an Individual object and an Organization object.

Peace.