EXTjs框架
JS框架介绍
浩如烟海的JS框架,国内各大互联网公司基本也都有自己的框架。实在太多,不一一介绍,感兴趣的可以参考http://www.javascriptoo.com/此网站分类统计了js库,共32种,596个,当然不包括各大公司自己的JS库或者框架。面对N多成功的框架,优缺点对比,使用场景等,自己百度吧。反正公司是选择了extjs,无论什么原因,都得掌握这个框架。讨厌一个框架一个框架的学习,一定要转向业务发展。
extJS框架介绍
百度百科原话”无论是界面之美,还是功能之强,ext的表格控件都高居榜首”。看来重在表格了。“ExtJS可以用来开发RIA也即富客户端的AJAX应用,是一个用javascript写的,主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架。Ext的UI组件模型和开发理念脱胎、成型于Yahoo组件库YUI和Java平台上Swing两者,并为开发者屏蔽了大量跨浏览器方面的处理。相对来说,EXT要比开发者直接针对DOM、W3C对象模型开发UI组件轻松”。难怪看起来像swing。Ext从2.x开始收费,不知道会不会收公司费用啊。不扯蛋了,百度百科介绍说是《ExtJS实用开发指南》够入门的了,那就看教程吧。
下载组件
大致看了一下4.0版本为了支持触屏,公司用的是3.3,先不关心版本差异,按照教程下载教程上面的2.0js包。
入门实例:
示例helloworld
还是教程实在,上代码:
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"/>
</script>
<script type="text/javascript" src="extjs/ext-all.js" /></script>
<script type="text/javascript" />
function fn()
{
alert("helloworld extlib");
}
Ext.onReady(fn);
</script>
无图无真相,截图为证:
当然也可以与java内部类类似写法,效果是一样的。
<script type="text/javascript" />
Ext.onReady(function fn()
{
alert("Hello extlib");
});
</script>
在页面显示一个窗口
上代码:
Ext.onReady(function fn()
{
var win = new Ext.Window({title:"hello",width:300,height:200,html:'<h1>Hello easyjf opensource</h1>'});
win.show();
});
截图,教程上面截图窗口有颜色,而实际上用IE谷歌都没有颜色。坑爹的教程,先不管那么多了,接着看。
EXTJS框架基础以及核心介绍
类库简介
好吧,了解一下原理吧,看看教程怎么说。EXTJS由一系列类库组成,页面加载EXTJS库后,就可以通过JAVASCRIPT调用EXTJS类以及控件实现需要的功能。这就是把浏览器当作了jvm,把Javascript当作java语言来用了嘛。
底层api(core目录下,主要是DomHelper.js与Element.js)提供了对DOM(平时见了很多很频繁的名词,一直没有细究,学习不认真啊,现在补习,当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。HTML DOM 模型被构造为对象的树,http://www.w3school.com.cn/js/ js_htmldom.asp上面介绍的最清楚,此处不写了)的操作,查询,事件处理。Core目录截个图吧
控件(widgets)是指可以直接在页面中创建的可视化组件,比如面板,选项版,表格,树,窗口,菜单,工具栏,按钮等(就是仿swing嘛)。控件的源码位于目录widgets下。目录截图吧
实用工具Utils:有了核心底层包,有了界面展示,怎么又来个工具包呢?看看功能吧,可以方便实现数据内容格式化,JSON数据解码反解码,对Date,Array,Ajax请求,Cookie管理,CSS管理等功能,这些功能封装到底层API好像是不合理啊,果然是需要个工具包来处理这些事情。截图
EXTJS组件介绍
既然都封装成了组件,那就来看看组件吧。教程如是说:“组件大致可以分三大类,基本组件,工具栏组件,表单以及元素组件”,如下表格。
基本组件 |
||
类型 |
对应的类 |
|
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.Panel |
表格 |
paging |
Ext.PagingToolbar |
工具栏中的间隔 |
panel |
Ext.Panel |
面板 |
progress |
Ext.ProgressBar |
进度条 |
splitbutton |
Ext.SplitButton |
可分裂的按钮 |
tabpanel |
选项面板 |
|
treepanel |
Ext.ViewPort |
视图 |
window |
Ext.Window |
窗口 |
工具栏组件 |
||
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 |
工具栏文本项 |
表单以及字段组件 |
||
Form |
Ext.FormPanel |
Form面板 |
Checkbox |
Ext.form.Checkbox |
Checkbox 录入框 |
Combo |
Ext.formComboBox |
Combo选项框 |
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. |
|
组件蛮多的,咋用呢?仿照java,使用new关键字呗。例如new Ext.Window();
上代码:坑爹的教程不把代码放到onReady()中,让我调试了那么久
Ext.onReady(function(){
var panel=new Ext.TabPanel({title:"hello",width:300,height:200,html:"Hello,easyjf open source"});
panel.render('hello');
});
HTML部分
<body>
<div id="hello" > </div>
</body>
再来一个面板例子,上源码(注意将相关文件都拷贝到项目中,否则样式太难调了):
<html>
<head>
<script type="text/javascript" src="adapter/ext/ext-base.js"/> </script>
<script type="text/javascript" src="ext-all.js" /></script>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" />
Ext.onReady(function(){
var panel=new Ext.TabPanel({width:300,height:200,items:[new Ext.Panel( {title:"面板1",height:30}),new
Ext.Panel({title:"面板2",height:30}),new Ext.Panel({title:"面板3",height:30})]});
panel.render('hello');
});
</script>
</head>
<body>
<div id="hello" > </div>
</body>
</html>
截图为证:
只有样式还不够,要处理相应事件啊。上代码:
<script type="text/javascript" />
function a(){
alert("fanjf tmp");
}
Ext.onReady(function(){
Ext.get("btnAlert").on("click",a);
});
</script>
<body>
<input id="btnAlert" type="button" value="弹出框"/>
</body
上面一段的JS不太容易懂,其实就是下面代码的意思咯,这下容易理解了吧,不多解释。
<script type="text/javascript" />
function a(){
alert("fanjf tmp");
}
window.onload=function(){
document.getElementById("btnAlert").onclick=a;
}
</script>
好了,入门结束,具体的高级特性,需要看demo了。
相关推荐
`Ext.onReady()`是EXTJS中的重要方法,它会在DOM加载完毕且EXTJS框架准备好后执行传入的函数。 最后,`index.jsp`的完整结构包括HTML头部声明、基础路径设置、元信息和必要的CSS及JavaScript引用。在`<body>`部分,...
### Extjs 5 学习笔记之 SenchaCmd 深入解析 #### 一、SenchaCmd 的简介 SenchaCmd 是一个跨平台的命令行工具,它为基于 ExtJS 和 Sencha Touch 应用程序的开发周期提供了全面的支持。从创建应用程序的基础结构到...
以下是对ExtJS 入门学习的一些关键知识点的详细解释: 1. **核心改进**: - **框架架构重构**:ExtJS 4 对框架进行了重构,提高了性能和健壮性。 - **测试框架**:全面的跨浏览器测试确保了框架的兼容性和稳定性...
Extjs4开发笔记(二)——框架的搭建 http://www.mhzg.net/a/20116/201162913210280.html 目前仅实现这两步,我在参照原作者的代码,照着在我的机器上敲了一边,并调试成功 解压至web发布的根目录即可 本代码适用于...
### ExtJS 学习笔记概览 #### 一、ExtJS 入门 **1.1 ExtJS 构成及如何引用** ExtJS 是一款基于 JavaScript 的开源框架,专为 Web 应用程序的前端界面设计。其核心优势在于提供了一套丰富的 UI 组件和强大的数据...
总的来说,这篇学习笔记详细介绍了EXTJS的环境搭建和基础使用,对于初次接触EXTJS的测试工程师来说是一份很好的入门资料。通过熟悉EXTJS的API,可以更有效地进行前端开发和测试工作。在实际项目中,可以根据需求选择...
此外,标签中提及的`javaee`、`extjs`、`jquery`、`oracle`等,分别代表了Java企业版、前端JavaScript框架、数据库技术和Oracle数据库,这些知识可以作为进一步学习的方向,将Java应用到更广泛的领域。
本资料集合针对初学者,提供了丰富的学习资源,帮助快速入门ExtJS4.0的MVC应用开发。 一、《Extjs4 MVC详解.doc》 这份文档详细阐述了ExtJS4.0中的MVC架构,包括Controller、Model、Store、View和ViewPort等关键...
以上知识点涵盖了ExtJS学习笔记中的核心内容,通过这些知识点的学习和实践,开发者能够入门并逐渐深入理解ExtJS框架,并将这些知识应用到实际的开发工作中去。对于希望深入学习ExtJS的开发者来说,理解这些基础知识...
本文将基于标题“入门基础学习 ExtJS笔记(一)”和描述,介绍ExtJS的基础知识,特别是如何创建一个基本的界面框架。 首先,要使用ExtJS,我们需要引入必要的CSS样式表和JavaScript库。在HTML文件中,我们看到引用...
ExtJS 是一个强大的JavaScript前端框架,专为构建企业级的Web应用程序而设计。它提供了丰富的组件库、数据绑定机制和可扩展的架构,使得开发者能够创建功能丰富的、交互性强的用户界面。本学习资料集合了从基础到...
这些笔记将帮助初学者快速入门EXTJS的开发。 同时,文档中可能还涉及到了EXTJS2.0版本的特定特性,例如如何实现更复杂的组件组合,或者在实际项目中遇到的问题及解决方案。这些实战经验对于提高EXTJS的开发技能...
ExtJS是一种基于JavaScript的开源富客户端框架,专用于构建交互式、桌面级的Web应用程序。这个“extJS初级文档”压缩包包含了一系列的学习资源,帮助初学者快速掌握ExtJS的基本用法和概念。 1. **入门教程**:这...
6. **ExtJS、DWR**: 前端框架和技术。 ### Java 之父 James Gosling 1. **1990 年**: Sun Microsystems 启动“绿色计划”。 2. **1992 年**: 创建 Oak 语言,后更名为 Java。 3. **1994 年**: 在硅谷大会上演示 ...
本书旨在帮助移动应用程序开发者快速入门Sencha Touch JavaScript框架。通过本教程,读者将大大缩短学习Sencha Touch的时间,并获得宝贵的实践经验。 - **目标**:本教程的目标是教授读者如何构建一个Sencha Touch ...
这些文档包括学习笔记、实用开发指南、入门教程和个人整理的手册,都是学习和掌握ExtJS的重要资源。ExtJS提供了丰富的组件库,使得开发者可以构建出功能强大且界面美观的Web应用。通过阅读这些文档,初学者可以了解...
EXT_JS是一种基于JavaScript的富客户端应用开发框架,主要用于构建用户界面。这个开发指南主要涵盖了EXT_JS的基本使用方法和核心概念,对于入门EXT_JS的开发者来说是十分宝贵的资源。以下是EXT_JS的一些关键知识点:...