网站开发技术与开发环境,网站建设龙华,上海纯设计公司,flash互动网站开发EXTJS的面向对象程序设计◆EXTJS在面向对象作出的努力支持命名空间支持类实例属性支持类实例方法支持类静态方法支持构造方法支持类继承支持类实例方法重写支持命名空间别名支持类别名支持事件队列命名空间定义#xff1a;对于类的组织定义方式代码举例#xff1a; view plai…EXTJS的面向对象程序设计◆EXTJS在面向对象作出的努力支持命名空间支持类实例属性支持类实例方法支持类静态方法支持构造方法支持类继承支持类实例方法重写支持命名空间别名支持类别名支持事件队列命名空间定义对于类的组织定义方式代码举例 view plain copy to clipboard print ? Ext.namespace(Ext.dojochina); Ext.namespace(Ext.dojochina);Java代码对照 view plain copy to clipboard print ? package Ext.dojochina; package Ext.dojochina;完整示例代码view view plain copy to clipboard print ? // namespace.js Ext.namespace(Ext.dojochina); Ext.dojochina.HelloWorld Ext.emptyFn; // namespace.js
Ext.namespace(Ext.dojochina);
Ext.dojochina.HelloWorld Ext.emptyFn;
view plain copy to clipboard print ? html xmlnshttp://www.w3.org/1999/xhtml head meta http-equivContent-Type contenttext/html; charsetutf-8 / title命名空间/title link relstylesheet typetext/css href../extjs/resources/css/ext-all.css / script typetext/javascript src../extjs/adapter/ext/ext-base.js/script script typetext/javascript src../extjs/ext-all.js/script script typetext/javascript srcnamespace.js/script script typetext/javascript new Ext.dojochina.HelloWorld(); /script /head body /body /html html xmlnshttp://www.w3.org/1999/xhtml
head
meta http-equivContent-Type contenttext/html; charsetutf-8 /
title命名空间/title
link relstylesheet typetext/css href../extjs/resources/css/ext-all.css /
script typetext/javascript src../extjs/adapter/ext/ext-base.js/script
script typetext/javascript src../extjs/ext-all.js/script
script typetext/javascript srcnamespace.js/script
script typetext/javascript
new Ext.dojochina.HelloWorld();
/script
/head
body
/body
/html类实例属性定义对于一个实例的特征描述。代码举例 view plain copy to clipboard print ? ... Ext.apply(Ext.dojochina.Person.prototype, { name: 陈治文 }); ...
Ext.apply(Ext.dojochina.Person.prototype, {
name: 陈治文
});Java代码对照 view plain copy to clipboard print ? ... private String name 陈治文; public void setName(String name){ this.name name; } public String getName(){ return this.name } ... ...
private String name 陈治文;
public void setName(String name){
this.name name;
}
public String getName(){
return this.name
}
...完整示例代码view view plain copy to clipboard print ? // property.js Ext.namespace(Ext.dojochina); Ext.dojochina.Person Ext.emptyFn; Ext.apply(Ext.dojochina.Person.prototype, {name: MacroChin}); // property.js
Ext.namespace(Ext.dojochina);
Ext.dojochina.Person Ext.emptyFn;
Ext.apply(Ext.dojochina.Person.prototype, {name: MacroChin});
view plain copy to clipboard print ? html xmlnshttp://www.w3.org/1999/xhtml head meta http-equivContent-Type contenttext/html; charsetutf-8 / title类实例属性/title link relstylesheet typetext/css href../extjs/resources/css/ext-all.css / script typetext/javascript src../extjs/adapter/ext/ext-base.js/script script typetext/javascript src../extjs/ext-all.js/script script typetext/javascript srcproperty.js/script script typetext/javascript var personnew Ext.dojochina.Person(); alert(person.name); person.nameAotherPerson; alert(person.name); /script /head body /body /html html xmlnshttp://www.w3.org/1999/xhtml
head
meta http-equivContent-Type contenttext/html; charsetutf-8 /
title类实例属性/title
link relstylesheet typetext/css href../extjs/resources/css/ext-all.css /
script typetext/javascript src../extjs/adapter/ext/ext-base.js/script
script typetext/javascript src../extjs/ext-all.js/script
script typetext/javascript srcproperty.js/script
script typetext/javascript
var personnew Ext.dojochina.Person();
alert(person.name);
person.nameAotherPerson;
alert(person.name);
/script
/head
body
/body
/html类实例方法定义一个对象所能具有的功能与动作。代码举例 view plain copy to clipboard print ? ... print: function(){ alert(String.format(姓名:{0},性别:{1}, this.name, this.sex)); } ...
print: function(){
alert(String.format(姓名:{0},性别:{1}, this.name, this.sex));
}Java代码对照 view plain copy to clipboard print ? ... public void print(){ System.out.printf(姓名:%s,性别:%s, this.name, this.sex); } ...
public void print(){
System.out.printf(姓名:%s,性别:%s, this.name, this.sex);
}完整示例代码view view plain copy to clipboard print ? // dynamicMethod.js Ext.namespace(Ext.dojochina); Ext.dojochina.Person Ext.emptyFn; Ext.apply(Ext.dojochina.Person.prototype, { name: , sex: , print: function(){ alert(String.format(姓名{0}性别{1}, this.name, this.sex)); } }); // dynamicMethod.js
Ext.namespace(Ext.dojochina);
Ext.dojochina.Person Ext.emptyFn;
Ext.apply(Ext.dojochina.Person.prototype, {
name: ,
sex: ,
print: function(){
alert(String.format(姓名{0}性别{1}, this.name, this.sex));
}
});
view plain copy to clipboard print ? html xmlnshttp://www.w3.org/1999/xhtml head meta http-equivContent-Type contenttext/html; charsetutf-8 / title类实例方法/title link relstylesheet typetext/css href../extjs/resources/css/ext-all.css / script typetext/javascript src../extjs/adapter/ext/ext-base.js/script script typetext/javascript src../extjs/ext-all.js/script script typetext/javascript srcdynamicMethod.js/script script typetext/javascript var person new Ext.dojochina.Person(); person.name MacroChin; person.sex 男; person.print(); person.name Ann; person.sex 女; person.print(); /script /head body /body /html html xmlnshttp://www.w3.org/1999/xhtml
head
meta http-equivContent-Type contenttext/html; charsetutf-8 /
title类实例方法/title
link relstylesheet typetext/css href../extjs/resources/css/ext-all.css /
script typetext/javascript src../extjs/adapter/ext/ext-base.js/script
script typetext/javascript src../extjs/ext-all.js/script
script typetext/javascript srcdynamicMethod.js/script
script typetext/javascript
var person new Ext.dojochina.Person();
person.name MacroChin;
person.sex 男;
person.print();
person.name Ann;
person.sex 女;
person.print();
/script
/head
body
/body
/html
类静态方法定义在一个类级别上共享的方法。代码举例 view plain copy to clipboard print ? ... Ext.dojochina.Person.print function(name, sex){ var p new Ext.dojochina.Person(); p.name name; p.sex sex; p.print(); } ...
Ext.dojochina.Person.print function(name, sex){
var p new Ext.dojochina.Person();
p.name name;
p.sex sex;
p.print();
}Java代码对照 view plain copy to clipboard print ? ... public static void print(String name, String sex){ Person person new Person(); person.setName(name); person.setSex(sex); person.print(); } ...
public static void print(String name, String sex){
Person person new Person();
person.setName(name);
person.setSex(sex);
person.print();
}完整示例代码view view plain copy to clipboard print ? // staticMethod.js Ext.namespace(Ext.dojochina); Ext.dojochina.Person Ext.emptyFn; Ext.dojochina.Person.print function(name, sex){ var p new Ext.dojochina.Person(); p.name name; p.sex sex; p.print(); } Ext.apply(Ext.dojochina.Person.prototype, { name: , sex: , print: function(){ alert(String.format(姓名{0}性别{1}, this.name, this.sex)); } }); // staticMethod.js
Ext.namespace(Ext.dojochina);
Ext.dojochina.Person Ext.emptyFn;
Ext.dojochina.Person.print function(name, sex){
var p new Ext.dojochina.Person();
p.name name;
p.sex sex;
p.print();
}
Ext.apply(Ext.dojochina.Person.prototype, {
name: ,
sex: ,
print: function(){
alert(String.format(姓名{0}性别{1}, this.name, this.sex));
}
});
view plain copy to clipboard print ? html xmlnshttp://www.w3.org/1999/xhtml head meta http-equivContent-Type contenttext/html; charsetutf-8 / title类静态方法/title link relstylesheet typetext/css href../extjs/resources/css/ext-all.css / script typetext/javascript src../extjs/adapter/ext/ext-base.js/script script typetext/javascript src../extjs/ext-all.js/script script typetext/javascript srcstaticMethod.js/script script typetext/javascript Ext.dojochina.Person.print(MacroChin, 男); Ext.dojochina.Person.print(Ann, 女); /script /head body /body /html html xmlnshttp://www.w3.org/1999/xhtml
head
meta http-equivContent-Type contenttext/html; charsetutf-8 /
title类静态方法/title
link relstylesheet typetext/css href../extjs/resources/css/ext-all.css /
script typetext/javascript src../extjs/adapter/ext/ext-base.js/script
script typetext/javascript src../extjs/ext-all.js/script
script typetext/javascript srcstaticMethod.js/script
script typetext/javascript
Ext.dojochina.Person.print(MacroChin, 男);
Ext.dojochina.Person.print(Ann, 女);
/script
/head
body
/body
/html
构造方法定义在初始化一个对象的同时执行的方法。代码举例 view plain copy to clipboard print ? Ext.dojochina.Person function(_cfg){ Ext.apply(this, _cfg); } Ext.dojochina.Person function(_cfg){
Ext.apply(this, _cfg);
}Java代码对照 view plain copy to clipboard print ? ... public Person(String name, String sex){ this.name name; this.sex sex; } ... ...
public Person(String name, String sex){
this.name name;
this.sex sex;
}
...完整示例代码view view plain copy to clipboard print ? // initialize.js Ext.namespace(Ext.dojochina); Ext.dojochina.Person function(_cfg){ Ext.apply(this, _cfg); } Ext.dojochina.Person.print function(name, sex){ var person new Ext.dojochina.Person({name: name, sex:sex}); person.print(); } Ext.apply(Ext.dojochina.Person.prototype, { print: function(){ alert(String.format(Name:{0} Sex:{1}, this.name, this.sex)); } }) // initialize.js
Ext.namespace(Ext.dojochina);
Ext.dojochina.Person function(_cfg){
Ext.apply(this, _cfg);
}
Ext.dojochina.Person.print function(name, sex){
var person new Ext.dojochina.Person({name: name, sex:sex});
person.print();
}
Ext.apply(Ext.dojochina.Person.prototype, {
print: function(){
alert(String.format(Name:{0} Sex:{1}, this.name, this.sex));
}
})
view plain copy to clipboard print ? html xmlnshttp://www.w3.org/1999/xhtml head meta http-equivContent-Type contenttext/html; charsetutf-8 / title构造方法/title link relstylesheet typetext/css href../extjs/resources/css/ext-all.css / script typetext/javascript src../extjs/adapter/ext/ext-base.js/script script typetext/javascript src../extjs/ext-all.js/script script typetext/javascript srcinitialize.js/script script typetext/javascript Ext.dojochina.Person.print(PersonA, 女); Ext.dojochina.Person.print(PersonB, 男); /script /head body /body /html html xmlnshttp://www.w3.org/1999/xhtml
head
meta http-equivContent-Type contenttext/html; charsetutf-8 /
title构造方法/title
link relstylesheet typetext/css href../extjs/resources/css/ext-all.css /
script typetext/javascript src../extjs/adapter/ext/ext-base.js/script
script typetext/javascript src../extjs/ext-all.js/script
script typetext/javascript srcinitialize.js/script
script typetext/javascript
Ext.dojochina.Person.print(PersonA, 女);
Ext.dojochina.Person.print(PersonB, 男);
/script
/head
body
/body
/html
类继承定义对于类的一种扩展形式。代码举例 view plain copy to clipboard print ? Ext.extend(Ext.dojochina,Strudent, Ext.dojochina.Person, { job: 学生 } ); Ext.extend(Ext.dojochina,Strudent,
Ext.dojochina.Person, {
job: 学生
}
);Java代码比照 view plain copy to clipboard print ? class Student extend Person{ public Student(String name, String sex){ super(name, sex); this.setJob(学生); } } class Student extend Person{
public Student(String name, String sex){
super(name, sex);
this.setJob(学生);
}
}完整示例代码view view plain copy to clipboard print ? // Person.js Ext.namespace(Ext.dojochina); Ext.dojochina.Person function(_cfg){Ext.apply(this, _cfg)}; Ext.apply(Ext.dojochina.Person.prototype, { job: 无, print: function(){ alert(String.format(姓名{0} 性别{1} 角色{2}, this.name, this.sex, this.job)); } }); // Person.js
Ext.namespace(Ext.dojochina);
Ext.dojochina.Person function(_cfg){Ext.apply(this, _cfg)};
Ext.apply(Ext.dojochina.Person.prototype, {
job: 无,
print: function(){
alert(String.format(姓名{0} 性别{1} 角色{2}, this.name, this.sex, this.job));
}
});
view plain copy to clipboard print ? // Teacher.js Ext.namespace(Ext.dojochina); Ext.dojochina.Teacher function(_cfg){Ext.apply(this, _cfg);}; Ext.extend(Ext.dojochina.Teacher, Ext.dojochina.Person, {job: 教师}); // Teacher.js
Ext.namespace(Ext.dojochina);
Ext.dojochina.Teacher function(_cfg){Ext.apply(this, _cfg);};
Ext.extend(Ext.dojochina.Teacher, Ext.dojochina.Person, {job: 教师});
view plain copy to clipboard print ? // Student.js Ext.namespace(Ext.dojochina); Ext.dojochina.Student function(_cfg){Ext.apply(this, _cfg);}; Ext.extend(Ext.dojochina.Student, Ext.dojochina.Person, {job: 学生}); // Student.js
Ext.namespace(Ext.dojochina);
Ext.dojochina.Student function(_cfg){Ext.apply(this, _cfg);};
Ext.extend(Ext.dojochina.Student, Ext.dojochina.Person, {job: 学生});
view plain copy to clipboard print ? html xmlnshttp://www.w3.org/1999/xhtml head meta http-equivContent-Type contenttext/html; charsetutf-8 / title类继承/title link relstylesheet typetext/css href../extjs/resources/css/ext-all.css / script typetext/javascript src../extjs/adapter/ext/ext-base.js/script script typetext/javascript src../extjs/ext-all.js/script script typetext/javascript srcPerson.js/script script typetext/javascript srcTeacher.js/script script typetext/javascript srcStudent.js/script script typetext/javascript var t new Ext.dojochina.Teacher({name:老师A, sex:女}); t.print(); var s new Ext.dojochina.Student({name:学生B, sex:男}); s.print(); /script /head body /body /html html xmlnshttp://www.w3.org/1999/xhtml
head
meta http-equivContent-Type contenttext/html; charsetutf-8 /
title类继承/title
link relstylesheet typetext/css href../extjs/resources/css/ext-all.css /
script typetext/javascript src../extjs/adapter/ext/ext-base.js/script
script typetext/javascript src../extjs/ext-all.js/script
script typetext/javascript srcPerson.js/script
script typetext/javascript srcTeacher.js/script
script typetext/javascript srcStudent.js/script
script typetext/javascript
var t new Ext.dojochina.Teacher({name:老师A, sex:女});
t.print();
var s new Ext.dojochina.Student({name:学生B, sex:男});
s.print();
/script
/head
body
/body
/html
类实例方法重写定义子类在继承父类时对其已经存在的方法进行重新定义。代码举例 view plain copy to clipboard print ? Ext.extend(Ext.dojochina.Teacher, Ext.dojochina.Person, { print: function(){ alert(String.format({0}是一位{1}老师, this.name, this.sex)); } } ); Ext.extend(Ext.dojochina.Teacher,
Ext.dojochina.Person, {
print: function(){
alert(String.format({0}是一位{1}老师, this.name, this.sex));
}
}
);完整示例代码view view plain copy to clipboard print ? // Person.js Ext.namespace(Ext.dojochina); Ext.dojochina.Person function(_cfg){Ext.apply(this, _cfg)}; Ext.apply(Ext.dojochina.Person.prototype, { job: 无, print: function(){ alert(String.format(姓名{0} 性别{1} 角色{2}, this.name, this.sex, this.job)); } }); // Person.js
Ext.namespace(Ext.dojochina);
Ext.dojochina.Person function(_cfg){Ext.apply(this, _cfg)};
Ext.apply(Ext.dojochina.Person.prototype, {
job: 无,
print: function(){
alert(String.format(姓名{0} 性别{1} 角色{2}, this.name, this.sex, this.job));
}
});
view plain copy to clipboard print ? // teacher_.js Ext.namespace(Ext.dojochina); Ext.dojochina.Teacher function(_cfg){Ext.apply(this, _cfg);}; Ext.extend(Ext.dojochina.Teacher, Ext.dojochina.Person, { print: function(){ alert(String.format({0}是一位{1}老师, this.name, this.sex)); } }); // teacher_.js
Ext.namespace(Ext.dojochina);
Ext.dojochina.Teacher function(_cfg){Ext.apply(this, _cfg);};
Ext.extend(Ext.dojochina.Teacher, Ext.dojochina.Person, {
print: function(){
alert(String.format({0}是一位{1}老师, this.name, this.sex));
}
});
view plain copy to clipboard print ? // student_.js Ext.namespace(Ext.dojochina); Ext.dojochina.Student function(_cfg){Ext.apply(this, _cfg);}; Ext.extend(Ext.dojochina.Student, Ext.dojochina.Person, { print: function(){ alert(String.format({0}是一位{1}学生, this.name, this.sex)); } }); // student_.js
Ext.namespace(Ext.dojochina);
Ext.dojochina.Student function(_cfg){Ext.apply(this, _cfg);};
Ext.extend(Ext.dojochina.Student, Ext.dojochina.Person, {
print: function(){
alert(String.format({0}是一位{1}学生, this.name, this.sex));
}
});
view plain copy to clipboard print ? html xmlnshttp://www.w3.org/1999/xhtml head meta http-equivContent-Type contenttext/html; charsetutf-8 / title类方法重写/title link relstylesheet typetext/css href../extjs/resources/css/ext-all.css / script typetext/javascript src../extjs/adapter/ext/ext-base.js/script script typetext/javascript src../extjs/ext-all.js/script script typetext/javascript srcPerson.js/script script typetext/javascript srcteacher_.js/script script typetext/javascript srcstudent_.js/script script typetext/javascript var p new Ext.dojochina.Person({name:PersonX, sex: 男}); p.print(); var t new Ext.dojochina.Teacher({name:老师A, sex:女}); t.print(); var s new Ext.dojochina.Student({name:学生B, sex:男}); s.print(); /script /head body /body /html html xmlnshttp://www.w3.org/1999/xhtml
head
meta http-equivContent-Type contenttext/html; charsetutf-8 /
title类方法重写/title
link relstylesheet typetext/css href../extjs/resources/css/ext-all.css /
script typetext/javascript src../extjs/adapter/ext/ext-base.js/script
script typetext/javascript src../extjs/ext-all.js/script
script typetext/javascript srcPerson.js/script
script typetext/javascript srcteacher_.js/script
script typetext/javascript srcstudent_.js/script
script typetext/javascript
var p new Ext.dojochina.Person({name:PersonX, sex: 男});
p.print();
var t new Ext.dojochina.Teacher({name:老师A, sex:女});
t.print();
var s new Ext.dojochina.Student({name:学生B, sex:男});
s.print();
/script
/head
body
/body
/html
命名空间别名定义对于命名空间的别称。(别名首字母要大写)代码举例 view plain copy to clipboard print ? Dc Ext.dojochina; Dc Ext.dojochina;完整示例代码view view plain copy to clipboard print ? // namespaceShort.js Ext.namespace(Ext.dojochina); Dc Ext.dojochina; Dc.Person function(_cfg){Ext.apply(this, _cfg);}; Dc.Person.print function(name, sex){ var p new Dc.Person({name: name , sex: sex}); p.print(); } Ext.apply(Dc.Person.prototype,{ print: function(){ alert(String.format(姓名{0}, 性别{1}, this.name, this.sex)); } }); // namespaceShort.js
Ext.namespace(Ext.dojochina);
Dc Ext.dojochina;
Dc.Person function(_cfg){Ext.apply(this, _cfg);};
Dc.Person.print function(name, sex){
var p new Dc.Person({name: name , sex: sex});
p.print();
}
Ext.apply(Dc.Person.prototype,{
print: function(){
alert(String.format(姓名{0}, 性别{1}, this.name, this.sex));
}
});
view plain copy to clipboard print ? html xmlnshttp://www.w3.org/1999/xhtml head meta http-equivContent-Type contenttext/html; charsetutf-8 / title命名空间别名/title link relstylesheet typetext/css href../extjs/resources/css/ext-all.css / script typetext/javascript src../extjs/adapter/ext/ext-base.js/script script typetext/javascript src../extjs/ext-all.js/script script typetext/javascript srcnamespaceShort.js/script script typetext/javascript var p new Dc.Person({name:MC, sex:M}); p.print(); var t new Ext.dojochina.Person({name:MacroChin, sex:男}); t.print(); /script /head body /body /html html xmlnshttp://www.w3.org/1999/xhtml
head
meta http-equivContent-Type contenttext/html; charsetutf-8 /
title命名空间别名/title
link relstylesheet typetext/css href../extjs/resources/css/ext-all.css /
script typetext/javascript src../extjs/adapter/ext/ext-base.js/script
script typetext/javascript src../extjs/ext-all.js/script
script typetext/javascript srcnamespaceShort.js/script
script typetext/javascript
var p new Dc.Person({name:MC, sex:M});
p.print();
var t new Ext.dojochina.Person({name:MacroChin, sex:男});
t.print();
/script
/head
body
/body
/html
类别名定义对于类的别称。(别名全部字母都要大写)代码举例 view plain copy to clipboard print ? PNExt.dojochina.Person; PNExt.dojochina.Person;完整示例代码view view plain copy to clipboard print ? // classShort.js Ext.namespace(Ext.dojochina); Ext.dojochina.Person function(_cfg){Ext.apply(this, _cfg);}; PN Ext.dojochina.Person; PN.print function(name, sex){ var p new PN({name: name, sex: sex}); p.print(); }; Ext.apply(PN.prototype, { print: function(){ alert(String.format(姓名: {0} , 性别: {1}, this.name, this.sex)); } }); // classShort.js
Ext.namespace(Ext.dojochina);
Ext.dojochina.Person function(_cfg){Ext.apply(this, _cfg);};
PN Ext.dojochina.Person;
PN.print function(name, sex){
var p new PN({name: name, sex: sex});
p.print();
};
Ext.apply(PN.prototype, {
print: function(){
alert(String.format(姓名: {0} , 性别: {1}, this.name, this.sex));
}
});
view plain copy to clipboard print ? html xmlnshttp://www.w3.org/1999/xhtml head meta http-equivContent-Type contenttext/html; charsetutf-8 / title类别名/title link relstylesheet typetext/css href../extjs/resources/css/ext-all.css / script typetext/javascript src../extjs/adapter/ext/ext-base.js/script script typetext/javascript src../extjs/ext-all.js/script script typetext/javascript srcclassShort.js/script script typetext/javascript var p new PN({name:MC, sex:M}); p.print(); var t new Ext.dojochina.Person({name:MacroChin, sex:Male}); t.print(); /script /head body /body /html html xmlnshttp://www.w3.org/1999/xhtml
head
meta http-equivContent-Type contenttext/html; charsetutf-8 /
title类别名/title
link relstylesheet typetext/css href../extjs/resources/css/ext-all.css /
script typetext/javascript src../extjs/adapter/ext/ext-base.js/script
script typetext/javascript src../extjs/ext-all.js/script
script typetext/javascript srcclassShort.js/script
script typetext/javascript
var p new PN({name:MC, sex:M});
p.print();
var t new Ext.dojochina.Person({name:MacroChin, sex:Male});
t.print();
/script
/head
body
/body
/html
事件定义对于外界影响的反应在ExtJS还支持事件队列模式由 Ext.util.Observable类支持。完整示例代码view view plain copy to clipboard print ? // event.js Ext.namespace(Ext.dojochina); Ext.dojochina.Person function(){ this.addEvents( namechange, sexchange ); }; Ext.extend(Ext.dojochina.Person, Ext.util.Observable, { name: , sex: , setName: function(_name){ if(this.name ! _name){ this.fireEvent(namechange, this, this.name, _name); this.name _name; } }, setSex: function(_sex){ if(this.sex ! _sex){ this.fireEvent(sexchange, this, this.sex, _sex); this.sex _sex; } } }); // event.js
Ext.namespace(Ext.dojochina);
Ext.dojochina.Person function(){
this.addEvents(
namechange,
sexchange
);
};
Ext.extend(Ext.dojochina.Person, Ext.util.Observable, {
name: ,
sex: ,
setName: function(_name){
if(this.name ! _name){
this.fireEvent(namechange, this, this.name, _name);
this.name _name;
}
},
setSex: function(_sex){
if(this.sex ! _sex){
this.fireEvent(sexchange, this, this.sex, _sex);
this.sex _sex;
}
}
});
view plain copy to clipboard print ? html xmlnshttp://www.w3.org/1999/xhtml head meta http-equivContent-Type contenttext/html; charsetutf-8 / title事件/title link relstylesheet typetext/css href../extjs/resources/css/ext-all.css / script typetext/javascript src../extjs/adapter/ext/ext-base.js/script script typetext/javascript src../extjs/ext-all.js/script script typetext/javascript srcevent.js/script script typetext/javascript var person null; button_click function(){ person.setName(prompt(请输入姓名, )); person.setSex(prompt(请输入性别, )); } Ext.onReady(function(){ var txt_name Ext.get(txt_name); var txt_sex Ext.get(txt_sex); person new Ext.dojochina.Person(); person.on(namechange, function(person, oldVal, newVal){ txt_name.dom.value newVal; }); person.on(sexchange, function(person, oldVal, newVal){ txt_sex.dom.value newVal; }); person.on(namechange, function(person, oldVal, newVal){ document.title newVal; }); }); /script /head body 姓名:input typetext idtxt_name / BR/ 性别:input typetext idtxt_sex / BR/ button οnclickbutton_click()输入/button /body /html html xmlnshttp://www.w3.org/1999/xhtml
head
meta http-equivContent-Type contenttext/html; charsetutf-8 /
title事件/title
link relstylesheet typetext/css href../extjs/resources/css/ext-all.css /
script typetext/javascript src../extjs/adapter/ext/ext-base.js/script
script typetext/javascript src../extjs/ext-all.js/script
script typetext/javascript srcevent.js/script
script typetext/javascript
var person null;
button_click function(){
person.setName(prompt(请输入姓名, ));
person.setSex(prompt(请输入性别, ));
}
Ext.onReady(function(){
var txt_name Ext.get(txt_name);
var txt_sex Ext.get(txt_sex);
person new Ext.dojochina.Person();
person.on(namechange, function(person, oldVal, newVal){
txt_name.dom.value newVal;
});
person.on(sexchange, function(person, oldVal, newVal){
txt_sex.dom.value newVal;
});
person.on(namechange, function(person, oldVal, newVal){
document.title newVal;
});
});
/script
/head
body
姓名:input typetext idtxt_name / BR/
性别:input typetext idtxt_sex / BR/
button οnclickbutton_click()输入/button
/body
/html
◆EXTJS的另几种面向对象设计体现GWT-EXT为JAVA程序员编写EXTJS应用提供了可能EXTTLD为JSP程序员的标签化部署EXTJS提供了可能EXTSharp为C#程序员编写EXTJS的应用提供了可能
