`
fanjf2012
  • 浏览: 6570 次
最近访客 更多访客>>
tengda1221
社区版块
存档分类
最新评论

ExtJS框架入门笔记

 
阅读更多

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

Ext.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了。

0
顶
0
踩
分享到：
| Jetty学习笔记1（简介,运行,部署）
评论
3 楼 fanjf2012 2014-03-11  
luoyu-ds 写道
ExtJs从3.x用到4.x，两三年了，用得真心想吐

看了4的简介，不是主要针对触屏的吗？为什么要从3过度到4
2 楼 fanjf2012 2014-03-11  
luoyu-ds 写道
ExtJs从3.x用到4.x，两三年了，用得真心想吐

我也想吐啊，公司以此框架做底层框架，恶心啊
1 楼 luoyu-ds 2014-03-10  
ExtJs从3.x用到4.x，两三年了，用得真心想吐
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    EXTjs自己的入门笔记

    `Ext.onReady()`是EXTJS中的重要方法，它会在DOM加载完毕且EXTJS框架准备好后执行传入的函数。 最后，`index.jsp`的完整结构包括HTML头部声明、基础路径设置、元信息和必要的CSS及JavaScript引用。在`&lt;body&gt;`部分，...

    Extjs 5 学习笔记

    ### Extjs 5 学习笔记之 SenchaCmd 深入解析 #### 一、SenchaCmd 的简介 SenchaCmd 是一个跨平台的命令行工具，它为基于 ExtJS 和 Sencha Touch 应用程序的开发周期提供了全面的支持。从创建应用程序的基础结构到...

    extjs 的一些学习笔记

    以下是对ExtJS 入门学习的一些关键知识点的详细解释： 1. **核心改进**： - **框架架构重构**：ExtJS 4 对框架进行了重构，提高了性能和健壮性。 - **测试框架**：全面的跨浏览器测试确保了框架的兼容性和稳定性...

    基于extjs4.0.7的员工管理系统

    Extjs4开发笔记(二)——框架的搭建 http://www.mhzg.net/a/20116/201162913210280.html 目前仅实现这两步，我在参照原作者的代码，照着在我的机器上敲了一边，并调试成功 解压至web发布的根目录即可 本代码适用于...

    老师整理的extjs学习笔记

    ### ExtJS 学习笔记概览 #### 一、ExtJS 入门 **1.1 ExtJS 构成及如何引用** ExtJS 是一款基于 JavaScript 的开源框架，专为 Web 应用程序的前端界面设计。其核心优势在于提供了一套丰富的 UI 组件和强大的数据...

    EXTJS（搭建环境）学习笔记.doc

    总的来说，这篇学习笔记详细介绍了EXTJS的环境搭建和基础使用，对于初次接触EXTJS的测试工程师来说是一份很好的入门资料。通过熟悉EXTJS的API，可以更有效地进行前端开发和测试工作。在实际项目中，可以根据需求选择...

    javase6 学习笔记(李兴华培训课堂笔记所有.)

    此外，标签中提及的`javaee`、`extjs`、`jquery`、`oracle`等，分别代表了Java企业版、前端JavaScript框架、数据库技术和Oracle数据库，这些知识可以作为进一步学习的方向，将Java应用到更广泛的领域。

    ExtJS4.0 MVC 学习资料集合

    本资料集合针对初学者，提供了丰富的学习资源，帮助快速入门ExtJS4.0的MVC应用开发。 一、《Extjs4 MVC详解.doc》 这份文档详细阐述了ExtJS4.0中的MVC架构，包括Controller、Model、Store、View和ViewPort等关键...

    extjs 学习笔记（一） 一些基础知识

    以上知识点涵盖了ExtJS学习笔记中的核心内容，通过这些知识点的学习和实践，开发者能够入门并逐渐深入理解ExtJS框架，并将这些知识应用到实际的开发工作中去。对于希望深入学习ExtJS的开发者来说，理解这些基础知识...

    入门基础学习 ExtJS笔记（一）

    本文将基于标题“入门基础学习 ExtJS笔记（一）”和描述，介绍ExtJS的基础知识，特别是如何创建一个基本的界面框架。 首先，要使用ExtJS，我们需要引入必要的CSS样式表和JavaScript库。在HTML文件中，我们看到引用...

    extjs study

    ExtJS 是一个强大的JavaScript前端框架，专为构建企业级的Web应用程序而设计。它提供了丰富的组件库、数据绑定机制和可扩展的架构，使得开发者能够创建功能丰富的、交互性强的用户界面。本学习资料集合了从基础到...

    ext学习笔记教程和实例

    这些笔记将帮助初学者快速入门EXTJS的开发。 同时，文档中可能还涉及到了EXTJS2.0版本的特定特性，例如如何实现更复杂的组件组合，或者在实际项目中遇到的问题及解决方案。这些实战经验对于提高EXTJS的开发技能...

    extJS初级文档

    ExtJS是一种基于JavaScript的开源富客户端框架，专用于构建交互式、桌面级的Web应用程序。这个“extJS初级文档”压缩包包含了一系列的学习资源，帮助初学者快速掌握ExtJS的基本用法和概念。 1. **入门教程**：这...

    韩顺平java从入门到精通视频教程(全94讲)学习笔记整理(齐全).doc

    6. **ExtJS、DWR**: 前端框架和技术。 ### Java 之父 James Gosling 1. **1990 年**: Sun Microsystems 启动“绿色计划”。 2. **1992 年**: 创建 Oak 语言，后更名为 Java。 3. **1994 年**: 在硅谷大会上演示 ...

    Building a Sencha Touch Application

    本书旨在帮助移动应用程序开发者快速入门Sencha Touch JavaScript框架。通过本教程，读者将大大缩短学习Sencha Touch的时间，并获得宝贵的实践经验。 - **目标**：本教程的目标是教授读者如何构建一个Sencha Touch ...

    搜索速度快得让你震惊！极为优秀的免费文件搜索工具Everything中文绿色版下载 (不到1MB)

    这些文档包括学习笔记、实用开发指南、入门教程和个人整理的手册，都是学习和掌握ExtJS的重要资源。ExtJS提供了丰富的组件库，使得开发者可以构建出功能强大且界面美观的Web应用。通过阅读这些文档，初学者可以了解...

    EXT_JS实用开发指南_个人整理笔记.docx

    EXT_JS是一种基于JavaScript的富客户端应用开发框架，主要用于构建用户界面。这个开发指南主要涵盖了EXT_JS的基本使用方法和核心概念，对于入门EXT_JS的开发者来说是十分宝贵的资源。以下是EXT_JS的一些关键知识点：...

Magicbox
Global site tag (gtag.js) - Google Analytics