docs/api/Ext.Class.html

   1 <!DOCTYPE html><html><head><title>Ext.Class | Ext JS 4.0 Documentation</title><script type="text/javascript" src="../ext-all.js"></script><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../scrollbars.css" type="text/css"><link rel="stylesheet" href="../docs.css" type="text/css"><link id="styleCss" rel="stylesheet" href="../style.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script><link rel="stylesheet" href="../prettify.css" type="text/css"><!-- link(rel: 'stylesheet', href: req.baseURL + '/css/ext4.css', type: 'text/css')--><link rel="shortcut icon" type="image/ico" href="../favicon.ico"><!--[if IE]>
   2 <style type="text/css">.head-band { display: none; }
   3 .header { border: 0; top: 0; left: 0px; background: url(../header.gif) repeat-x; }
   4 .doc-tab .members .member a.more { background-color: #efefef; }
   5 </style><link rel="stylesheet" href="/new/css/ie.css" type="text/css"><![endif]-->
   6 </head><body id="ext-body" class="iScroll"><div id="notice" class="notice">For up to date documentation and features, visit
   7 <a href="http://docs.sencha.com/ext-js/4-0">http://docs.sencha.com/ext-js/4-0</a></div><div class="wrapper"><div class="head-band"></div><div class="header"><h2><a href="../index.html">Sencha Documentation</a></h2></div><div id="search"><form><input type="text" placeholder="Search" id="search-field" autocomplete="off" name="q"></form><div id="search-box"></div></div><div id="treePanel"></div><div id="container"><script type="text/javascript">
   8
   9     req = {
  10         liveURL: '.',
  11         standAloneMode: true,
  12         origDocClass: 'Ext.Class',
  13         docClass: 'Ext.Class',
  14         docReq: 'Ext.Class',
  15         version: '4.0',
  16         baseURL: '.',
  17         baseDocURL: '.',
  18         baseProdURL: '.'
  19     };
  20
  21     clsInfo = {};
  22
  23
  24
  25 </script>
  26
  27 <script type="text/javascript" src="../search.js"></script>
  28 <!--script type="text/javascript" src="/new/javascripts/app/examples.js"></script-->
  29 <script type="text/javascript" src="../class_tree.js"></script>
  30 <script type="text/javascript" src="../class_doc.js"></script>
  31 <script type="text/javascript">
  32     req.source = 'Class.html#Ext-Class';
  33     clsInfo = {"methods":["getDefaultPreprocessors","getPreprocessor","registerPreprocessor","setDefaultPreprocessorPosition","setDefaultPreprocessors"],"cfgs":[],"properties":[],"events":[],"subclasses":[]};
  34     Ext.onReady(function() {
  35         Ext.create('Docs.classPanel');
  36     });
  37 </script><div id="top-block" class="top-block"><h1 id="clsTitle" class="cls"><a href="../source/Class.html#Ext-Class" target="_blank">Ext.Class</a></h1></div><div id="docContent"><div id="doc-overview-content"><div class="lft"><p>Handles class creation throughout the whole framework. Note that most of the time <a href="Ext.html#define" rel="Ext#define" class="docClass">Ext.define</a> should
  38 be used instead, since it's a higher level wrapper that aliases to <a href="Ext.ClassManager.html#create" rel="Ext.ClassManager#create" class="docClass">Ext.ClassManager.create</a>
  39 to enable namespacing and dynamic dependency resolution.</p>
  40
  41 <h1>Basic syntax:</h1>
  42
  43 <pre class="prettyprint"><code>Ext.define(className, properties);
  44 </code></pre>
  45
  46 <p>in which <code>properties</code> is an object represent a collection of properties that apply to the class. See
  47 <a href="Ext.ClassManager.html#create" rel="Ext.ClassManager#create" class="docClass">Ext.ClassManager.create</a> for more detailed instructions.</p>
  48
  49 <pre class="prettyprint"><code>Ext.define('Person', {
  50      name: 'Unknown',
  51
  52      constructor: function(name) {
  53          if (name) {
  54              this.name = name;
  55          }
  56
  57          return this;
  58      },
  59
  60      eat: function(foodType) {
  61          alert("I'm eating: " + foodType);
  62
  63          return this;
  64      }
  65 });
  66
  67 var aaron = new Person("Aaron");
  68 aaron.eat("Sandwich"); // alert("I'm eating: Sandwich");
  69 </code></pre>
  70
  71 <p>Ext.Class has a powerful set of extensible <a href="Ext.Class.html#registerPreprocessor" rel="Ext.Class#registerPreprocessor" class="docClass">pre-processors</a> which takes care of
  72 everything related to class creation, including but not limited to inheritance, mixins, configuration, statics, etc.</p>
  73
  74 <h1>Inheritance:</h1>
  75
  76 <pre class="prettyprint"><code>Ext.define('Developer', {
  77      extend: 'Person',
  78
  79      constructor: function(name, isGeek) {
  80          this.isGeek = isGeek;
  81
  82          // Apply a method from the parent class' prototype
  83          this.callParent([name]);
  84
  85          return this;
  86
  87      },
  88
  89      code: function(language) {
  90          alert("I'm coding in: " + language);
  91
  92          this.eat("Bugs");
  93
  94          return this;
  95      }
  96 });
  97
  98 var jacky = new Developer("Jacky", true);
  99 jacky.code("JavaScript"); // alert("I'm coding in: JavaScript");
 100                           // alert("I'm eating: Bugs");
 101 </code></pre>
 102
 103 <p>See <a href="Ext.Base.html#callParent" rel="Ext.Base#callParent" class="docClass">Ext.Base.callParent</a> for more details on calling superclass' methods</p>
 104
 105 <h1>Mixins:</h1>
 106
 107 <pre class="prettyprint"><code>Ext.define('CanPlayGuitar', {
 108      playGuitar: function() {
 109         alert("F#...G...D...A");
 110      }
 111 });
 112
 113 Ext.define('CanComposeSongs', {
 114      composeSongs: function() { ... }
 115 });
 116
 117 Ext.define('CanSing', {
 118      sing: function() {
 119          alert("I'm on the highway to hell...")
 120      }
 121 });
 122
 123 Ext.define('Musician', {
 124      extend: 'Person',
 125
 126      mixins: {
 127          canPlayGuitar: 'CanPlayGuitar',
 128          canComposeSongs: 'CanComposeSongs',
 129          canSing: 'CanSing'
 130      }
 131 })
 132
 133 Ext.define('CoolPerson', {
 134      extend: 'Person',
 135
 136      mixins: {
 137          canPlayGuitar: 'CanPlayGuitar',
 138          canSing: 'CanSing'
 139      },
 140
 141      sing: function() {
 142          alert("Ahem....");
 143
 144          this.mixins.canSing.sing.call(this);
 145
 146          alert("[Playing guitar at the same time...]");
 147
 148          this.playGuitar();
 149      }
 150 });
 151
 152 var me = new CoolPerson("Jacky");
 153
 154 me.sing(); // alert("Ahem...");
 155            // alert("I'm on the highway to hell...");
 156            // alert("[Playing guitar at the same time...]");
 157            // alert("F#...G...D...A");
 158 </code></pre>
 159
 160 <h1>Config:</h1>
 161
 162 <pre class="prettyprint"><code>Ext.define('SmartPhone', {
 163      config: {
 164          hasTouchScreen: false,
 165          operatingSystem: 'Other',
 166          price: 500
 167      },
 168
 169      isExpensive: false,
 170
 171      constructor: function(config) {
 172          this.initConfig(config);
 173
 174          return this;
 175      },
 176
 177      applyPrice: function(price) {
 178          this.isExpensive = (price &gt; 500);
 179
 180          return price;
 181      },
 182
 183      applyOperatingSystem: function(operatingSystem) {
 184          if (!(/^(iOS|Android|BlackBerry)$/i).test(operatingSystem)) {
 185              return 'Other';
 186          }
 187
 188          return operatingSystem;
 189      }
 190 });
 191
 192 var iPhone = new SmartPhone({
 193      hasTouchScreen: true,
 194      operatingSystem: 'iOS'
 195 });
 196
 197 iPhone.getPrice(); // 500;
 198 iPhone.getOperatingSystem(); // 'iOS'
 199 iPhone.getHasTouchScreen(); // true;
 200 iPhone.hasTouchScreen(); // true
 201
 202 iPhone.isExpensive; // false;
 203 iPhone.setPrice(600);
 204 iPhone.getPrice(); // 600
 205 iPhone.isExpensive; // true;
 206
 207 iPhone.setOperatingSystem('AlienOS');
 208 iPhone.getOperatingSystem(); // 'Other'
 209 </code></pre>
 210
 211 <h1>Statics:</h1>
 212
 213 <pre class="prettyprint"><code>Ext.define('Computer', {
 214      statics: {
 215          factory: function(brand) {
 216             // 'this' in static methods refer to the class itself
 217              return new this(brand);
 218          }
 219      },
 220
 221      constructor: function() { ... }
 222 });
 223
 224 var dellComputer = Computer.factory('Dell');
 225 </code></pre>
 226
 227 <p>Also see <a href="Ext.Base.html#statics" rel="Ext.Base#statics" class="docClass">Ext.Base.statics</a> and <a href="Ext.Base.html#self" rel="Ext.Base#self" class="docClass">Ext.Base.self</a> for more details on accessing
 228 static properties within class methods</p>
 229 <div class="members"><div class="m-methods"><a name="methods"></a><div class="definedBy">Defined By</div><h3 class="mth p">Methods</h3><div id="method-getDefaultPreprocessors" class="member f ni"><a href="Ext.Class.html#method-getDefaultPreprocessors" rel="method-getDefaultPreprocessors" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.Class.html" class="definedIn docClass">Ext.Class</a><br/><a href="../source/Class.html#Ext-Class-method-getDefaultPreprocessors" class="viewSource">view source</a></div><a name="getDefaultPreprocessors"></a><a name="method-getDefaultPreprocessors"></a><a href="Ext.Class.html#" rel="method-getDefaultPreprocessors" class="cls expand">getDefaultPreprocessors</a> : Function</div><div class="description"><div class="short"><p>Retrieve the array stack of default pre-processors</p>
 230 </div><div class="long"><p>Retrieve the array stack of default pre-processors</p>
 231 <h3 class="pa">Returns</h3><ul><li><span class="pre">Function</span>&nbsp; &nbsp;<p>defaultPreprocessors</p>
 232 </li></ul></div></div></div><div id="method-getPreprocessor" class="member ni"><a href="Ext.Class.html#method-getPreprocessor" rel="method-getPreprocessor" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.Class.html" class="definedIn docClass">Ext.Class</a><br/><a href="../source/Class.html#Ext-Class-method-getPreprocessor" class="viewSource">view source</a></div><a name="getPreprocessor"></a><a name="method-getPreprocessor"></a><a href="Ext.Class.html#" rel="method-getPreprocessor" class="cls expand">getPreprocessor</a>(
 233 <span class="pre">String name</span>)
 234  : Function</div><div class="description"><div class="short"><p>Retrieve a pre-processor callback function by its name, which has been registered before</p>
 235 </div><div class="long"><p>Retrieve a pre-processor callback function by its name, which has been registered before</p>
 236 <h3 class="pa">Parameters</h3><ul><li><span class="pre">name</span> : String<div class="sub-desc">
 237 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Function</span>&nbsp; &nbsp;<p>preprocessor</p>
 238 </li></ul></div></div></div><div id="method-registerPreprocessor" class="member ni"><a href="Ext.Class.html#method-registerPreprocessor" rel="method-registerPreprocessor" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.Class.html" class="definedIn docClass">Ext.Class</a><br/><a href="../source/Class.html#Ext-Class-method-registerPreprocessor" class="viewSource">view source</a></div><a name="registerPreprocessor"></a><a name="method-registerPreprocessor"></a><a href="Ext.Class.html#" rel="method-registerPreprocessor" class="cls expand">registerPreprocessor</a>(
 239 <span class="pre">String name, Function fn, Object always</span>)
 240  : Ext.Class</div><div class="description"><div class="short"><p>Register a new pre-processor to be used during the class creation process registerPreprocessor</p>
 241 </div><div class="long"><p>Register a new pre-processor to be used during the class creation process registerPreprocessor</p>
 242 <h3 class="pa">Parameters</h3><ul><li><span class="pre">name</span> : String<div class="sub-desc"><p>The pre-processor's name</p>
 243 </div></li><li><span class="pre">fn</span> : Function<div class="sub-desc"><p>The callback function to be executed. Typical format:</p>
 244
 245 <pre><code>function(cls, data, fn) {
 246     // Your code here
 247
 248     // Execute this when the processing is finished.
 249     // Asynchronous processing is perfectly ok
 250     if (fn) {
 251         fn.call(this, cls, data);
 252     }
 253 });
 254 </code></pre>
 255
 256 <p>Passed arguments for this function are:</p>
 257
 258 <ul>
 259 <li><code>{Function} cls</code>: The created class</li>
 260 <li><code>{Object} data</code>: The set of properties passed in <a href="Ext.Class.html" rel="Ext.Class" class="docClass">Ext.Class</a> constructor</li>
 261 <li><code>{Function} fn</code>: The callback function that <b>must</b> to be executed when this pre-processor finishes,
 262 regardless of whether the processing is synchronous or aynchronous</li>
 263 </ul>
 264
 265 </div></li><li><span class="pre">always</span> : Object<div class="sub-desc">
 266 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.Class</span>&nbsp; &nbsp;<p>this</p>
 267 </li></ul></div></div></div><div id="method-setDefaultPreprocessorPosition" class="member ni"><a href="Ext.Class.html#method-setDefaultPreprocessorPosition" rel="method-setDefaultPreprocessorPosition" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.Class.html" class="definedIn docClass">Ext.Class</a><br/><a href="../source/Class.html#Ext-Class-method-setDefaultPreprocessorPosition" class="viewSource">view source</a></div><a name="setDefaultPreprocessorPosition"></a><a name="method-setDefaultPreprocessorPosition"></a><a href="Ext.Class.html#" rel="method-setDefaultPreprocessorPosition" class="cls expand">setDefaultPreprocessorPosition</a>(
 268 <span class="pre">String name, String offset, String relativeName</span>)
 269  : Ext.Class</div><div class="description"><div class="short">Insert this pre-processor at a specific position in the stack, optionally relative to
 270 any existing pre-processor. For...</div><div class="long"><p>Insert this pre-processor at a specific position in the stack, optionally relative to
 271 any existing pre-processor. For example:</p>
 272
 273 <pre><code>Ext.Class.registerPreprocessor('debug', function(cls, data, fn) {
 274     // Your code here
 275
 276     if (fn) {
 277         fn.call(this, cls, data);
 278     }
 279 }).insertDefaultPreprocessor('debug', 'last');
 280 </code></pre>
 281 <h3 class="pa">Parameters</h3><ul><li><span class="pre">name</span> : String<div class="sub-desc"><p>The pre-processor name. Note that it needs to be registered with
 282 <a href="Ext.html#registerPreprocessor" rel="Ext#registerPreprocessor" class="docClass">registerPreprocessor</a> before this</p>
 283 </div></li><li><span class="pre">offset</span> : String<div class="sub-desc"><p>The insertion position. Four possible values are:
 284 'first', 'last', or: 'before', 'after' (relative to the name provided in the third argument)</p>
 285 </div></li><li><span class="pre">relativeName</span> : String<div class="sub-desc">
 286 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.Class</span>&nbsp; &nbsp;<p>this</p>
 287 </li></ul></div></div></div><div id="method-setDefaultPreprocessors" class="member ni"><a href="Ext.Class.html#method-setDefaultPreprocessors" rel="method-setDefaultPreprocessors" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.Class.html" class="definedIn docClass">Ext.Class</a><br/><a href="../source/Class.html#Ext-Class-method-setDefaultPreprocessors" class="viewSource">view source</a></div><a name="setDefaultPreprocessors"></a><a name="method-setDefaultPreprocessors"></a><a href="Ext.Class.html#" rel="method-setDefaultPreprocessors" class="cls expand">setDefaultPreprocessors</a>(
 288 <span class="pre">Array preprocessors</span>)
 289  : Ext.Class</div><div class="description"><div class="short"><p>Set the default array stack of default pre-processors</p>
 290 </div><div class="long"><p>Set the default array stack of default pre-processors</p>
 291 <h3 class="pa">Parameters</h3><ul><li><span class="pre">preprocessors</span> : Array<div class="sub-desc">
 292 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.Class</span>&nbsp; &nbsp;<p>this</p>
 293 </li></ul></div></div></div></div></div></div></div><div id="pageContent"></div></div></div></div></body></html>