Sencha TOUCH Some Learnings
Class System - Properties • What most of the developers already know: • Automatic getters and setters for properties specified in the Config Block • What most of the developers forget: • applyProperty • Called before value is set • Gives a chance to inspect and modify the value being set before it is actually set • Example: applyStore • updateProperty • Called after a NEW value is set • Gives a chance to take action after value is modified • Example: updateTitle – Update the element
CLASS System - properties • Advantages of Apply • Gives a chance for “Before” events • Allows the developers to accept different types of variables and convert them to appropriate type before values are set • Advantages of Update • Gives a chance for “After” events • Element updates etc. are asynchronous. Developers do not need to remember the correct sequence of changing the properties • Expectation: Properties can be modified after creation/ display of the content
CLASS System - extending • The need • To add or modify the functionality that already exists in the base classes • Options • extend • overrides • More options – Multiple inheritance – sort of • plugins – Mainly to add/ modify the behavior/ functionalities. Can easily modify existing properties/ methods • Mixins – Can add/ remove properties in addition to modifying the behavior/ functionalities
CLASS System – OVERRIDE • Changing default behavior: Ext.define('Df.data.Connection', { override: 'Ext.data.Connection', setOptions: function (options, scope) { var result = this.callOverridden(arguments); result.url = Ext.urlAppend(result.url, (options.disableCachingParam || this.getDisableCachingParam()) + '=' + (new Date().getTime())); return result; } });
CLASS System – Extend Ext.define('Df.data.Model', { extend: 'Ext.data.Model', requires: ['Df.data.writer.SinglePost'], config: { idProperty: 'Id', idFieldName: null, serverController: null },
CLASS System – Extend applyIdFieldName: function (fieldName) { if (!fieldName) { varclassName = this.self.getName(); var parts = className.split("."); fieldName = parts[parts.length - 1] + "Id"; } return fieldName; },
CLASS System – Extend applyProxy: function (proxy, currentProxy) { if (!proxy) { proxy = {}; } Ext.applyIf(proxy, { type: 'ajax', url: 'Controllers/' + this.getServerController() + '.ashx', extraParams: {}, reader: {}, writer: {} }); Ext.applyIf(proxy.reader, { rootProperty: 'data' }); Ext.applyIf(proxy.writer, { type: 'df-singlepost' }); return this.callParent([proxy, currentProxy]); },
CLASS System – Extend Ext.define('Precision.model.User', { extend: 'Df.data.Model', config: { fields: [ 'Username', 'PrimaryEmail', 'RoleId' ] } }); • No need to define Proxy (and controller)
CLASS System – Mix-IN An in-built mix-in: • Ext.mixin.Observable • Introduces Event model to the class • No longer limited to inheriting from Observable class • An example of another mix-in – FilterHelper • Sets the baseParam based on each field in the container • Loads the store including masking the target
CLASS SYSTEM – MIX-In Ext.define("Df.mixin.FilterHelper", { getFilter: function () { varfilterFields = this.query('field'); var filter = {}; vari, len; for (i = 0, len = filterFields.length; i < len; i++) { var field = filterFields[i]; if (!field.disabled) { filter[field.getName() || field.getItemId()] = field.getValue(); } } return filter; },
CLASS SYSTEM – MIX-In applyFilter: function (options) { var store = options.store; varmaskTarget = options.maskTarget; var filter = this.getFilter(); var proxy = store.getProxy(); varextraParams = proxy.getExtraParams(); varrequiresLoad = options.forceLoad === true; var name; for (name in filter) { var value = filter[name]; if (extraParams[name] !== value) { proxy.setExtraParam(name, value); requiresLoad = true; } } if (requiresLoad) { varloadOptions = {}; if (maskTarget) { maskTarget.mask({ xtype: 'loadmask', message: 'Loading...' }); Ext.apply(loadOptions, { callback: this.onFilterLoadComplete, scope: options }); } store.load(loadOptions); } },
CLASS SYSTEM – PLUG-IN FormSave • A save button can be used to call the model’s save • Data is automatically applied to the model once the Save is successful • A delete button can be used to call the model’s delete • Delete is enabled only for old records • Form validation on Save – Automatically translates the field to “label”
TIPS/ TRICKS Class • If setValue is called with same value, apply/ update isn’t called! Model • If you want to use “Convert” don’t specify “Type” Stores • Destroy the stores if no longer being used Component • Tap vsSingleTap (Demo using DataView) iOS 6 – Post Requests • They are being cached now!
