Ext.js入门(二)
ExtJs OOP基础
一:ExtJs中的面向对象
1、ExtJs中命名空间的定义
Ext中的命名空间类似于C#中的namespace和java中的包,用来对工程中的类进行更好的管理,命名空间的层次结构用.来划分。
Ext通过namespace()方法来创建命名空间.
语法:Ext.namespace(“命名空间”);
示例:Ext.namespace(“MyOffice.System”);
eg:
// 定义一个命名空间 Ext.namespace("Ext.OA");
// 在命名空间上定义一个类 Ext.OA.helloworld = Ext.emptyFn;
// 创建一个类的实例 new Ext.OA.helloworld();
2.Ext中的做法
<script type="text/javascript">
// 定义一个命名空间 Ext.namespace("Ext.OA");
// 在命名空间上定义一个类 Ext.OA.helloworld = Ext.emptyFn;
// 创建一个类的实例 new Ext.OA.helloworld();
</script>
其中
Ext.OA.helloworld = Ext.emptyFn;
等价于
Ext.OA.helloworld = function(){};
3.支持类实例属性
<script type=“text/javascript”>
Ext.namespace(“Ext.OA”); // 自定义一个命名空间
Ext.OA.Person = Ext.emptyFn; // 在命名空间上自定义一个类
// 为自定义的类 增加一个 name 属性,并赋值
Ext.apply(Ext.OA.Person.prototype, {
name : “李四"
});
var _person = new Ext.OA.Person();// 实例化 自定义类
alert(_person.name);
_person.name = "张三";// 修改类name属性
alert(_person.name);
</script>
3:支持类实例方法
Ext.namespace(“Ext.OA”); // 自定义一个命名空间
Ext.OA.Person = Ext.emptyFn; // 在命名空间上自定义一个类
//
演示类实例方法
Ext.apply(Ext.OA.Person.prototype, {
name : “李四",
sex :
"男",
print :
function() {
alert(String.format("姓名:{0},性别:{1}",
this.name, this.sex));
}
});
var _person
= new Ext.OA.Person();// 实例化 自定义类
_person.print();
</script>
4:支持类静态方法
Ext.namespace(“Ext.OA”); // 自定义一个命名空间
Ext.OA.Person = Ext.emptyFn; // 在命名空间上自定义一个类
//
演示类实例方法
Ext.apply(Ext.OA.Person.prototype, {
name : “李四",
sex :
"男",
print :
function() {
alert(String.format("姓名:{0},性别:{1}",
this.name, this.sex));
}
});
// 演示 类静态方法
Ext.OA.Person.print =
function(_name, _sex) {
var _person
= new Ext.OA.Person();
_person.name =
_name;
_person.sex
= _sex;
_person.print(); // 此处调用类 实例方法,上面print是类 静态方法
};
Ext.OA.Person.print("张三", "女"); // 调用类 静态方法
</script>
5:支持构造方法
Ext.namespace("Ext.OA");
//自定义一个命名空间
//构造方法
Ext.OA.Person =
function(_cfg){
Ext.apply(this,_cfg);
};
//演示类实例方法
Ext.apply(Ext.OA.Person.prototype, {
print:function(){
alert(String.format("姓名:{0},性别:{1}",this.name,this.sex));
}
});
//演示 类静态方法
Ext.OA.Person.print =
function(_name,_sex){
var _person
= new Ext.OA.Person({name:_name,sex:_sex});
_person.print(); //此处调用类 实例方法,上面print是类 静态方法
};
Ext.OA.Person.print("张三","女"); //调用类 静态方法
</script>
6:支持类继承
Ext.namespace("Ext.OA"); // 自定义一个命名空间
//
*******************父类*********************
//
构造方法
Ext.OA.Person =
function(_cfg) {
Ext.apply(this, _cfg);
};
// 演示类实例方法
Ext.apply(Ext.OA.Person.prototype, {
job :
"无",
print :
function() {
alert(String.format("姓名:{0},性别:{1},角色:{2}", this.name,
this.sex,
this.job));
}
});
Ext.apply(this, _cfg);
};
Ext.extend(Ext.OA.Student, Ext.OA.Person, {
job :
"学生"
});
var _student
= new Ext.OA.Student({
name :
"张三",
sex :
"女"
});
_student.print(); // 调用 父类方法
7:支持命名空间别名
Ext.namespace("Ext.OA"); // 自定义一个命名空间 Wt
= Ext.OA; // 命名空间的别名 //
*******************父类*********************
//
构造方法
Wt.Person =
function(_cfg) {
Ext.apply(this, _cfg);
}; // 演示类实例方法
Ext.apply(Wt.Person.prototype, {
job :
"无",
print :
function() {
alert(String.format("姓名:{0},性别:{1},角色:{2}", this.name,
this.sex,
this.job));
}
});
// *******************子类1*********************
Wt.Student =
function(_cfg) {
Ext.apply(this, _cfg);
}; // 重写父类的 实例 方法
Ext.extend(Wt.Student, Ext.OA.Person, {
job :
"学生",
print :
function() {
alert(String.format("{0}是一位{1}{2}", this.name,
this.sex,
this.job));
}
}); var _student
= new Wt.Student({
name :
"张q三",
sex :
"女"
});
_student.print(); // 调用 父类方法
8:支持类别名
Ext.namespace("Ext.OA"); // 自定义一个命名空间 Wt
= Ext.OA; // 命名空间的别名 //
*******************父类*********************
//
构造方法
Wt.Person =
function(_cfg) {
Ext.apply(this, _cfg);
}; PN
= Wt.Person; // 类别名 //
演示类实例方法
Ext.apply(PN.prototype, {
job :
"无",
print :
function() {
alert(String.format("姓名:{0},性别:{1},角色:{2}", this.name,
this.sex,
this.job));
}
});
// *******************子类1*********************
Wt.Student =
function(_cfg) {
Ext.apply(this, _cfg);
}; ST = Wt.Student; // 重写父类的 实例 方法
Ext.extend(ST, PN,
{
job :
"学生",
print :
function() {
alert(String.format("{0}是一位{1}{2}", this.name,
this.sex,
this.job));
}
}); var _student
= new ST({
name :
"张q三",
sex :
"女"
});
_student.print(); // 调用 父类方法
二:Extjs中的配置选项
在ExtJs中,初使化对象时,会大量使用config配置参数(config通常均为一个json对象
Student = function(name,age){
this.name = name;
this.age= age;
}
//测试
Ext.onReady(function(){
var student = new Student("李四",18);
var info=string.format("姓名:{0},性别:{1}",student.name,student.age)
alert(info);
});
如json作为参数传递,则改造如下:
Student = function(config){
this.name = config.name;
this.sex = config.sex;
}
//测试
var student = new Student({name:”fwy”,sex:”男”});
alert(“姓名:”+student.name+”,性别:”+student.sex);
Extjs中一种更好的做法:
Student = function(config){
Ext.apply(this,config);
}
//测试
var student = new Student({name:”fwy”,sex:”男”});
alert(“姓名:”+student.name+”,性别:”+student.sex);
Ext.apply(obj,config)与Ext.applyIf(obj,config)的区别
说明:apply会将config和obj参数的同名属性覆盖,并且将config的其他属性添加到obj中.而applyIf则不会覆盖。
三:Ext中自定义事件
Ext的各种事件登记方式
1、使用addListener/on方法登记
这是最常见的方法登记方式,可以在元素获取后或组件实例化后登记,也可以在类构造器中登记。
//第一种方式形如:
{ //如msgBox中
…
fn:function(){…},
scope:…
}
//第二种方式
2、多事件组合方式登记
//常见于面板为基类(panel)的组件事件注册
{
…
listners:{
‘collapse’:function(obj){
…
},
‘expand’:function(obj){
…
}
}
}
常用于工具栏按钮的事件注册
{
handler:function(){…},
scope:…
}
//如果在一个元素上添加多个事件处理器可以向以下这样一次性设定
e1.on(
{
‘click’:{fn:this.onClick,scop:this},
‘mouseover’:{fn:this.onMouseOver,scope:this},
‘mouseout’:{fn:this.onMouseOut,scope:this}
}
)
也可以用以下语法
e1.on{
‘click’:this.onClick,
‘mouseover’,this.onMouseOver,
‘mouseout’,this.onMouseOut,
scope:this
}
3、使用Ext.addBehaviors方法登记事件
如下所示
Ext.addBehaviors({
//为id为test的锚点元素添加click事件
‘#test a@click’:function(e,t){...},
//为多个元素增加click事件
‘#test1 a,div.someclass@click’:function(){…}
})
Ext.js入门(二)的更多相关文章
- Ext.js入门:Window对象与FormPanel(六)
一:Ext.Window类 二:Ext.Window类实例 三:Ext.FormPanel类 四:Ext.FormPanel类实例 1.类Ext.Window 包: Ext 定义的文件 Windo ...
- Ext.js入门:TreePanel(九)
一:最简单的树 二:通过TreeNode自定义静态树 三:用TreeLoader加载数据生成树 四:解决IE下非正常加载节点问题 五:使用TreeNodeUI 六:带有checkbox的树 七:编辑树 ...
- Ext.js入门:TabPanel组件(八)
一:TabPanel组件简介 二:简单代码示例 三:使用iframe作为tab的标签页内容 四:动态添加tabpanel的标签页 五:为tabpanel标签页添加右键菜单 方式一: <html ...
- Ext.js入门:常用组件与综合案例(七)
一:datefield简单示例 二:timefield简单示例 三:numberfield简单示例 四:FormPanel提交 datefield简单示例: <html xmlns=&quo ...
- Ext.js入门:面板(五)
一:Ext.Panel类简介 二:Ext.Panel类常用属性方法与事件 三:Ext.Panel实例运用 1.Ext.Panel类简介 类 Ext.Panel 包: Ext 定义的文件: ...
- Ext.js入门:模板(四)
1.Ext.DomHelper简介2.Template语法使用简介3.Template简单应用4.Template中使用转换函数5.使用模板的自定义接口6.XTemplate应用 一:Ext.DomH ...
- Ext.js入门
一:ExtJs简介: ExtJs通常简称为Ext,它是一个非常优秀的Ajax框架,用Javascript编写,它与后台技术无关,可以用来开发具有炫丽外观的富客户端应用.Ext所开发的多彩界面吸引了许多 ...
- node.js入门(二) 模块 事件驱动
模块化结构 node.js 使用了 CommonJS 定义的模块系统.不同的功能组件被划分成不同的模块.应用可以根据自己的需要来选择使用合适的模块.每个模块都会暴露一些公共的方法或属性.模块使用者直接 ...
- Ext JS 6学习文档–第1章–ExtJS入门指南
Ext JS 入门指南 前言 本来我是打算自己写一个系列的 ExtJS 6 学习笔记的,因为 ExtJS 6 目前的中文学习资料还很少.google 搜索资料时找到了一本国外牛人写的关于 ExtJS ...
随机推荐
- UVALive 4725 Airport(二分)
题目链接 题意 机场有两种飞机,每小时一些飞机到达,每小时安排一架飞机起航.求任意时刻中两种飞机数目的最大值的最小值. 分析 首先肯定是二分来做.这里的难点在于如何判断飞机数目是否合法.一开始忽略了某 ...
- 第二节:从程序集的角度分析MemoryCache,并完成基本封装
一. 轻车熟路 有了上一个章节对 System.Web.Caching.Cache 的探究,这里我们按照同样的思路对 MemoryCache 进行探究,相信必定会得心应手. 1. 程序集准备 a. 需 ...
- Zabbix LLD 设置过滤条件,不自动监控某些item
1.需求描述 默认情况下Zabbix 自带模板 "Template OS Linux" 中网络接口LLD自动发现除还回接口外的所有接口,当这并不一定是我们想要的结果. ...
- 11. SpringBoot 之CRUD实例
SpringBoot静态页路径,可直接通过URL访问的: /META-INF/resources /resources /static /public 而 5. /template 只和模板引擎 ...
- VS2013中修改MFC对话框左上角和exe图标
一.开发环境 1.VS2013: 2.C++ / MFC: 二.更改步骤 1)创建一个新工程,可以什么都不加.打开“资源视图”, 右键点击项目名称,选择“添加资源”,导入“Icon”资源文件(事先准备 ...
- android 使用get和post将数据提交到服务器
1.activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android& ...
- 列表控件QListWidget
列表控件可以让我们以列表形式呈现内容,是界面更加有序美观.QListWidget列表控件应当与QListWidgetItem一起使用,后者作为项被添加入列表控件中,也就是说列表控件中的每一项都是一个Q ...
- Linux之Ubuntu无线网络配置
无线网络使用问题: 0.插上有线网络电线与电脑NIC上. 1.set->系统设置->软件和更新->Ubuntu软件->下载自: 选择一个网络服务器地址(软件源)[http: ...
- 【摘】SVN提交与版本冲突
一般性解决办法 1.要提交的内容备份到项目之外[为还原版本做准备] 2.还原[回到之前版本] 3.更新[更新版本号和版本] 4.填充内容[即 将自己之前备份的内容填充项目对应处] 5.提交 6.OK ...
- 下拉框combobox用法&级联餐单
如果下来内容不用后台取数据,直接写死的话不用url属性,直接用data即可: <input id="orderstate" name="orderstate&quo ...