【初学EXT】基础知识

来源：互联网发布：百合小说知乎编辑：程序博客网时间：2024/06/08 04:23

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

<!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

<?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 成员，且可以派生出子类，并能重写父类的方法。

例：

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
模拟继承

//创建子类com.aptech.Second = function(){com.aptech.Second.superclass.constructor.apply(this);//调用父类构造方法}//com.aptech.Second子类继承自父类com.aptech.FirstExt.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)选项

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

apply()---config

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()

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 事件

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组件(暂时罗列，后期布局不用到处找)

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

基本组件

xtypeclass说明boxExt.BoxComponent具有边框属性的组件buttonExt.Button按钮colorpaletteExt.ColorPalette调色板componentExt.Component组件containerExt.Container容器cycleExt.CycleButton圆角按钮dataviewExt.DataView数据显示视图datepickerExt.DatePicker日期选择面板editorExt.Editor编辑器editorgridExt.grid.EditorGridPanel可编辑的表格gridExt.grid.GridPanel不可编辑的表格pagingExt.PagingToolbar分页组件panelExt.Panel面板progressExt.ProgressBar进度条splitbuttonExt.SplitButton可分裂的按钮tabpanelExt.TabPanel选项面板treepanelExt.tree.TreePanel树viewportExt.ViewPort视图windowExt.Window窗口工具栏组件

xtypeclass说明toolbarExt.Toolbar工具栏tbbuttonExt.Toolbar.Button按钮tbfillExt.Toolbar.Fill文件tbitemExt.Toolbar.Item工具条项目tbseparatorExt.Toolbar.Separator工具栏分隔符tbspacerExt.Toolbar.Spacer工具栏空白tbsplitExt.Toolbar.SplitButton工具栏分隔按钮tbtextExt.Toolbar.TextItem工具栏文本项表单组件xtypeclass说明formExt.FormPanelForm面板checkboxExt.form.Checkbox复选框comboExt.form.ComboBox下拉列表框datefieldExt.form.DateField日期选择器fieldExt.form.Field表单字段fieldsetExt.form.FieldSet字段分组hiddenExt.form.Hidden隐藏表单域htmleditorExt.form.HtmlEditor在线HTML编辑器numberfieldExt.form.NumberField数字编辑器radioExt.form.Radio单选按钮textareaExt.form.TextArea区域文本框

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

日期选择器Ext.DatePicker

var dp = new Ext.DatePicker({            renderTo: Ext.getBody(),            minDate: Date.parseDate("2009-1-1", "Y-m-d"),            maxDate: Date.parseDate("2999-12-30", "Y-m-d"),            value: Date.parseDate("2013-4-22", "Y-m-d"),            handler: function(){            Ext.MessageBox.alert("日期", Ext.util.Format.date(this.getValue(), 'Y-m-d'));            }            });

下拉列表

var cities = [ [ 1, "长沙市" ], [ 2, "株洲市" ], [ 3, "湘潭市" ],[ 4, "邵阳市" ] ];var proxy = new Ext.data.MemoryProxy(cities);var City = Ext.data.Record.create([ {name : "cid",type : "int",mapping : 0}, {name : "cname",type : "string",mapping : 1} ]);var reader = new Ext.data.ArrayReader({}, City);var store = new Ext.data.Store({proxy : proxy,reader : reader,autoLoad : true//即时加载数据});//store.load();var combobox = new Ext.form.ComboBox({renderTo : Ext.getBody(),triggerAction : "all",store : store,displayField : "cname",valueField : "cid",mode : "local",emptyText : "请选择湖南城市"});var btn = new Ext.Button({text : "列表框的值",renderTo : Ext.getBody(),handler : function() {Ext.Msg.alert("值", "实际值：" + combobox.getValue()+ "；显示值：" + combobox.getRawValue());}});