--- /dev/null
+<!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]>
+<style type="text/css">.head-band { display: none; }
+.header { border: 0; top: 0; left: 0px; background: url(../header.gif) repeat-x; }
+.doc-tab .members .member a.more { background-color: #efefef; }
+</style><link rel="stylesheet" href="/new/css/ie.css" type="text/css"><![endif]-->
+</head><body id="ext-body" class="iScroll"><div id="notice" class="notice">For up to date documentation and features, visit
+<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">
+
+ req = {
+ liveURL: '.',
+ standAloneMode: true,
+ origDocClass: 'Ext.Class',
+ docClass: 'Ext.Class',
+ docReq: 'Ext.Class',
+ version: '4.0',
+ baseURL: '.',
+ baseDocURL: '.',
+ baseProdURL: '.'
+ };
+
+ clsInfo = {};
+
+
+
+</script>
+
+<script type="text/javascript" src="../search.js"></script>
+<!--script type="text/javascript" src="/new/javascripts/app/examples.js"></script-->
+<script type="text/javascript" src="../class_tree.js"></script>
+<script type="text/javascript" src="../class_doc.js"></script>
+<script type="text/javascript">
+ req.source = 'Class.html#Ext-Class';
+ clsInfo = {"methods":["getDefaultPreprocessors","getPreprocessor","registerPreprocessor","setDefaultPreprocessorPosition","setDefaultPreprocessors"],"cfgs":[],"properties":[],"events":[],"subclasses":[]};
+ Ext.onReady(function() {
+ Ext.create('Docs.classPanel');
+ });
+</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
+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>
+to enable namespacing and dynamic dependency resolution.</p>
+
+<h1>Basic syntax:</h1>
+
+<pre class="prettyprint"><code>Ext.define(className, properties);
+</code></pre>
+
+<p>in which <code>properties</code> is an object represent a collection of properties that apply to the class. See
+<a href="Ext.ClassManager.html#create" rel="Ext.ClassManager#create" class="docClass">Ext.ClassManager.create</a> for more detailed instructions.</p>
+
+<pre class="prettyprint"><code>Ext.define('Person', {
+ name: 'Unknown',
+
+ constructor: function(name) {
+ if (name) {
+ this.name = name;
+ }
+
+ return this;
+ },
+
+ eat: function(foodType) {
+ alert("I'm eating: " + foodType);
+
+ return this;
+ }
+});
+
+var aaron = new Person("Aaron");
+aaron.eat("Sandwich"); // alert("I'm eating: Sandwich");
+</code></pre>
+
+<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
+everything related to class creation, including but not limited to inheritance, mixins, configuration, statics, etc.</p>
+
+<h1>Inheritance:</h1>
+
+<pre class="prettyprint"><code>Ext.define('Developer', {
+ extend: 'Person',
+
+ constructor: function(name, isGeek) {
+ this.isGeek = isGeek;
+
+ // Apply a method from the parent class' prototype
+ this.callParent([name]);
+
+ return this;
+
+ },
+
+ code: function(language) {
+ alert("I'm coding in: " + language);
+
+ this.eat("Bugs");
+
+ return this;
+ }
+});
+
+var jacky = new Developer("Jacky", true);
+jacky.code("JavaScript"); // alert("I'm coding in: JavaScript");
+ // alert("I'm eating: Bugs");
+</code></pre>
+
+<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>
+
+<h1>Mixins:</h1>
+
+<pre class="prettyprint"><code>Ext.define('CanPlayGuitar', {
+ playGuitar: function() {
+ alert("F#...G...D...A");
+ }
+});
+
+Ext.define('CanComposeSongs', {
+ composeSongs: function() { ... }
+});
+
+Ext.define('CanSing', {
+ sing: function() {
+ alert("I'm on the highway to hell...")
+ }
+});
+
+Ext.define('Musician', {
+ extend: 'Person',
+
+ mixins: {
+ canPlayGuitar: 'CanPlayGuitar',
+ canComposeSongs: 'CanComposeSongs',
+ canSing: 'CanSing'
+ }
+})
+
+Ext.define('CoolPerson', {
+ extend: 'Person',
+
+ mixins: {
+ canPlayGuitar: 'CanPlayGuitar',
+ canSing: 'CanSing'
+ },
+
+ sing: function() {
+ alert("Ahem....");
+
+ this.mixins.canSing.sing.call(this);
+
+ alert("[Playing guitar at the same time...]");
+
+ this.playGuitar();
+ }
+});
+
+var me = new CoolPerson("Jacky");
+
+me.sing(); // alert("Ahem...");
+ // alert("I'm on the highway to hell...");
+ // alert("[Playing guitar at the same time...]");
+ // alert("F#...G...D...A");
+</code></pre>
+
+<h1>Config:</h1>
+
+<pre class="prettyprint"><code>Ext.define('SmartPhone', {
+ config: {
+ hasTouchScreen: false,
+ operatingSystem: 'Other',
+ price: 500
+ },
+
+ isExpensive: false,
+
+ constructor: function(config) {
+ this.initConfig(config);
+
+ return this;
+ },
+
+ applyPrice: function(price) {
+ this.isExpensive = (price > 500);
+
+ return price;
+ },
+
+ applyOperatingSystem: function(operatingSystem) {
+ if (!(/^(iOS|Android|BlackBerry)$/i).test(operatingSystem)) {
+ return 'Other';
+ }
+
+ return operatingSystem;
+ }
+});
+
+var iPhone = new SmartPhone({
+ hasTouchScreen: true,
+ operatingSystem: 'iOS'
+});
+
+iPhone.getPrice(); // 500;
+iPhone.getOperatingSystem(); // 'iOS'
+iPhone.getHasTouchScreen(); // true;
+iPhone.hasTouchScreen(); // true
+
+iPhone.isExpensive; // false;
+iPhone.setPrice(600);
+iPhone.getPrice(); // 600
+iPhone.isExpensive; // true;
+
+iPhone.setOperatingSystem('AlienOS');
+iPhone.getOperatingSystem(); // 'Other'
+</code></pre>
+
+<h1>Statics:</h1>
+
+<pre class="prettyprint"><code>Ext.define('Computer', {
+ statics: {
+ factory: function(brand) {
+ // 'this' in static methods refer to the class itself
+ return new this(brand);
+ }
+ },
+
+ constructor: function() { ... }
+});
+
+var dellComputer = Computer.factory('Dell');
+</code></pre>
+
+<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
+static properties within class methods</p>
+<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> </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>
+</div><div class="long"><p>Retrieve the array stack of default pre-processors</p>
+<h3 class="pa">Returns</h3><ul><li><span class="pre">Function</span> <p>defaultPreprocessors</p>
+</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> </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>(
+<span class="pre">String name</span>)
+ : Function</div><div class="description"><div class="short"><p>Retrieve a pre-processor callback function by its name, which has been registered before</p>
+</div><div class="long"><p>Retrieve a pre-processor callback function by its name, which has been registered before</p>
+<h3 class="pa">Parameters</h3><ul><li><span class="pre">name</span> : String<div class="sub-desc">
+</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Function</span> <p>preprocessor</p>
+</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> </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>(
+<span class="pre">String name, Function fn, Object always</span>)
+ : 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>
+</div><div class="long"><p>Register a new pre-processor to be used during the class creation process registerPreprocessor</p>
+<h3 class="pa">Parameters</h3><ul><li><span class="pre">name</span> : String<div class="sub-desc"><p>The pre-processor's name</p>
+</div></li><li><span class="pre">fn</span> : Function<div class="sub-desc"><p>The callback function to be executed. Typical format:</p>
+
+<pre><code>function(cls, data, fn) {
+ // Your code here
+
+ // Execute this when the processing is finished.
+ // Asynchronous processing is perfectly ok
+ if (fn) {
+ fn.call(this, cls, data);
+ }
+});
+</code></pre>
+
+<p>Passed arguments for this function are:</p>
+
+<ul>
+<li><code>{Function} cls</code>: The created class</li>
+<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>
+<li><code>{Function} fn</code>: The callback function that <b>must</b> to be executed when this pre-processor finishes,
+regardless of whether the processing is synchronous or aynchronous</li>
+</ul>
+
+</div></li><li><span class="pre">always</span> : Object<div class="sub-desc">
+</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.Class</span> <p>this</p>
+</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> </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>(
+<span class="pre">String name, String offset, String relativeName</span>)
+ : Ext.Class</div><div class="description"><div class="short">Insert this pre-processor at a specific position in the stack, optionally relative to
+any existing pre-processor. For...</div><div class="long"><p>Insert this pre-processor at a specific position in the stack, optionally relative to
+any existing pre-processor. For example:</p>
+
+<pre><code>Ext.Class.registerPreprocessor('debug', function(cls, data, fn) {
+ // Your code here
+
+ if (fn) {
+ fn.call(this, cls, data);
+ }
+}).insertDefaultPreprocessor('debug', 'last');
+</code></pre>
+<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
+<a href="Ext.html#registerPreprocessor" rel="Ext#registerPreprocessor" class="docClass">registerPreprocessor</a> before this</p>
+</div></li><li><span class="pre">offset</span> : String<div class="sub-desc"><p>The insertion position. Four possible values are:
+'first', 'last', or: 'before', 'after' (relative to the name provided in the third argument)</p>
+</div></li><li><span class="pre">relativeName</span> : String<div class="sub-desc">
+</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.Class</span> <p>this</p>
+</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> </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>(
+<span class="pre">Array preprocessors</span>)
+ : Ext.Class</div><div class="description"><div class="short"><p>Set the default array stack of default pre-processors</p>
+</div><div class="long"><p>Set the default array stack of default pre-processors</p>
+<h3 class="pa">Parameters</h3><ul><li><span class="pre">preprocessors</span> : Array<div class="sub-desc">
+</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.Class</span> <p>this</p>
+</li></ul></div></div></div></div></div></div></div><div id="pageContent"></div></div></div></div></body></html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff