Blog Archive

Create Virtual Field in ExtJs 4 model instance using convert and mapping configs

You can use convert and/or mapping configs in Ext.data.Field to generate virtual fields. Here is an example that generates a full name field from first name and last name.
//define the model
Ext.define('CO.model.CustomerInformation', {
    extend: 'Ext.data.Model',
    alias: 'widget.customerInfo',
    fields: [
             {name: 'status', type: 'bool'},
             {name: 'id', type: 'string'},
             {name: 'firstName', type: 'string'},
             {name: 'lastName', type: 'string'},
             {
                 name: 'fullName',
                 mapping: 'firstName',
                 convert: function(v, record) {
                         return v + ' ' + record.data.lastName;
                 }
            }]
});

mapping : String/Number
  • A path expression for use by the Ext.data.reader.Reader implementation that is creating the Model to extract the Field value from the data object. If the path expression is the same as the field name, the mapping may be omitted.
  • If a more complex value extraction strategy is required, then configure the Field with a convert function. This is passed the whole row object, and may interrogate it in whatever way is necessary in order to return the desired data.

convert : Function
A function which converts the value provided by the Reader into an object that will be stored in the Model. It is passed the following parameters:

  • v : Mixed
    • The data value as read by the Reader, if undefined will use the configured defaultValue.
  • rec : Ext.data.Model
    • The data object containing the Model as read so far by the Reader. Note that the Model may not be fully populated at this point as the fields are read in the order that they are defined in your fields array.