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和双 ...
随机推荐
- Mysql之库表操作(胖胖老师)
SQL概念:结构化查询语言(SQL = Structured Query Language),也是一种编程语言(数据库查询和程序设计语言),可以用于数据的存取及查询,更新,管理关系型数据库系统ps: ...
- bzoj 3277: 串
Description 字符串是oi界常考的问题.现在给定你n个字符串,询问每个字符串有多少子串(不包括空串)是所有n个字符串中 至少k个字符串的子串(注意包括本身). Solution 出现 \(k ...
- 洛谷P1856 [USACO5.5]矩形周长Picture
题目背景 墙上贴着许多形状相同的海报.照片.它们的边都是水平和垂直的.每个矩形图片可能部分或全部的覆盖了其他图片.所有矩形合并后的边长称为周长. 题目描述 编写一个程序计算周长. 如图1所示7个矩形. ...
- 【SPOJ839】Optimal Marks 网络流
You are given an undirected graph G(V, E). Each vertex has a mark which is an integer from the range ...
- [Codeforces Round#417 Div.2]
来自FallDream的博客,未经允许,请勿转载,谢谢. 有毒的一场div2 找了个1300的小号,结果B题题目看错没交 D题题目剧毒 E题差了10秒钟没交上去. 233 ------- A.Sag ...
- （转）FIDDER教程
Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据. 使用Fiddler无论对开发还是测试来说,都有很大 ...
- c语言的第四次作业
(一)改错题 输出三角形的面积和周长,输入三角形的三条边a.b.c,如果能构成一个三角形,输出面积area和周长perimeter(保留2位小数):否则,输出"These sides do ...
- ASP.NET Core部署到Windows IIS
网上已经有许多ASP.NET Core关于Widows IIS部署的文章,在部署到服务器时遇到了一些问题,在这里我就不再对原理进行阐释(复制)了,只写下一些关键环节,想看原理的同学请参考官网,此文章作 ...
- 关于 printf scanf getchar
float默认小数6位 右对齐.-m 左对齐 在调用printf函数输出数据时,当数据的实际位宽大于printf函数中的指定位宽时,将按照数据的实际位宽输出数据. .n表精度 输出%符号 注意点 #i ...
- 用一个div模拟textarea的实现
<textarea> 标签定义一个多行的文本输入控件.但是它不能像div一样随着内容增加而自动增加,一言不合就出现滚动条,有是有为了更好的交互,可能需要使用div来模拟textarea的实 ...