- 浏览: 196418 次
- 性别:
- 来自: 长沙
文章分类
最新评论
-
在世界的中心呼喚愛:
思路很好
连连看全局消除算法 -
tianaozhu:
请问,我修改了词库和源文件怎么就不好用了, 我源文件是: My ...
自己动手开发翻译软件(Java版) -
Arlrn:
博主你好,最近在学习排序算法,看了你的博客,你的直接插入排序, ...
各种排序算法的实现及其比较 -
sharong:
有一个明显错误,很显然冒泡排序的时间复杂度是O(n^2)
各种排序算法的实现及其比较 -
julydave:
希尔排序不太对吧。。
各种排序算法的实现及其比较
用Dreamweaver新建一个网站,把ext-3.3包中的adapter和resources文件夹拷到目录下,再把
ext-all.js拷过来。然后我们在sample里面新建js文件和html文件。在html文件 中要引入:
adapter/ext/ext-base.js和ext-all.js,以及自己写的js文件。注意顺序。
1、注册一个命名空间:
Ext.namespace("Ext.ling");
下面在命名空间内初始化一个类,并定义方法。
2、动态方法print()
Ext.namespace("Ext.ling") ; Ext.ling.Person = Ext.emptyFn ; // 在命名空间上定义一个类 Ext.apply(Ext.ling.Person.prototype , { //为自定义的类 增加一个 name 属性,并初始化 name:"", sex:"", print:function(){ alert(String.format("姓名:{0},性别:{1}" , this.name , this.sex)) ; } }) ;
调用时,可以如下方式赋值:
var _person = new Ext.ling.Person() ; _person.name = "凌云壮志" ; _person.sex = "男" ; _person.print() ; _person.name = "XXX" ; _person.sex = "女" ; _person.print() ;
3、类静态方法。
定义在一个类级别上共享的方法。下面的示例中,print()方法就是一个静态方法。
Ext.namespace("Ext.ling") ; Ext.ling.Person = Ext.emptyFn ; Ext.ling.Person.print = function(_name , _sex){ var _person = new Ext.ling.Person() ; _person.name = _name ; _person.sex = _sex ; _person.print() ; } Ext.apply(Ext.ling.Person.prototype , { name:"", sex:"", print:function(){ alert(String.format("姓名:{0},性别:{1}" , this.name , this.sex)) ; } }) ;
然后调用方法如下:
Ext.ling.Person.print("凌云壮志" , "男") ; Ext.ling.Person.print("XXX" , "女") ;
4、类的构造方法
把上面的 Ext.ling.Person = Ext.emptyFn ; 改成下面的代码就行了。
Ext.ling.Person = function(_cfg){ Ext.apply(this , _cfg) ; } ;
5、类的继承:
定义一个父类:Person.js
Ext.namespace("Ext.ling") ; Ext.ling.Person = function(_cfg){ Ext.apply(this , _cfg) ; } ; Ext.apply(Ext.ling.Person.prototype , { job:"无", print:function(){ alert(String.format("姓名:{0},性别:{1},角色:{2}" , this.name , this.sex , this.job)) ; } }) ;
定义一个教师类:Teacher.js
Ext.namespace("Ext.ling") ; Ext.ling.Teacher = function(_cfg){ Ext.apply(this , _cfg) ; } ; Ext.extend(Ext.ling.Teacher , Ext.ling.Person , { job:"教师" }) ;
定义一个学生类:Student.js
Ext.namespace("Ext.ling") ; Ext.ling.Student = function(_cfg){ Ext.apply(this , _cfg) ; } ; Ext.extend(Ext.ling.Student , Ext.ling.Person , { job:"学生" }) ;
然后再调用两个继承的类:
var _teacher = new Ext.ling.Teacher({name:"张三" , sex:"男"}) ; _teacher.print() ; var _stduent = new Ext.ling.Student({name:"李四" , sex:"女"}) ; _stduent.print() ;
6、重写
上面的程序中,在Person类里面定义了print方法,如下:
print:function(){ alert(String.format("姓名:{0},性别:{1},角色:{2}" , this.name , this.sex , this.job)) ; }
如果在Student类里面再写一个同名的方法,如下:
Ext.extend(Ext.ling.Student , Ext.ling.Person , { print:function(){ alert(String.format("{0}是一位{1}学生" , this.name , this.sex)) ; } }) ;
这样的话, student类中的print方法就把Person类里面的同名方法重写了。
7、类别名
psn = Ext.dojochina.Person ; //下面就可以直接用psn来表示Ext.dojochina.Person 了。
8、事件:
Ext.namespace("Ext.ling") ; Ext.ling.Person = function(){ this.addEvents( //添加两个事件监听 "namechange", "sexchange" ) ; } ; Ext.extend(Ext.ling.Person , Ext.util.Observable , { //继承Observable类 name:"", sex:"", setName:function(_name){ if(this.name != _name){ //事件注册,下面四个参数:事件名,类本身,该类的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 ; } } }) ;
然后,写一个html页面来调用它:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" /> <title>事件</title> <script type="text/javascript" src="../../../adapter/ext/ext-base.js"> </script> <script type="text/javascript" src="../../../ext-all.js"> </script> <script type="text/javascript" src="Person.js"> </script> <script type="text/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.ling.Person() ; //事件触发时,定义一个函数来处理,function里面的参数与事件注册后的三个参数对应 _person.on("namechange" , function(_person , _old , _new){ txt_name.dom.value = _new ; }) ; _person.on("sexchange" , function(_person , _old , _new){ txt_sex.dom.value = _new ; }) ; //可以重复定义事件 _person.on("namechange" , function(_person , _old , _new){ document.title = _new ; }) ; }) ; </script> </head> <body> 姓名:<input type="text" id="txt_name" maxlength="10" /><br/> 性别:<input type="text" id="txt_sex" maxlength="10"/><br/> <input type="button" value="输入" onclick="button_click()"/> </body> </html>
发表评论
-
Ext js面向对象的特性
2011-05-11 11:06 10191、支持命名空间(Java里用的是包的概念) Ex ... -
Ext 2.x中,关于combobox的取值问题
2011-02-15 19:47 1778Ext中,关于combobox的取 ... -
Ext常用的知识点(三)--combobox和xml的绑定
2011-02-09 11:47 1070直接看代码,所有需要注意的地方都标在代码后面了 Ext ... -
Ext常用的知识点(二)--panel和window
2011-02-09 01:16 15491、Panel 很容易就可以做写出一个panel v ... -
Ext常用的知识点(一)--弹出消息
2011-02-08 21:38 1391首先,要写Extjs,建议大家用一个工具spket。 ... -
Extjs复习笔记(二十)-- tree和grid结合
2010-11-07 12:20 1611让tree和grid结合起来 相关内容之前大都讲过,这里就不 ... -
Extjs复习笔记(十九)-- XML作为tree的数据源
2010-11-07 11:52 2675用XML来作为tree的数据源 所有文件都上传了 ... -
Extjs复习笔记(十八)-- TreePanel
2010-11-07 11:09 1312Grid这一块暂时就讲到这。这一节开始就是tree的相关内容了 ... -
Extjs复习笔记(十七)-- 给grid里面的内容分组
2010-11-07 03:11 2008给grid里面的内容分组。 Ext.onReady(fun ... -
Extjs复习笔记(十六)-- 可编辑的grid
2010-11-07 02:43 1856可编辑的grid。 可以响应数据加载完时的事件。。。 可以 ... -
Extjs复习笔记(十五)-- JsonReader
2010-11-07 01:54 2715使用JsonReader来创建grid中的store (exa ... -
Extjs复习笔记(十四)-- XmlReader
2010-11-05 13:48 2383读取XML文件来构造grid 先了解一个函数:Ext.dat ... -
Extjs复习笔记(十三)-- GridPanel
2010-11-05 03:11 1693这一节开始,复习grid,博大精深呀! 拿官网的例子来 ... -
Extjs复习笔记(十二)--form验证
2010-11-04 23:37 1432验证。。。 1、不允许 ... -
Extjs复习笔记(十一)--换肤
2010-11-04 21:48 1305换肤功能 首先写一个 ... -
Extjs复习笔记(十)-- 网页主框架
2010-11-04 14:58 1049主界面的雏形: <!DOCTYPE html ... -
Extjs复习笔记(九)-- 加载等待
2010-11-04 13:29 2131登陆时的加载状态: <style type=&qu ... -
Extjs复习笔记(八)--登陆框
2010-11-03 02:33 1780之前有一篇博客展示了一个图书管理系统,接下来的几篇博客将会解析 ... -
Ext图书管理系统
2010-10-31 10:17 1900其实这一篇日志写很久了,由于近期项目演示的需要,我把它转到这边 ... -
Extjs复习笔记(七)-- ComboBox的添加、修改
2010-10-31 02:09 2602ComboBox的测试,有几个方法没写完整,有待之后解决。。。 ...
相关推荐
在"Extjs复习笔记(二十)-- tree和grid结合"这篇博文中,博主探讨了如何在EXTJS中实现树形视图(Tree)与网格视图(Grid)的融合。 Tree组件在EXTJS中通常用于显示具有层级关系的数据,例如文件系统、组织架构等。...
ExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.doc
在“Extjs复习笔记(十五)-- JsonReader”这篇博文中,博主探讨了ExtJS中的JsonReader,这是数据绑定和JSON数据解析的关键部分。 JsonReader是ExtJS数据包(Ext.data)的一部分,用于从服务器获取JSON格式的数据,...
在本篇ExtJS复习笔记中,我们聚焦于TreePanel组件,它是ExtJS库中的一个核心组件,用于构建可扩展的树形结构数据视图。TreePanel不仅提供了展示层级关系的数据模型,还支持交互操作,如节点的选择、展开与折叠等。在...
ExtJS资料笔记(extjs各个属性的详解) ExtJS资料笔记(extjs各个属性的详解) ExtJS资料笔记(extjs各个属性的详解)
在EXTJS框架中,换肤是一项重要的功能,它允许开发者根据用户需求或品牌风格改变应用程序的外观和感觉。本文将深入探讨EXTJS的换肤机制,以及如何利用提供的主题CSS文件实现这一特性。 EXTJS是一个强大的JavaScript...
本篇复习笔记将聚焦于EXTJS Grid中的一个重要特性——内容分组,帮助你深入理解如何实现这一功能。 内容分组在EXTJS Grid中允许你将数据按照特定字段进行分类,这样可以更清晰地组织和展示数据。这在处理大量数据时...
21. extJs 2.0学习笔记(Ext.Panel篇二) 50 22. extJs 2.0学习笔记(Ext.Panel篇三) 59 23. extJs 2.0学习笔记(Ext.Panel篇四) 62 24. extJs 2.0学习笔记(组件总论篇) 66 25. extJs 2.0学习笔记(Ext.Element API总结) ...
适合ExtJs开发人员extjs技术上手以及深入
ExtJS4学习笔记(二)---HBox的使用 ExtJS4学习笔记(三)---VBox的使 ExtJS4学习笔记(四)---Grid的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(七)---带搜索的Grid...
本篇笔记将深入探讨ExtJS的事件处理,包括事件登记、事件对象、this的作用域以及ExtJS特有的事件管理方式。 1. **事件登记**: - **内联式登记**:在HTML元素中直接定义事件处理函数,如`onClick="popUp()"`。这种...
### Extjs 5 学习笔记之 SenchaCmd 深入解析 #### 一、SenchaCmd 的简介 SenchaCmd 是一个跨平台的命令行工具,它为基于 ExtJS 和 Sencha Touch 应用程序的开发周期提供了全面的支持。从创建应用程序的基础结构到...
extjs4.0 笔记大全,按照这个笔记来,相信你一定能很快学会的
EXTJS in Action 是一本专为学习EXTJS编写的书籍,但这里我们主要关注学习笔记中的关键知识点。 首先,EXTJS的目录结构非常重要,因为它包含了所有必要的资源和源码: 1. `adapter`:这部分包含了适配器,用于将...
ExtJS4学习笔记(二)---HBox的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(八)---Grid多选 全选 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(十)---ExtJS4图片验证码的实现 ExtJS4学习笔记(十一)---...
ExtJs简明教程+Extjs学习笔记,来源网络,免费奉送,我讨厌需要资源分~
ExtJS4.0开发笔记
在探讨《ExtJS学习心得笔记》这一主题时,我们不仅会深入理解ExtJS框架的核心概念与实践技巧,还会从新手的角度出发,提炼出一系列有助于快速上手的学习策略,避免常见的学习陷阱,确保学习过程高效而有成效。...