Ext初学
2016-07-10 21:23
471 查看
EXTJS
EXTJSEXT介绍
EXTJS开发包
Spket开发插件
开发所需的包
EXTJS基本概念
ExtJS与传统的web开发中多了几个概念
EXT介绍
ExtJS的前身是YUI(Yahoo User Interface)。经过不断的发展与改进,ExtJS现在已经成功发布到了ExtJS4.0版本,并且成为构建RIA WEB应用的一套最完整、最成熟的javascript基础库。利用ExtJS构建的RIA WEB应用具有与桌面程序一样的标准用户界面和操作方式,并能够跨不同的浏览器平台使用。目前,大多数企业中已经选择ExtJS作为项目开发、克敌制胜的武器,因为他们可以享受ExtJS带来的类似于WIN32编程的原生态快乐。就目前的市场趋势,现在用户对体验的要求越来越高。涌现出很多优秀的前台javascript框架,如Prototype、JQuery、ExtJS等等,当然我们今天开始要学习的ExtJS无疑是其中优秀的解决方案之一。它能够帮助开发者快速实现良好的用户界面开发,在加上ExtJS又是开源的,所以ExtJS的生命力极强,作为web开发人员来说,我们一定要掌握这个优秀的技术。
EXTJS开发包
要开始Ext之旅的第一步就是要获得开发包,我们可以从官方网站里进行下载: http://www.sencha.com/products/extjs/download包结构说明:
builds目录为ExtJS压缩后的代码
docs目录为ExtJS的文档
examples目录中是官方的演示示例
locale是多国语言的资源文件,其中ext-lang-zh_CN.js是简体中文
overview是ExtJS的功能概述
pkgs中是ExtJS各部分功能的打包文件
resource中书ExtJS要用到的图片文件与样式表文件
src目录是未压缩的源码
bootstrap.js是ExtJS库的引导文件,通过参数可以自动切换ext-all.js和ext-debug.js
ext-all.js文件是ExtJS的核心库,是必须要引入的
ext-all-debug.js文件是-all.extjs的调试版,在调试的时候可能需要使用
Spket开发插件
对于软件开发而言,有好的开发工具往往能事半功倍。尤其是对于前台javascript这种解释执行的脚本语言,开发与调试过程往往非常困难,那么就必须要有好的工具加以支持。Spket支持javascript、XUL/XBL、Laszlo、SVG等新产品。具有代码自动完成,语法高亮等等功能特点。因此我们可以借助spket高效的开发ExtJS
下载地址:http://www.spket.com/ (当前最新版本:spket-1.6.18.zip)
安装插件小提示:
解压spket-1.6.18.zip,之后展开目录,分别将plugins目录与features目录分别复制到Eclipse的安装目录下,Eclipse3.2及以上版本都可以。
开发所需的包
我们在web工程中导入extjs包中的example,resource,bootstrap.js,ext-all-debug.js,ext-all.js,ext-lang-zh-CN.js用来我们项目的开发:
并在jsp页面中添加路径:
这样我们就可以开始写我们的第一个程序:hello world!
EXTJS基本概念
关于字体<把引入的ccs文件 字体由11px全局替换为12px即可>
属性layout:
设置布局 可以为对象,也可以为字符串
属性items:
其属性为数组,可以在里面定义当前控件的子控件
关于xtype:
在ExtJS应用中,很多时候通过xtype指定该位置使用什么组件,如果没有此属性那么就得用一个变量去指向一个组件,然后将其加入到父组件中,又或者使用一堆new关键字或Ext.create方法创建组件。这样影响了编写代码的效率和可读性。
ExtJS与传统的web开发中多了几个概念
如面板、布局、组件等;这有点回到了我们j2se中的AWT/SWING.没错,ExtJS的这些基本上和j2se中的AWT/SWING比较类似。面板Panel:面板就是一块区域,程序员可以在之上放置各种组件,从而形成用户界面。
布局Layout:布局是指组件在一个容器中的摆放方式。
组件Component:组件是指已经预先实现好的特定功能,并能够重用到编程中的代码段以及相关资源。
渲染Render:渲染是指含有ExtJ程序的页面下载完毕后在浏览器中完全展现出来的一个过程。
窗口和对话框(window、dialog):ExtJS中的窗口本质上为一个div并利用css进行格式化。
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02:一个炒鸡简单的react+redux例子
- JavaScript 各种遍历方式详解