1 / 14

Sencha TOUCH

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

hamlet
Download Presentation

Sencha TOUCH

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Sencha TOUCH Some Learnings

  2. 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

  3. 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

  4. 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

  5. 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; } });

  6. CLASS System – Extend Ext.define('Df.data.Model', { extend: 'Ext.data.Model', requires: ['Df.data.writer.SinglePost'], config: { idProperty: 'Id', idFieldName: null, serverController: null },

  7. CLASS System – Extend applyIdFieldName: function (fieldName) { if (!fieldName) { varclassName = this.self.getName(); var parts = className.split("."); fieldName = parts[parts.length - 1] + "Id"; } return fieldName; },

  8. 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]); },

  9. CLASS System – Extend Ext.define('Precision.model.User', { extend: 'Df.data.Model', config: { fields: [ 'Username', 'PrimaryEmail', 'RoleId' ] } }); • No need to define Proxy (and controller)

  10. 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

  11. 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; },

  12. 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); } },

  13. 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”

  14. 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!

More Related