`
雪馨25
  • 浏览: 125119 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

【初学EXT】基础知识

    博客分类：
  • EXT
ext控件 
阅读更多

学习背景：三个月之前我对EXT还处于一无所知的状态，迫于新工作的要求，和自我提升的压力，我不得不四处搜罗面着学习EXT，从最简单的helloword学起
       知识背景：我有java基础，使用JS进行过web开发
       我坚信：没有学不会，只有不会学

         开篇


首先要知其然，然后再知其所以然
最好的老师莫过于官网，没有人会比开发公司更了解自己的产品

官网地址： 中文：  http://extjs.org.cn/       英文：http://www.sencha.com/products/extjs

 

开始学习啦：

按照我惯常的学习思路是要先在官网找到quik start 然后照猫画虎开始学习的，但是这一次有些与众不同，官网的大体浏览让我有些眼花缭乱无从下手，为了尽快入门，我的学习步骤调整如下：
1.官网例子学习helloworld
2.简单教程学习语法
3.各个击破
   控件
   布局
   监听

一、helloworld

地址：ExtJs"入门"
使用版本：ext-3.4.0
建立基本项目：
项目目录：

 

HelloWerld.html

 

 

 

[html] view plaincopyprint?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  4. <title>Hello World</title>  
  5. <link rel="stylesheet" type="text/css"  
  6.     href="EXT/resources/css/ext-all.css" />  
  7. <script type="text/javascript" src="EXT/ext-base.js"></script>  
  8. <script type="text/javascript" src="EXT/ext-all.js"></script>  
  9. <script type="text/javascript">  
  10.     Ext.onReady(function() {  
  11.         alert('Hello World!');  
  12.     });  
  13. </script>  
  14. </head>  
  15. <body>  
  16. </body>  
  17. </html>  

web.xml

 

 

[html] view plaincopyprint?
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">  
  3.   <display-name>QuickStartExt</display-name>  
  4.   <welcome-file-list>  
  5.     <welcome-file>HelloWorld.html</welcome-file>  
  6.   </welcome-file-list>  
  7. </web-app>  

效果展示：

 

之后测试代码如不单独指出，则是直接替换掉alert('Hello World!'); 进行效果测试

 

二、语法学习（要基本理解，动手实践）

 

教材：轻松搞定EXTJS  （在我的下载资源中可以进行下载阅读）

 

先通读重要章节，基本目标学会语法

 

命名空间（namespace）

 

语法：Ext.namespace(“命名空间”)
示例：Ext.namespace("com.aptech");

 

通常基于命名空间创建新类，按照java 的设计思想，会有封装、继承和多态。Extjs 也不例外，而且Extjs 为OOP 做了很多基础工作，使用起来非常模式化。一个类至少应该有private 和public 成员，且可以派生出子类，并能重写父类的方法。

 

例：

 

[javascript] view plaincopyprint?
  1. Ext.namespace("com.aptech");  
  2. com.aptech.First = function(){  
  3.    //私有成员  
  4.     var kiss = "中华人民共和国";  
  5.    //私有方法  
  6.    //公有方法  
  7.     return {  
  8.         //公有成员  
  9.         init: function(){  
  10.              alert("init");  
  11.              alert(kiss);  
  12.         },  
  13.         //公有成员  
  14.         method: function(){  
  15.             alert("method");  
  16.         }  
  17.     };  
  18. };  

注：First 位于com.aptech 命名空间中，有一个私有成员kiss，并且向外部暴露了两个方法init()和method()。其实，在function和return之间定义的成员全总是private，而ruturn内部定义的成员全部是public
模拟继承

[javascript] view plaincopyprint?
  1. //创建子类  
  2. com.aptech.Second = function(){  
  3. com.aptech.Second.superclass.constructor.apply(this);//调用父类构造方法  
  4. }  
  5. //com.aptech.Second子类继承自父类com.aptech.First  
  6. Ext.extend(com.aptech.Second, com.aptech.First, {  
  7. //新方法  
  8. fun: function(i){  
  9. return i * i * i;  
  10. },  
  11. //重写的方法  
  12. method: function(){  
  13. alert("Second::method")  
  14. }  
  15. });  
  16. //测试  
  17. var second = new com.aptech.Second();  
  18. alert(second.fun(5));  
  19. second.method();  

这个我没有太明白，不过不影响我继续学习，暂作记录

配置(config)选项

 

[javascript] view plaincopyprint?
  1. Student = function(name, sex){  
  2. this.name = name;  
  3. this.sex = sex;  
  4. }  
  5. //测试  
  6. var student = new Student("李赞红", "男");  
  7. alert("姓名：" + student.name + "\r\n性别：" + student.sex);  

apply()---config

[javascript] view plaincopyprint?
  1. Student = function(config){  
  2. Ext.apply(this, config);  
  3. }  
  4. //测试  
  5. var student = new Student({name: "李赞红", sex: "男"});  
  6. alert("姓名：" + student.name + "\r\n性别：" + student.sex);  

注：Ext定义了一个名叫apply()的方法，作用是将第二个参数的成员赋给第一个参数。

Ext.apply()和Ext.applyIf()

 

[javascript] view plaincopyprint?
  1. Student1 = function(config){  
  2. this.name = "张海军";  
  3. this.sex = "女";  
  4. Ext.apply(this, config);  
  5. }  
  6.   
  7. Student2 = function(config){  
  8. this.name = "张海军";  
  9. this.sex = "女";  
  10. Ext.applyIf(this, config);  
  11. }  
  12. var student1 = new Student1({name: "李赞红", sex: "男", birthday: new Date()});  
  13. alert("姓名1：" + student1.name + "\r\n 性别1：" + student1.sex + "\r\n 生日1：" +student1.birthday);  
  14.   
  15. var student2 = new Student2({name: "李赞红", sex: "男", birthday: new Date()});  
  16. alert("姓名2：" + student2.name + "\r\n 性别2：" + student2.sex + "\r\n 生日2：" +student2.birthday);  

 

结果：

 

姓名1：李赞红
性别1：男
生日1：Mon Apr 22 2013 11:32:14 GMT+0800

 

姓名2：张海军
性别2：女
生日2：Mon Apr 22 2013 11:33:14 GMT+0800

 

三、控件（和java有类似，理解基础上多动手，有印象即可，千万不要死记硬背）

 

简单的消息框

 

提示框的语法：
Ext.MessageBox. alert ( String title, String msg, Function fn, Object scope );
参数定义如下：
1、title：标题
2、msg：提示内容
3、fn：提示框关闭后自动调用的回调函数
4、scope：作用域，用于指定this指向哪里，一般不用管他，特殊情况下有用

 

例：

 

 

Ext.MessageBox.alert("提示框", "这是一个提示框", function(){
            alert("提示框关闭了");
            })

Ext.MessageBox.prompt("输入框", "请输入您的姓名：", function(btn, txt){
                Ext.MessageBox.alert("结果", "您点击了" + btn + "按钮，<br>输入的内容为" + txt);

});
Ext.MessageBox.prompt("输入框", "请输入您的姓名：", function(btn, txt){
            Ext.MessageBox.alert("结果", "您点击了" + btn + "按钮，<br>输入的内容为" +txt);
            }, this, 100);

 

    Ext.MessageBox.confirm("确认", "请点击下面的按钮作出选择", function(btn){
            Ext.MessageBox.alert("您单击的按钮是：" + btn);
            });

 

Ext.onReady 事件

 

[javascript] view plaincopyprint?
  1. Ext.onReady(function(){  
  2.     Ext.get("btn").on("click", function(){  
  3.         Ext.MessageBox.alert("点击", "我被点击了，非常高兴");  
  4.     });  
  5. });  

注：

页面加载完成后，Ext.onReady 事件被触发，基本上，除了类封装，与页面相关的操作都会写在该事件中。

Ext.get ( Mixed el)：根据HTML标签的id属性获取Ext.Element 对象

on(String eventName, Function fn)：为Ext.Element 对象定义一个事件，eventName是事件名称，和传统的事件名称相比不以“on”开头，fn为事件处理函数。从这里可以延伸开去，也可以是 “change”、“keypress”等。

 

EXT组件(暂时罗列，后期布局不用到处找)

组件有三种类型：基本组件、工具栏组件、表单组件。

基本组件

 

 

xtype class 说明
box Ext.BoxComponent 具有边框属性的组件
button Ext.Button 按钮
colorpalette Ext.ColorPalette 调色板
component Ext.Component 组件
container Ext.Container 容器
cycle Ext.CycleButton 圆角按钮
dataview Ext.DataView 数据显示视图
datepicker Ext.DatePicker 日期选择面板
editor Ext.Editor 编辑器
editorgrid Ext.grid.EditorGridPanel 可编辑的表格
grid Ext.grid.GridPanel 不可编辑的表格
paging Ext.PagingToolbar 分页组件
panel Ext.Panel 面板
progress Ext.ProgressBar 进度条
splitbutton Ext.SplitButton 可分裂的按钮
tabpanel Ext.TabPanel 选项面板
treepanel Ext.tree.TreePanel 树
viewport Ext.ViewPort 视图
window Ext.Window 窗口

工具栏组件

 

xtype class 说明
toolbar Ext.Toolbar 工具栏
tbbutton Ext.Toolbar.Button 按钮
tbfill Ext.Toolbar.Fill 文件
tbitem Ext.Toolbar.Item 工具条项目
tbseparator Ext.Toolbar.Separator 工具栏分隔符
tbspacer Ext.Toolbar.Spacer 工具栏空白
tbsplit Ext.Toolbar.SplitButton 工具栏分隔按钮
tbtext Ext.Toolbar.TextItem 工具栏文本项

表单组件

xtype class 说明
form Ext.FormPanel Form面板
checkbox Ext.form.Checkbox 复选框
combo Ext.form.ComboBox 下拉列表框
datefield Ext.form.DateField 日期选择器
field Ext.form.Field 表单字段
fieldset Ext.form.FieldSet 字段分组
hidden Ext.form.Hidden 隐藏表单域
htmleditor Ext.form.HtmlEditor 在线HTML编辑器
numberfield Ext.form.NumberField 数字编辑器
radio Ext.form.Radio 单选按钮
textarea Ext.form.TextArea 区域文本框

 

以下为阅读教程过程中摘录的几个控件：

 

日期选择器Ext.DatePicker

 

[javascript] view plaincopyprint?
  1. <span style="font-size:12px;">var dp = new Ext.DatePicker({  
  2.             renderTo: Ext.getBody(),  
  3.             minDate: Date.parseDate("2009-1-1", "Y-m-d"),  
  4.             maxDate: Date.parseDate("2999-12-30", "Y-m-d"),  
  5.             value: Date.parseDate("2013-4-22", "Y-m-d"),  
  6.             handler: function(){  
  7.             Ext.MessageBox.alert("日期", Ext.util.Format.date(this.getValue(), 'Y-m-d'));  
  8.             }  
  9.             });</span>  

下拉列表

[javascript] view plaincopyprint?
  1. var cities = [ [ 1, "长沙市" ], [ 2, "株洲市" ], [ 3, "湘潭市" ],  
  2.                     [ 4, "邵阳市" ] ];  
  3.             var proxy = new Ext.data.MemoryProxy(cities);  
  4.             var City = Ext.data.Record.create([ {  
  5.                 name : "cid",  
  6.                 type : "int",  
  7.                 mapping : 0  
  8.             }, {  
  9.                 name : "cname",  
  10.                 type : "string",  
  11.                 mapping : 1  
  12.             } ]);  
  13.             var reader = new Ext.data.ArrayReader({}, City);  
  14.               
  15.             var store = new Ext.data.Store({  
  16.                 proxy : proxy,  
  17.                 reader : reader,  
  18.                 autoLoad : true  
  19.             //即时加载数据  
  20.             });  
  21.             //store.load();  
  22.             var combobox = new Ext.form.ComboBox({  
  23.                 renderTo : Ext.getBody(),  
  24.                 triggerAction : "all",  
  25.                 store : store,  
  26.                 displayField : "cname",  
  27.                 valueField : "cid",  
  28.                 mode : "local",  
  29.                 emptyText : "请选择湖南城市"  
  30.             });  
  31.             var btn = new Ext.Button({  
  32.                 text : "列表框的值",  
  33.                 renderTo : Ext.getBody(),  
  34.                 handler : function() {  
  35.                     Ext.Msg.alert("值", "实际值：" + combobox.getValue()  
  36.                             + "；显示值：" + combobox.getRawValue());  
  37.                 }  
  38.             });  

1
顶
9
踩
分享到：
| 【初学EXT】eclipse 部署EXTJS
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ExtJSP基础知识及其API

    很详细的关于ExtJS基础知识的一些文档，API，如果是正在初学ExtJSP的同鞋们，看看应该很有帮助的。

    快意编程EXT JS Web开发技术详解.part3

    《快意编程:Ext JS Web开发技术详解》适用于初、中、高级软件设计人员，同时也可用做高校相关专业师生和社会培训班的教材，但在阅读《快意编程:Ext JS Web开发技术详解》前，需要读者掌握JavaScript的基础知识。

    快意编程EXT JS Web开发技术详解.part2

    《快意编程:Ext JS Web开发技术详解》适用于初、中、高级软件设计人员，同时也可用做高校相关专业师生和社会培训班的教材，但在阅读《快意编程:Ext JS Web开发技术详解》前，需要读者掌握JavaScript的基础知识。

    快意编程EXT JS Web开发技术详解.part1

    《快意编程:Ext JS Web开发技术详解》适用于初、中、高级软件设计人员，同时也可用做高校相关专业师生和社会培训班的教材，但在阅读《快意编程:Ext JS Web开发技术详解》前，需要读者掌握JavaScript的基础知识。

    快意编程 EXT JS Web开发技术详解.pdf

    《快意编程:Ext JS Web开发技术详解》适用于初、中、高级软件设计人员，同时也可用做高校相关专业师生和社会培训班的教材，但在阅读《快意编程:Ext JS Web开发技术详解》前，需要读者掌握JavaScript的基础知识。...

    Extjs2.0的入门

    这是一份Extjs2.0的技术材料，全部是基础知识，非常适合初学者。

    Ext第一周 史上最强学习笔记—GridPanel（基础篇）

    我会从每个细节都说明，尽量不漏掉作为初学者需要知道的基础知识。第一次写教程，见笑了。 因为我学这个是这样一个过程，通过一个控件了解其他的控件，剩下的就是属性查API了。API我自己在翻译CHM版的。因为是个人...

    Linux kernel pdf 每一行都完全注释-初学者必备

    阅读本书需具备的基础知识 3 使用早期版本是否过时？ 3 EXT2 文件系统与MINIX 文件系统？ 4 第1 章 概述 5 11 LINUX 的诞生和发展 5 12 内容综述 9 13 本章小结 12 第2 章 LINUX 内核体系结构 13 21 LINUX 内核模式 ...

    ExtJS6.5-Modern实例源码

    本工程涵盖了 Ext Js Modern 开发的各方面的基础知识， 比如开发环境搭建， 项目结构详解， 如何使用 api， 数据的增删查该基本示例， 以实际操作为主，非常好的入门项目 本书的各章节之间有一定的知识关联， 由浅至...

    征服RIA：基于JavaScript的Web客户端开发卷三

    JavaScript基础篇：介绍JavaScript的语法和基础应用。如果不打算深究JavaScript幕后机制的话，运用本篇的知识便能胜任一般的JavaScript开发了。JavaScript高级篇：揭示JavaScript的运行机理和高级应用，如面向对象...

    征服RIA：基于JavaScript的Web客户端开发卷二

    JavaScript基础篇：介绍JavaScript的语法和基础应用。如果不打算深究JavaScript幕后机制的话，运用本篇的知识便能胜任一般的JavaScript开发了。JavaScript高级篇：揭示JavaScript的运行机理和高级应用，如面向对象...

    嵌入式系统/ARM技术中的《嵌入式Linux应用程序开发标准教程》（第2版）-第10章、嵌入式Linux网络编程

    Linux基础部分从Linux基础、基本操作命令讲起，为Linux初学者能快速入门提供了保证。接着系统地讲解了嵌入式Linux的环境搭建，以及嵌入式Linux的I/O与文件系统的开发、进程控制开发、进程间通信开发、网络应用开发、...

    Linux编程从入门到精通

    Linux编程从入门到精通适合初学者 第一部分 Linux内核 前言 第1章 硬件基础与软件基础 6 1.1 硬件基础 6 1.1.1 CPU 7 1.1.2 存储器 8 1.1.3 总线 8 1.1.4 控制器和外设 8 1.1.5 地址空间 9 1.1.6 时钟 9 1.2 软件...

    Linux命令搜索工具linux-command.zip

    badblocks、cfdisk、dd、e2fsck、ext2ed、fdisk、fsck.ext2、fsck、fsck.minix、fsconf、hdparm、losetup、mbadblocks、mformat、mkbootdisk、mkdosfs、mke2fs、mkfs.ext2、mkfs、mkfs.minix、mkfs.msdos、mkinitrd...

    Linux操作系统基础教程

    讲座的目的就是在同学们中间普及 Linux 基础知识，为今后我们更加接近的了解 Linux 做一 个好的开端。 第一讲 Linux基础 在这一讲中，我们主要是了解一下 Linux 的概况，以及对 Linux 有一个初步的感性认识。 ...

    入门学习Linux常用必会60个命令实例详解doc/txt

    要想真正理解Linux系统，就必须从Linux命令学起，通过基础的命令学习可以进一步理解Linux系统。 不同Linux发行版的命令数量不一样，但Linux发行版本最少的命令也有200多个。这里笔者把比较重要和使用频率最多的命令...

Magicbox
Global site tag (gtag.js) - Google Analytics