Presentation is loading. Please wait.

Presentation is loading. Please wait.

Sencha TOUCH Some Learnings. Class System - Properties  What most of the developers already know:  Automatic getters and setters for properties specified.

Similar presentations


Presentation on theme: "Sencha TOUCH Some Learnings. Class System - Properties  What most of the developers already know:  Automatic getters and setters for properties specified."— 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) { var className = 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', 'Primary ', '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 () { var filterFields = this.query('field'); var filter = {}; var i, 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; var maskTarget = options.maskTarget; var filter = this.getFilter(); var proxy = store.getProxy(); var extraParams = proxy.getExtraParams(); var requiresLoad = 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) { var loadOptions = {}; 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 vs SingleTap (Demo using DataView) iOS 6 – Post Requests  They are being cached now!


Download ppt "Sencha TOUCH Some Learnings. Class System - Properties  What most of the developers already know:  Automatic getters and setters for properties specified."

Similar presentations


Ads by Google