<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ext Core 4 Class Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
pre { border: 1px gray solid; padding: 5px; margin-top: 30px; }
</style>
<script type="text/javascript" src="../src/Ext.js"></script>
<script type="text/javascript" src="../src/version/Version.js"></script>
<script type="text/javascript" src="../src/lang/String.js"></script>
<script type="text/javascript" src="../src/lang/Array.js"></script>
<script type="text/javascript" src="../src/lang/Number.js"></script>
<script type="text/javascript" src="../src/lang/Date.js"></script>
<script type="text/javascript" src="../src/lang/Object.js"></script>
<script type="text/javascript" src="../src/lang/Function.js"></script>
<script type="text/javascript" src="../src/class/Base.js"></script>
<script type="text/javascript" src="../src/class/Class.js"></script>
<script type="text/javascript" src="../src/class/ClassManager.js"></script>
<script type="text/javascript" src="../src/class/Loader.js"></script>
<script type="text/javascript" src="../src/lang/Error.js"></script>
<script>
Ext.Loader.setConfig({
enabled: true,
paths: {
'Sample': 'src/Sample'
}
});
</script>
<script>
var sources = {};
function storeCode() {
var i = 0,
name,
pre;
while (++i) {
name = 'sample' + i;
pre = document.getElementById(name);
if (!pre) {
break;
}
sources[name] = pre.innerHTML;
}
}
function run(id) {
eval(sources[id]);
}
</script>
</head>
<body onload="storeCode();">
<pre id="sample1">
Ext.require('Sample.Person', function() {
var aaron = new Sample.Person({
name: 'Aaron Conran',
gender: 'male',
isCool: true
});
alert(aaron.getName()); // 'Aaron Conran'
alert(aaron.getGender()); // 'male'
alert(aaron.getIsCool()); // true
aaron.eat("Salad"); // alerts "I'm eating: Salad"
aaron.setGender('weird');
alert(aaron.getGender()); // 'unknown'
});
</pre>
<p>
<button onclick="run('sample1')">Run Code</button>
</p>
<pre id="sample2">
Ext.require('Sample.Developer', function() {
var tommy = new Sample.Developer({
name: 'Tommy Maintz',
languages: ['PHP', 'JavaScript', 'HTML', 'CSS']
});
tommy.code('Objective-C'); // alerts "I can't code in: Objective-C"
tommy.code('JavaScript'); // alerts "I'm coding in: JavaScript"
// alerts "I'm eating: Bugs"
});
</pre>
<p>
<button onclick="run('sample2')">Run Code</button>
</p>
<pre id="sample3">
Ext.require('Sample.Musician', function() {
var dave = new Sample.Musician({
name: 'David Kaneda',
isCool: true
});
dave.composeSongs(); // alerts "David Kaneda is composing songs"
dave.playGuitar(); // alerts "David Kaneda is playing guitar"
var anotherDave = Sample.Musician.clone(dave);
alert(anotherDave.getName()); // alerts "David Kaneda"
});
</pre>
<p>
<button onclick="run('sample3')">Run Code</button>
</p>
<pre id="sample4">
Ext.require('Sample.CoolGuy', function() {
var jacky = new Sample.CoolGuy({
name: 'Jacky Nguyen',
isCool: true
});
jacky.playGuitar(); // alerts "Jacky Nguyen is playing guitar"
jacky.sing("Love Me or Die"); // alerts "Ahem..."
// alerts "I'm singing: Love Me or Die"
});
</pre>
<p>
<button onclick="run('sample4')">Run Code</button>
</p>
<pre id="sample5">
Ext.require(['Sample.Developer', 'Sample.HumanResource'], function() {
var jacky = new Sample.Developer({
name: 'Jacky Nguyen',
languages: ['PHP', 'JavaScript', 'HTML', 'CSS']
}),
noobie = new Sample.Developer({
name: 'Noobie Dumb',
languages: ['LameScript']
}),
hr = Sample.HumanResource;
hr.recruit(noobie); // alerts "Noobie Dumb doesn't know JavaScript, no point recruiting!"
hr.recruit(jacky);
alert(hr.getDevelopersCount()); // alerts 1
});
</pre>
<p>
<button onclick="run('sample5')">Run Code</button>
</p>
<pre id="sample6">
Ext.require(['Sample.deadlock.A'], function() {
// should throw Error
});
</pre>
<p>
<button onclick="run('sample6')">Run Code</button>
</p>
<pre id="sample7">
Ext.require(['Sample.notdeadlock.A'], function() {
alert("Loading sequence: " + Ext.Loader.history.join(" -> "));
});
</pre>
<p>
<button onclick="run('sample7')">Run Code</button>
</p>
<pre id="sample8">
Ext.require(['Sample.CTO', 'Sample.Developer'], function() {
var abe = new Sample.CTO();
alert(abe.isGeek); // alerts true
alert(abe.isSuperGeek); // alerts true
alert(abe.getAverageIQ()); // alerts 140
// not the current class
var ape = abe.clone();
alert(Ext.getClassName(ape)); // alerts 'Sample.CTO'
var jacky = new Sample.Developer();
alert(jacky.getAverageIQ()); // alerts 120
var jackie = abe.hireNewDeveloperLike(jacky);
alert(Ext.getClassName(jackie)); // alerts 'Sample.Developer'
});
</pre>
<p>
<button onclick="run('sample8')">Run Code</button>
</p>
<pre id="sample9">
Ext.define('My.own.A', {
statics: {
myName: 'A'
},
constructor: function() {
alert(this.statics().myName);
alert(this.self.myName);
},
clone: function() {
var cloned = new this.self();
cloned.rootName = this.statics().myName;
return cloned;
}
});
Ext.define('My.own.B', {
extend: 'My.own.A',
statics: {
myName: 'B'
},
clone: function() {
var cloned = this.callParent();
cloned.special = true;
return cloned;
}
});
var a = new My.own.A(); // alerts 'A' then alerts 'A'
var b = new My.own.B(); // alerts 'A' then alerts 'B'
var aa = a.clone();
var bb = b.clone();
alert(Ext.getClassName(aa)); // alerts 'My.own.A'
alert(Ext.getClassName(bb)); // alerts 'My.own.B'
alert(aa.rootName); // alerts 'A'
alert(bb.rootName); // alerts 'A'
alert(bb.special); // alerts true
</pre>
<p>
<button onclick="run('sample9')">Run Code</button>
</p>
<pre id="sample10">
Ext.define('My.Cat', {
statics: {
totalCreated: 0,
speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
},
constructor: function() {
var statics = this.statics();
alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to
// equivalent to: My.Cat.speciesName
alert(this.self.speciesName); // dependent on 'this'
statics.totalCreated++;
return this;
},
clone: function() {
var cloned = new this.self; // dependent on 'this'
cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName
return cloned;
}
});
Ext.define('My.SnowLeopard', {
extend: 'My.Cat',
statics: {
speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard'
},
constructor: function() {
this.callParent();
}
});
var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat'
var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard'
var clone = snowLeopard.clone();
alert(Ext.getClassName(clone)); // alerts 'My.SnowLeopard'
alert(clone.groupName); // alerts 'Cat'
alert(My.Cat.totalCreated); // alerts 3
</pre>
<p>
<button onclick="run('sample10')">Run Code</button>
</p>
<pre id="sample11">
Ext.define('Bank', {
money: '$$$',
printMoney: function() {
alert('$$$$$$$');
}
});
Ext.define('Thief', {});
Thief.borrow(Bank, ['money', 'printMoney']);
var jacky = new Thief();
alert(jacky.money); // alerts '$$$'
jacky.printMoney(); // alerts '$$$$$$$'
</pre>
<p>
<button onclick="run('sample11')">Run Code</button>
</p>
</body>
</html>