【初学EXT】基础知识

最新推荐文章于 2022-07-09 10:12:18 发布

雪馨

最新推荐文章于 2022-07-09 10:12:18 发布

阅读量217

点赞数

分类专栏： EXT 文章标签： ext 控件

EXT 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

学习背景：三个月之前我对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 plain copy print ?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello World</title>
<link rel="stylesheet" type="text/css"
href="EXT/resources/css/ext-all.css" />
<script type="text/javascript" src="EXT/ext-base.js"></script>
<script type="text/javascript" src="EXT/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
alert('Hello World!');
});
</script>
</head>
<body>
</body>
</html>

web.xml

[html] view plain copy print ?

<?xml version="1.0" encoding="UTF-8"?>
<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">
<display-name>QuickStartExt</display-name>
<welcome-file-list>
<welcome-file>HelloWorld.html</welcome-file>
</welcome-file-list>
</web-app>

效果展示：

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

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

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

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

命名空间（namespace）

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

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

例：

[javascript] view plain copy print ?

Ext.namespace("com.aptech");
com.aptech.First = function(){
//私有成员
var kiss = "中华人民共和国";
//私有方法
//公有方法
return {
//公有成员
init: function(){
alert("init");
alert(kiss);
},
//公有成员
method: function(){
alert("method");
}
};
};

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

[javascript] view plain copy print ?

//创建子类
com.aptech.Second = function(){
com.aptech.Second.superclass.constructor.apply(this);//调用父类构造方法
}
//com.aptech.Second子类继承自父类com.aptech.First
Ext.extend(com.aptech.Second, com.aptech.First, {
//新方法
fun: function(i){
return i * i * i;
},
//重写的方法
method: function(){
alert("Second::method")
}
});
//测试
var second = new com.aptech.Second();
alert(second.fun(5));
second.method();

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

配置(config)选项

[javascript] view plain copy print ?

Student = function(name, sex){
this.name = name;
this.sex = sex;
}
//测试
var student = new Student("李赞红", "男");
alert("姓名：" + student.name + "\r\n性别：" + student.sex);

apply()---config

[javascript] view plain copy print ?

Student = function(config){
Ext.apply(this, config);
}
//测试
var student = new Student({name: "李赞红", sex: "男"});
alert("姓名：" + student.name + "\r\n性别：" + student.sex);

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

Ext.apply()和Ext.applyIf()

[javascript] view plain copy print ?

Student1 = function(config){
this.name = "张海军";
this.sex = "女";
Ext.apply(this, config);
}
Student2 = function(config){
this.name = "张海军";
this.sex = "女";
Ext.applyIf(this, config);
}
var student1 = new Student1({name: "李赞红", sex: "男", birthday: new Date()});
alert("姓名1：" + student1.name + "\r\n 性别1：" + student1.sex + "\r\n 生日1：" +student1.birthday);
var student2 = new Student2({name: "李赞红", sex: "男", birthday: new Date()});
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 plain copy print ?

Ext.onReady(function(){
Ext.get("btn").on("click", function(){
Ext.MessageBox.alert("点击", "我被点击了，非常高兴");
});
});

注：

页面加载完成后，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	区域文本框