Saturday 27 April 2013

ExtJS class,define,create,override,extend,apply,applyif

NOTE : class name should not contain underscore(-) in it


Ext.Class:

 

            Handles class creation throughout the framework. This is a low level factory that is used by Ext.ClassManager and generally should not be used directly. If you choose to use Ext.Class you will lose out on the namespace, aliasing and depency loading features made available byExt.ClassManager. The only time you would use Ext.Class directly is to create an anonymous class.
If you wish to create a class you should use Ext.define which aliases Ext.ClassManager.create to enable namespacing and dynamic dependency resolution.
                         Ext.Class is the factory and not the superclass of everything



            create( [String name] )

If Ext.Loader is enabled and the class has not been defined yet, it will attempt to load the class via synchronous loading.
For example, all these three lines return the same result:
 // alias
 var window = Ext.create('widget.window', {
     width: 600,
     height: 800,
     ...
 });
 
 // alternate name
 var window = Ext.create('Ext.Window', {
     width: 600,
     height: 800,
     ...
 });
 
 // full class name
 var window = Ext.create('Ext.window.Window', {
     width: 600,
     height: 800,
     ...
 });
 
 // single object with xclass property:
 var window = Ext.create({
     xclass: 'Ext.window.Window', // any valid value for 'name' (above)
     width: 600,
     height: 800,
     ...
 });

          define( String className, Object data, Function createdFn )

 Ext.define('My.awesome.Class', {
     someProperty: 'something',
 
     someMethod: function() {
         alert(s + this.someProperty);
     }
 
     ...
 });
 
 var obj = new My.awesome.Class();
 
 obj.someMethod('Say '); // alerts 'Say something'
To defines an override, include the override property. The content of an override is aggregated with the specified class in order to extend or modify that class. This can be as simple as setting default property values or it can extend and/or replace methods. This can also extend the statics of the class.
One use for an override is to break a large class into manageable pieces.
 
 Ext.define('My.app.Panel', {
     extend: 'Ext.panel.Panel',
     requires: [
         'My.app.PanelPart2',
         'My.app.PanelPart3'
     ]
 
     constructor: function (config) {
         this.callParent(arguments); // calls Ext.panel.Panel's constructor
         //...
     },
 
     statics: {
         method: function () {
             return 'abc';
         }
     }
 });
 
 // File: /src/app/PanelPart2.js
 Ext.define('My.app.PanelPart2', {
     override: 'My.app.Panel',
 
     constructor: function (config) {
         this.callParent(arguments); // calls My.app.Panel's constructor
         //...
     }
 });
Another use of overrides is to provide optional parts of classes that can be independently required. In this case, the class may even be unaware of the override altogether.
 Ext.define('My.ux.CoolTip', {
     override: 'Ext.tip.ToolTip',
 
     constructor: function (config) {
         this.callParent(arguments); // calls Ext.tip.ToolTip's constructor
         //...
     }
 });
The above override can now be required as normal.
 Ext.define('My.app.App', {
     requires: [
         'My.ux.CoolTip'
     ]
 });
Overrides can also contain statics:
 Ext.define('My.app.BarMod', {
     override: 'Ext.foo.Bar',
 
     statics: {
         method: function (x) {
             return this.callParent([x * 2]); // call Ext.foo.Bar.method
         }
     }
 });
IMPORTANT: An override is only included in a build if the class it overrides is required. Otherwise, the override, like the target class, is not included.
             apply( Object object, Object config, [Object defaults] )

 the original objects / arrays is needed, use Ext.Object.merge instead.
applyIf( Object object, Object config )

Copies all the properties of config to object if they don't already exist.
If the environment's native JSON encoding is not being used (USE_NATIVE_JSON is not set, or the environment does not support it), then ExtJS's encoding will be used. This allows the developer to add a toJSON method to their classes which need serializing to return a valid JSON representation of the object.

override( Object target, Object overrides )

Overrides members of the specified target with the given values.

 var panel = new Ext.Panel({ ... });
 
 Ext.override(panel, {
     initComponent: function () {
         // extra processing...
         this.callParent();
     }
 });
If the target is none of these, the overrides are applied to the target using Ext.apply.



The parent class that this class extends. For example:
Ext.define('Person', {
    say: function(text) { alert(text); }
});
 
Ext.define('Developer', {
    extend: 'Person',
    say: function(text) { this.callParent(["print "+text]); }
});

No comments:

Post a Comment