src/core/examples/index.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
   2 <html>
   3     <head>
   4         <title>Ext Core 4 Class Example</title>
   5         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   6         <style>
   7             pre { border: 1px gray solid; padding: 5px; margin-top: 30px; }
   8         </style>
   9
  10         <script type="text/javascript" src="../src/Ext.js"></script>
  11         <script type="text/javascript" src="../src/version/Version.js"></script>
  12         <script type="text/javascript" src="../src/lang/String.js"></script>
  13         <script type="text/javascript" src="../src/lang/Array.js"></script>
  14         <script type="text/javascript" src="../src/lang/Number.js"></script>
  15         <script type="text/javascript" src="../src/lang/Date.js"></script>
  16         <script type="text/javascript" src="../src/lang/Object.js"></script>
  17         <script type="text/javascript" src="../src/lang/Function.js"></script>
  18         <script type="text/javascript" src="../src/class/Base.js"></script>
  19         <script type="text/javascript" src="../src/class/Class.js"></script>
  20         <script type="text/javascript" src="../src/class/ClassManager.js"></script>
  21         <script type="text/javascript" src="../src/class/Loader.js"></script>
  22         <script type="text/javascript" src="../src/lang/Error.js"></script>
  23         <script>
  24             Ext.Loader.setConfig({
  25                 enabled: true,
  26                 paths: {
  27                     'Sample': 'src/Sample'
  28                 }
  29             });
  30         </script>
  31         <script>
  32             var sources = {};
  33
  34             function storeCode() {
  35                 var i = 0,
  36                     name,
  37                     pre;
  38
  39                 while (++i) {
  40                     name = 'sample' + i;
  41                     pre = document.getElementById(name);
  42
  43                     if (!pre) {
  44                         break;
  45                     }
  46
  47                     sources[name] = pre.innerHTML;
  48                 }
  49             }
  50
  51             function run(id) {
  52                 eval(sources[id]);
  53             }
  54         </script>
  55     </head>
  56     <body onload="storeCode();">
  57         <pre id="sample1">
  58 Ext.require('Sample.Person', function() {
  59     var aaron = new Sample.Person({
  60         name: 'Aaron Conran',
  61         gender: 'male',
  62         isCool: true
  63     });
  64
  65     alert(aaron.getName()); // 'Aaron Conran'
  66     alert(aaron.getGender()); // 'male'
  67     alert(aaron.getIsCool()); // true
  68
  69     aaron.eat("Salad"); // alerts "I'm eating: Salad"
  70
  71     aaron.setGender('weird');
  72     alert(aaron.getGender()); // 'unknown'
  73 });
  74         </pre>
  75         <p>
  76             <button onclick="run('sample1')">Run Code</button>
  77         </p>
  78
  79         <pre id="sample2">
  80 Ext.require('Sample.Developer', function() {
  81     var tommy = new Sample.Developer({
  82         name: 'Tommy Maintz',
  83         languages: ['PHP', 'JavaScript', 'HTML', 'CSS']
  84     });
  85
  86     tommy.code('Objective-C'); // alerts "I can't code in: Objective-C"
  87     tommy.code('JavaScript'); // alerts "I'm coding in: JavaScript"
  88                               // alerts "I'm eating: Bugs"
  89 });
  90         </pre>
  91         <p>
  92             <button onclick="run('sample2')">Run Code</button>
  93         </p>
  94
  95         <pre id="sample3">
  96 Ext.require('Sample.Musician', function() {
  97     var dave = new Sample.Musician({
  98         name: 'David Kaneda',
  99         isCool: true
 100     });
 101
 102     dave.composeSongs(); // alerts "David Kaneda is composing songs"
 103     dave.playGuitar(); // alerts "David Kaneda is playing guitar"
 104
 105     var anotherDave = Sample.Musician.clone(dave);
 106     alert(anotherDave.getName()); // alerts "David Kaneda"
 107 });
 108         </pre>
 109         <p>
 110             <button onclick="run('sample3')">Run Code</button>
 111         </p>
 112
 113         <pre id="sample4">
 114 Ext.require('Sample.CoolGuy', function() {
 115     var jacky = new Sample.CoolGuy({
 116         name: 'Jacky Nguyen',
 117         isCool: true
 118     });
 119
 120     jacky.playGuitar(); // alerts "Jacky Nguyen is playing guitar"
 121     jacky.sing("Love Me or Die"); // alerts "Ahem..."
 122                                   // alerts "I'm singing: Love Me or Die"
 123 });
 124         </pre>
 125         <p>
 126             <button onclick="run('sample4')">Run Code</button>
 127         </p>
 128
 129         <pre id="sample5">
 130 Ext.require(['Sample.Developer', 'Sample.HumanResource'], function() {
 131     var jacky = new Sample.Developer({
 132             name: 'Jacky Nguyen',
 133             languages: ['PHP', 'JavaScript', 'HTML', 'CSS']
 134         }),
 135         noobie = new Sample.Developer({
 136             name: 'Noobie Dumb',
 137             languages: ['LameScript']
 138         }),
 139         hr = Sample.HumanResource;
 140
 141     hr.recruit(noobie); // alerts "Noobie Dumb doesn't know JavaScript, no point recruiting!"
 142     hr.recruit(jacky);
 143
 144     alert(hr.getDevelopersCount()); // alerts 1
 145 });
 146         </pre>
 147         <p>
 148             <button onclick="run('sample5')">Run Code</button>
 149         </p>
 150
 151         <pre id="sample6">
 152 Ext.require(['Sample.deadlock.A'], function() {
 153     // should throw Error
 154 });
 155         </pre>
 156         <p>
 157             <button onclick="run('sample6')">Run Code</button>
 158         </p>
 159
 160         <pre id="sample7">
 161 Ext.require(['Sample.notdeadlock.A'], function() {
 162     alert("Loading sequence: " + Ext.Loader.history.join(" -> "));
 163 });
 164         </pre>
 165         <p>
 166             <button onclick="run('sample7')">Run Code</button>
 167         </p>
 168
 169         <pre id="sample8">
 170 Ext.require(['Sample.CTO', 'Sample.Developer'], function() {
 171     var abe = new Sample.CTO();
 172     alert(abe.isGeek); // alerts true
 173     alert(abe.isSuperGeek); // alerts true
 174     alert(abe.getAverageIQ()); // alerts 140
 175                                // not the current class
 176
 177     var ape = abe.clone();
 178     alert(Ext.getClassName(ape)); // alerts 'Sample.CTO'
 179
 180     var jacky = new Sample.Developer();
 181     alert(jacky.getAverageIQ()); // alerts 120
 182
 183     var jackie = abe.hireNewDeveloperLike(jacky);
 184     alert(Ext.getClassName(jackie)); // alerts 'Sample.Developer'
 185 });
 186         </pre>
 187         <p>
 188             <button onclick="run('sample8')">Run Code</button>
 189         </p>
 190
 191         <pre id="sample9">
 192 Ext.define('My.own.A', {
 193     statics: {
 194         myName: 'A'
 195     },
 196
 197     constructor: function() {
 198         alert(this.statics().myName);
 199         alert(this.self.myName);
 200     },
 201
 202     clone: function() {
 203         var cloned = new this.self();
 204
 205         cloned.rootName = this.statics().myName;
 206
 207         return cloned;
 208     }
 209 });
 210
 211 Ext.define('My.own.B', {
 212     extend: 'My.own.A',
 213
 214     statics: {
 215         myName: 'B'
 216     },
 217
 218     clone: function() {
 219         var cloned = this.callParent();
 220
 221         cloned.special = true;
 222
 223         return cloned;
 224     }
 225 });
 226
 227 var a = new My.own.A(); // alerts 'A' then alerts 'A'
 228 var b = new My.own.B(); // alerts 'A' then alerts 'B'
 229
 230 var aa = a.clone();
 231 var bb = b.clone();
 232
 233 alert(Ext.getClassName(aa)); // alerts 'My.own.A'
 234 alert(Ext.getClassName(bb)); // alerts 'My.own.B'
 235
 236 alert(aa.rootName); // alerts 'A'
 237 alert(bb.rootName); // alerts 'A'
 238 alert(bb.special); // alerts true
 239         </pre>
 240         <p>
 241             <button onclick="run('sample9')">Run Code</button>
 242         </p>
 243
 244         <pre id="sample10">
 245 Ext.define('My.Cat', {
 246     statics: {
 247         totalCreated: 0,
 248         speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
 249     },
 250
 251     constructor: function() {
 252         var statics = this.statics();
 253
 254         alert(statics.speciesName);     // always equals to 'Cat' no matter what 'this' refers to
 255                                         // equivalent to: My.Cat.speciesName
 256
 257         alert(this.self.speciesName);   // dependent on 'this'
 258
 259         statics.totalCreated++;
 260
 261         return this;
 262     },
 263
 264     clone: function() {
 265         var cloned = new this.self;                      // dependent on 'this'
 266
 267         cloned.groupName = this.statics().speciesName;   // equivalent to: My.Cat.speciesName
 268
 269         return cloned;
 270     }
 271 });
 272
 273
 274 Ext.define('My.SnowLeopard', {
 275     extend: 'My.Cat',
 276
 277     statics: {
 278         speciesName: 'Snow Leopard'     // My.SnowLeopard.speciesName = 'Snow Leopard'
 279     },
 280
 281     constructor: function() {
 282         this.callParent();
 283     }
 284 });
 285
 286 var cat = new My.Cat();                 // alerts 'Cat', then alerts 'Cat'
 287
 288 var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard'
 289
 290 var clone = snowLeopard.clone();
 291 alert(Ext.getClassName(clone));         // alerts 'My.SnowLeopard'
 292 alert(clone.groupName);                 // alerts 'Cat'
 293
 294 alert(My.Cat.totalCreated);             // alerts 3
 295         </pre>
 296         <p>
 297             <button onclick="run('sample10')">Run Code</button>
 298         </p>
 299
 300         <pre id="sample11">
 301 Ext.define('Bank', {
 302     money: '$$$',
 303     printMoney: function() {
 304         alert('$$$$$$$');
 305     }
 306 });
 307
 308 Ext.define('Thief', {});
 309
 310 Thief.borrow(Bank, ['money', 'printMoney']);
 311
 312 var jacky = new Thief();
 313
 314 alert(jacky.money); // alerts '$$$'
 315 jacky.printMoney(); // alerts '$$$$$$$'
 316         </pre>
 317         <p>
 318             <button onclick="run('sample11')">Run Code</button>
 319         </p>
 320     </body>
 321 </html>