欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

【初学EXT】基础知识 博客分类： EXT ext控件

程序员文章站 2024-03-22 21:22:28
...

学习背景：三个月之前我对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
建立基本项目：
项目目录：

【初学EXT】基础知识 博客分类： EXT ext控件

 

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>  

效果展示：

【初学EXT】基础知识 博客分类： EXT ext控件

 

之后测试代码如不单独指出，则是直接替换掉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】基础知识 博客分类： EXT ext控件

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

});		 【初学EXT】基础知识 博客分类： EXT ext控件
Ext.MessageBox.prompt("输入框", "请输入您的姓名：", function(btn, txt){
            Ext.MessageBox.alert("结果", "您点击了" + btn + "按钮，<br>输入的内容为" +txt);
            }, this, 100);		 【初学EXT】基础知识 博客分类： EXT ext控件

 

    Ext.MessageBox.confirm("确认", "请点击下面的按钮作出选择", function(btn){
            Ext.MessageBox.alert("您单击的按钮是：" + btn);
            });		 【初学EXT】基础知识 博客分类： EXT ext控件

 

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.             });  

【初学EXT】基础知识 博客分类： EXT ext控件

相关标签： ext 控件

上一篇： 【oracle】dblink创建 博客分类： SQL学习 dblinkoracle使用

下一篇： 【WebService学习过程记录(三)】XFire开发Web Service---HelloWord 博客分类： javaWeb知识总结 webservicexfire

推荐阅读