EXT JS认识EXTJS,第一个EXTJS例子
大部分内容转载自：http://blog.csdn.net/wanghuan203/article/details/8011112
和http://www.cnblogs.com/willick/p/3168809.html
但是以上用的是.net ，我这里使用Java。
EXT是基于Web的富客户端框架，完全是基于标准W3C(万维网联盟WorldWideWeb Consortium)技术构建设的，使用到的都是最基本的HTML、CSS、DIV等相关技术。Ext最杰出之处，是开发了一系列非常简单易用的控件及组件，我们只需要使用这些组件就能实现各种丰富多彩的UI的开发。
Ext的UI组件模型和开发理念脱胎、成型于Yahoo组件库YUI和Java平台上Swing两者，并为开发者屏蔽了大量跨浏览器方面的处理。相对来说，EXT要比开发者直接针对DOM、W3C对象模型开发UI组件轻松。
EXT基础:理解Html DOM、Ext
Element及Component
用EXT写的素有配置属性、事件、等等，其最终都会转化为HTML在浏览器上显示出来，而每一个HTML页面都有一个层次分明的DOM树模型，浏览器中的所有内容都有相应的DOM对象，动态改变页面的内容，正是通过使用脚本语言来操作DOM对象实现。
然后Ext在DOM的基础上，创建了ExtElement，可以使用Element来包装任何DOM，Element对象中添加了一系列快捷、简便的实用方法。可以让我们能更准确的操作DOM树.
就像asp里控件,我们会觉得很方便,EXT也想到了,因此，除了Element以外，Ext还建立了一系列的客户端界面组件Component，我们在编程时，只要使用这些组件Componet即可实现相关数据展示及交互等，而Component是较高层次的抽象，每一个组件在渲染render的时候，都会依次通过Element、DOM来生成最终的页面效果。
总结一下三者，组件Component是最高层次的抽象，是直接给用户使用的，ExtElement是Ext的底层API，主要是由Ext或自定义组件调用的，而DOM是W3C标准定义的原始API，Ext的Element通过操作DOM 来实现页面的效果显示。
EXT组件体系
Ext在Component类基础上，使用面向对象的方法，设计了一系列的组件及控件。因此，要能游刃有余地使用Ext，熟悉Ext组件体系是最基本的。
ExtJS 中的组件体系由框架进行了非常大的重构，其中最重要的就是形成了一个结构及层次分明的组件体系，由这些组件形成了Ext的控件，Ext 组件是由Component类定义，每一种组件都有xtype 属性值，通过该值可以得到一个组件的类型或者是定义一个指定类型的组件。
组件大致可以分为三大类：基本组件、工具栏组件、表单及元素组件。组件功能很强大,一两句代码就是一个很好的显示效果.
举个代码例子吧
var panel=Ext.create('Ext.panel.Panel',{
id:'myPanel',
title:'第一个Panel应用',
width:200,
height:300,
items:[
{xtype:'textfield',fieldLabel:'用户名'},
{xtype:'textfield',fieldLabel:'密码'}
],
tbar:[{xtype:'button',text:'按钮'}],
tools:[{
type:'refresh',
handler: function(event,toolEl,panel){
}
}]
});
这段代码首先定义了panel控件,然后在控件里定义了两个text和一个按钮.items是panl的内容,tbar是工具条.其实整个代码就是一个配置的过程,配置的参数使用json数据的方式传给后台处理,后台根据Xtype的类型创建出相应的组件.
其他控件就不多说,想了解的朋友可以下一份文档看看,很全很详细.
在公司待了几个星期,对EXT的使用有了初步的了解,参照同事和文档写出想要的布局和一些控制效果等代码都差不多可以实现了.js代码最不好办的是调试,因为现在公司用的IDE对js代码的编写和调试不敏感,而js代码又有很多的标点,IDE又不报错，所以很难发现错误,还好现在可以使用firefox浏览器的firebug来实施断点调试,不然是真的抓不住虫.所以也向写js的朋友推荐firebug,确实不错.
关于ExtJS的学习,下面这段话是从网上摘来的:
Ext看起来是非常简单的东西，稍有点编程知识的人，按照开发文档中的入门指南，半小时就能学会使用Ext。然而，当准备使用Ext开发一个项目时，却不知道从何处入手，或者是在使用Ext的时候，出了一点小问题自己不知道该如何解决。编程是一门实践性的科学，仅仅靠看书、看别人写的代码是远远不够的，因此，必须多做实践才行，只有通过不断的练习，大量的使用，才能对Ext的组件特性、事件、事件处理机制以及与服务器端交互接口等深入的掌握，只有多做运用，深入了解ext的组件的工作原理及机制，才能编写出高级的Ext的应用。
觉得说的非常对,对新手来说,最忌自以为会了,其实自己开发还是不行,眼高手低是初学者的大忌,所以要想真正理解ext,用好ext,还得多看文档,多动手.
在项目中使用ExtJS
ExtJS为开发者在开发富客户的B/S应用中提供丰富的UI组件，具有统一的主题，便于快速开发，提高效率。但显然它并不适合互联网站的开发。
主要目录文件介绍
builds：压缩后的ExtJS代码，体积更小，更快；
docs：开发文档；
examples：官方演示示例；
locale：多国语言资源文件；
pkgs：ExtJS各部分功能的打包文件；
resource：ExtJS所需要的CSS与图片文件；
src：未压缩的源代码目录；
bootstarp.js：ExtJS库引导文件,可自动切换ext-all.js与ext-all-debug.js；
ext-all.js：ExtJS核心库；
ext-all-debug.js：ExtJS核心库的调试版,调试时使用。
ext-all-debug-w-comments.js：带注释的ExtJS核心库调试版。
如何引入文件
在项目中使用ExtJS，以下文件必需的：1 整个resources文件夹
2 ext-all.js或ext-all-debug.js或ext-all-debug-w-comments.js文件
3 ext-lang-zh_CN.js文件
在页面中用到ExtJS至少引入以下文件：
1 resources\css\ext-all.css
2 ext-all.js（如果要对ExtJS代码进行调试或学习可引入ext-all-debug.js或ext-all-debug-w-comments.js）
3 ext-lang-zh_CN.js
一个简单示例
Html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<link href="js/ext-all.css" type="text/css" rel="stylesheet"></link>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript" src="js/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function () {
//创建一个窗体
var win = new Ext.Window({
width: 300,
height:300,
items: [],
modal: true,
buttonAlign: 'center',
buttons: [{
text: '测试', id: 'btnTest', handler: function () {
Ext.Msg.show({
title: '询问',
msg: '您喜欢 ExtJs 吗？',
fn: processResult,
icon: Ext.Msg.QUESTION,
buttons: Ext.Msg.YESNO
});
}
}
]
});
win.show();
});
//询问对话框处理Handler
function processResult(btn) {
Ext.Msg.alert('结果', btn);
}
</script>
<body>
hello html;
</body>
</html>
结果：
EXT JS认识EXTJS,第一个EXTJS例子的更多相关文章
- js 排列 组合 的一个简单例子
最近工作项目需要用到js排列组合,于是就写了一个简单的demo. 前几天在网上找到一个写全排列A(n,n)的code感觉还可以,于是贴出来了, 排列的实现方式: 全排列主要用到的是递归和数组的插入 比 ...
- Ext JS - 问答
Ext JS - 问答 在下面你将可以找到关于Ext JS 的最常见问题的答复.如果没有找到您所需的答复,请访问 Ext JS 论坛或者提交一个支持申请. 如果你确信你的问题可以对本页有补充,请让我们 ...
- [Ext JS 4]性能优化
一般的优化技巧 1. 检查你定义的时间监听器 正确的设置事件监听器对性能会有很大的影响. 举例来说, 在定义一个store的时候,设置一个load 的事件去触发从后台读取数据,如果设置single 的 ...
- [Ext JS 4] contentEL,renderTo, applyTo 释义与区别
前言 若干年前,使用Ext JS 3 开发了一个系统. 随着Ext JS 4的出现,总是会看到或听到关于Ext 比较多的言论是 : Ext JS 4 较Ext JS 3 有较大的改变. Ext JS ...
- 读《Ext.JS.4.First.Look》随笔
Ext JS 4是最大的改革已经取得了Ext框架.这些变化包括一个新类系统,引入一个新的平台,许多API变化和改进,和新组件,如新图表和新画组件.Ext JS 4是更快,更稳定,易于使用.(注意:Ex ...
- Ext JS 5 beta版发布
原文:Announcing Public Beta of Ext JS 5 我们非常高兴的宣布,Sencha Ext JS 5 beta版本开始进行公测了.这个beta版本可以让你.我们Sencha社 ...
- Ext JS 4 新特性2：配置项属性（config）之二
Ext JS 4 新特征2:配置项属性config之二 ☞ Config(自动的setters和getters) Ext JS 4介绍了config声明方式,在Ext JS 中也有几个例子:在运行程序 ...
- 在Ext JS 5应用程序中如何使用路由
简介 Ext JS 5是一个重要的发布版本,它提供了许多新特性来创建丰富的.企业级的Web应用程序.MVVM和双向数据绑定为开发人员承担了大量的繁重工作.在Ext JS 5种,另一个新特性就是路由,它 ...
- 【翻译】在Ext JS 5应用程序中如何使用路由
原文:How to Use Routing in Your Ext JS 5 Apps 简介 Ext JS 5是一个重要的发布版本,它提供了许多新特性来创建丰富的.企业级的Web应用程序.MVVM和双 ...
随机推荐
- [Luogu 1284]三角形牧场
Description 和所有人一样,奶牛喜欢变化.它们正在设想新造型的牧场.奶牛建筑师Hei想建造围有漂亮白色栅栏的三角形牧场.她拥有N(3≤N≤40)块木板,每块的长度Li(1≤Li≤40)都是整 ...
- [SCOI 2010]字符串
Description lxhgww最近接到了一个生成字符串的任务,任务需要他把n个1和m个0组成字符串,但是任务还要求在组成的字符串中,在任意的前k个字符中,1的个数不能少于0的个数.现在lxhgw ...
- 【BZOJ2243】【SDOI2011】染色
题意见试题传送门 解题思路:显然是题树剖题. 考虑用线段树维护区间端点颜色与颜色数,这样就可以方便的合并,注意查询的时候对端点的特殊处理即可. 时间效率最高为\( O (m \log^{2} n) \ ...
- 【LSGDOJ 1850】滑雪课程
题目描述 贝西去科罗拉多州去滑雪,不过还她不太会玩,只是个能力为 1 的渣渣.贝西从 0 时刻进入滑雪场,一到 T 时刻就必须离开.滑雪场里有 N 条斜坡,第 i 条斜坡滑行一次需要 D i 分钟,要 ...
- bzoj1071[SCOI2007]组队
1071: [SCOI2007]组队 Time Limit: 3 Sec Memory Limit: 128 MBSubmit: 2472 Solved: 792[Submit][Status][ ...
- [bzoj4245][ONTAK2015]OR-XOR
来自FallDream的博客,未经允许,请勿转载,谢谢. 给定一个长度为n的序列a[1],a[2],...,a[n],请将它划分为m段连续的区间,设第i段的费用c[i]为该段内所有数字的异或和,则总费 ...
- python设计模式浅析
今天简单聊聊python的设计模式,GOF设计模式(c++)和Head first design pattern(Java)是两本设计模式的经典,基本可以照搬在python上面,但是你会发现pytho ...
- Mybatis Generator 代码生成配置
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE generatorConfiguration ...
- js时间比较，获取n天后（前）的日期
<html> <head> <meta http-equiv="Content-Type" content="textml; charset ...
- html取地址栏参数的方法
现在的人写的博客真是日常挖坑 闲的蛋疼 想把所有东西都转成jstl格式 有个界面是取地址栏的信息的 之前用的是 <%--不用jstl的方法直接传递--%> <%--String ro ...