Ext JS框架入门(10级学员 刘志飞课堂笔记)
来源:互联网 发布:市场营销数据分析公式 编辑:程序博客网 时间:2024/06/05 18:16
Ext JS框架入门
一、概述:
ExtJS可以用来开发RIA也即富客户端的AJAX应用,是一个用javascript写的,主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架。
功能丰富,无人能出其右。
无论是界面之美,还是功能之强,ext的表格控件都高居榜首。
单选行,多选行,高亮显示选中的行,拖拽改变列宽度,按列排序,这些基本功能ExtJS轻量级实现。
自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染,这些也算可以想到的功能。
再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,这些功能竟然都在ext表格控件里实现了。
其实从ext3开始就支持各种方式的统计,且有控件支持excel导出。
二、为什么选择Ext JS:
在java开发中,选择合适项目的框架是件为难的事情,他需要从团队开发的技术力量和项目需求等各方面来考量。客户的页面开发也面临同样情形。如表列出了目前常用的技术。
表 前端开发技术的选择
三、Ext JS 体系结构
四、Ext JS 类库的介绍:
Adapter: 负责将里面提供第三方底层库(包括Ext自带的底层库)映射为Ext所支持的底层库。
Air:Ext对基于Air可视化编辑器的支持。
Build: 压缩后的ext全部源码(里面分类存放)。
Docs:APL帮助文档。
Exmaples:提供使用ExtJS技术做出的小实例。
Package:Ext提供常用控件。
Resources:ExtUI资源文件目录,如CSS、图片文件都存放在这里面。
Source:无压缩Ext全部的源码(里面分类存放)遵从Lesser GNU(LGPL)开源的协议。
Ext—all.js:压缩后的Ext全部源码。
Ext-all-debug.js:无压缩的Ext全部的源码(用于调试)。
Ext-core.js:压缩后的Ext的核心组件,包括sources/core下的所有类。
Ext-core-debug.js:无压缩Ext的核心组件,包括Sources/core下的所有类。
五、应该先导入两个js文件与一个css样式表。一定注意顺序和路径。标准格式为:
六、窗体实例
实例1:
// window.onload = function(){};// 当窗体加载完毕后,触发该匿名事件Ext.onReady(function() { // Ext.MessageBox.alert(); // Ext.MessageBox.alert("hihi!"); // 首先Ext // Javascript类 // 声明一个类 toString 方法 function User(name, sex, age) { this.name = name; this.sex = sex; this.age = age; this.showMsg = function() { Ext.MessageBox.alert("演示js原始的创建对象的方法", "创建user1对象的姓名是:"+ this['name'] + " 性别是:" + this['sex']+ " 年龄是:" + this['age']); } } // jsUser对象添加一个方法 // 创建类的对象 var user1 = new User("王晓丽", "女", 20); // user1.name user1['name'] // 利用Object的扩展一个get方法 Object.prototype.get = function(args) { return this[args]; } // alert(user1.get("name")); // alert(user1.toString());//[Object,Object]; //Object toString 有 //Ext.Object 对Object的扩展 alert(Ext.Object.getKey(user1,'王晓丽')); var objValues = Ext.Object.getValues(user1) alert(objValues.join("\n")); // user1.toString();var user2 = { name : "晓丽", sex : "女", age : "20", toString : function() { Ext.MessageBox.alert("演示js原始的创建对象的方法", "创建user2对象的姓名是:"+ this['name'] + " 性别是:" + this['sex']+ " 年龄是:" + this['age']); } }; // Array数组 var arrs = [11,1 2,1 3,1 4, 15, -13, -14]; // 遍历数组 /* * for(var i=0;i<arrs.length;i++){ alert(arrs[i]); } */ // 过滤值小0的排除 /* * for(var i=0;i<arrs.length;i++){ if(arrs[i]>0){ alert(arrs[i]); } } */ var newArrs = Ext.Array.filter(arrs, function(item) { if (item > 0) { //真假 如果返回的是true 就保留数组元素如果是false 就不保留数组元素 return false; } else { //不处理操作 return true; }}, this); //alert(newArrs.join("\n")); /*Ext.Array.each(newArrs, function(item) { alert(item); });*/ });
实例2:
Ext.onReady(function(){ //Ext.window窗体 //创建一个窗体对象 /* var win = new Ext.window.Window({ width:300, height:400, title:"第一个窗体" });*/ //调用窗体的显示的方法 // win.show(); //extjs4.0 //name必须使用"Ext.window.Window" fullName, {对象参数的设置} var win1 = Ext.create("Ext.window.Window",{ width:300, height:400, title:"第一11111111个窗体" }).show(); //Ext.create is alias for Ext.ClassManager.instantiate. var obj = { hi:function(){ alert("hi"); } }; //obj.hi(); //Function对象 = Ext.Function.alias(对象,该对象方法名称); var say = Ext.Function.alias(obj,"hi"); //Function //在使用这个对象的时候 say(); say(); });
实例3:
Ext.onReady(function(){ //extjs4.0自带的窗体 var win = Ext.create("Ext.window.Window",{ width:300, height:400, title:"第一11111111个窗体" }); //自定义一个窗体 Ext.define("my.pck.myWindow",{ extend:"Ext.window.Window", width:200, height:300, title:"你好", initComponent:function(){ this.callParent(arguments); } }); /* var myWin = new my.pck.myWindow({ }); myWin.show();*/ Ext.create("my.pck.myWindow",{ title:"你坏", width:400 }).show(); });
- Ext JS框架入门(10级学员 刘志飞课堂笔记)
- Ext JS框架入门
- Ext JS框架入门
- WebService入门介绍及案例分析(10级学员 庞丽课堂总结)
- Oracle常见数据库对象—序列(10级学员 宋立兴课堂笔记)
- 其他数据对象-----索引(10级学员 林常禹课堂笔记)
- JQueryUI插件----手风琴效果(10级学员 赵成举课堂笔记)
- jQuery插件应用之--- 选项卡插件的使用(10级学员 韩晓爽课堂笔记)
- jQueryUI中Datepicker(日历)插件的介绍和使用(10级学员 郞志课堂笔记)
- Hash 入门课堂笔记
- DML、DCL、DDL、DQL的介绍和区别(10级学员 姚荣旺课堂总结)
- oracle其他数据对象 --- 视图(10级学员 韩晓爽课堂总结)
- Oracl中PL/SQL编程(10级学员 张帅鹏课堂总结)
- oracle存储函数(10级学员 马林课堂总结)
- Oracle存储过程(10 级学员 庞丽课堂总结)
- oracle 闪回的介绍(10级学员 庞丽课堂总结)
- JqueryUI插件---对话框的使用(10级学员 乔宇课堂总结)
- Spring第一个案例(10级学员 庞丽课堂总结)
- 前端实习初体验
- android leds简单代码总结
- 喜欢就要说出来
- 我的程序员之路(五)
- RAC 锁管理与锁问题的定位
- Ext JS框架入门(10级学员 刘志飞课堂笔记)
- CSDN上的资源不错,今天下载了个软件很好用
- 防SQL注入
- JSTL和EL表达式之间有什么关系
- 单身
- 1003
- 《C++第十二周实验报告1-1》----理解基类中成员的访问限定符和派生类的继承方式
- 第12周-任务2-双肩挑干部
- 三星android大规模开源啦