认识ExtJS
extjs是使用javascript、css和html等技术实现的主要用于创建用户界面,且与后台技术无关的前端ajax框架。
extjs来源于yui,开发理念来源于传统的桌面软件开发。
1.下载extjs,解压,得到目录结构
- builds:是extjs压缩后的代码,体积更小,加载更快
- docs :extjs的文档
- examples:官方示例
- locale:多国语言的资源文件
- overview:extjs的功能简述
- pkgs:extjs各部分功能的打包文件
- resource:extjs要用到的图片文件与样式文件。
- src:未压缩过的代码目录
- bootstrap.js:extjs库的引导文件
- ext-all.js :必须引入的核心库
- ext-all-debug.js:ext-all.js的调试版
2.也从hello world开始(extjs 4.0)
<HTML> <HEAD> <TITLE>HelloWorld</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="./ext-4.0/resources/css/ext-all.css" /> <script type="text/javascript" src="./ext-4.0/bootstrap.js"></script> <script type="text/javascript" src="./ext-4.0/locale/ext-lang-zh_CN.js"></script> <script type="text/javascript"> Ext.onReady(function(){ Ext.MessageBox.alert('HelloWorld', 'Hello World!Hello World!Hello World!Hello World!'); }); </script> </HEAD> <BODY></BODY> </HTML>
3.实现工具栏和菜单栏
<script type="text/javascript"> Ext.onReady(function(){ var toolbar = new Ext.toolbar.Toolbar({ renderTo:'toolbar', width:300 }); var childrenMenu = new Ext.menu.Menu({ ignoreParentClicks:true, items:[ {text:'open one'}, {text:'open two'} ] }); var fileMenu = new Ext.menu.Menu({ shadow:'frame', allowOtherMenus:true, items:[ new Ext.menu.Item({ text:'new' }), {text:'open',menu:childrenMenu}, {text:'close'} ] }); toolbar.add( { text:'新建', menu:fileMenu }, { text:'打开' }, { text:'保存' }, '->', '<a href="#">link</a>', 'text' ); }); </script> </HEAD> <BODY> <div id='toolbar'></div> </BODY>
4.最常用的表单
1)Ext.form.Basic基本表单 提供了字段管理、数据验证、表单提交、数据加载等功能
2)认识Ext.form.Panel表单面板 是表单项的容器,默认使用anchor布局
Ext.form.Panel与传统表单的提交方式、表单的验证和对表单组件的支持有不同:
(1)表单的提交方式 原始的方式是同步进行,panel使用异步方式
(2)对表单验证的支持 ExtJS支持javascript验证方式
(3)对表单组件的支持 panel支持ext封装后的高级组件
例子一:
<script type="text/javascript"> Ext.onReady(function(){ Ext.QuickTips.init(); var form = new Ext.form.Panel({ title:'myForm', height:120, width:200, frame:true, renderTo:'form', defaults:{ labelWidth:50, width:150, labelAlign:'left', allowBlank:false, blankText:'will not null', msgTarget:'qtip' }, items:[{ xtype:'textfield', fieldLabel:'name' }, { xtype:'numberfield', fieldLabel:'age' }] }); }); </script> </HEAD> <BODY> <div id='form'></div> </BODY>
5.面板和布局类
1)Ext.panel.Panel 主要包括5部分:底部工具栏,顶部工具栏,面板头部,面板底部,面板体
对于面板最重要的功能和作用就是在其中显示各种不同来源的内容,extjs提供了4种不同的显示内容的方式,分别是:
1)使用autoLoad配置项为面板加载远程页面 就是远程加载html文件
2)使用contentEl配置项为面板加载本地资源 加载当前页面中的html代码
3)使用html配置项自定义面板内容 自己编写html代码
4)使用items配置项在面板中添加组件
2)标准布局类 主要包括如下11种:
auto(自动布局) checkboxgroup(复选框组布局) fit(自适应布局) column(列布局)
accordion(折叠布局)table(表格布局) card(卡片式布局) border(边框布局)
anchor(锚点布局) box(盒布局) absolute(绝对位置布局)
(1)auto自动布局 默认采用,使用原始的HTML文档流来布局子元素。
(2)fit自适应布局 使唯一的子元素充满容器
(3)accordion折叠布局 只有一个子面板处于打开状态,其他的收缩起来
(4)card卡片式布局 多个子面板,只有一个处于打开状态,其他的需要调用事件才能显示出来
(5)anchor锚点布局 根据容器大小为其所包含的子面板进行定位。
(6)absolute绝对定位 可以根据面板的位置配合x/y坐标进行定位
(7)checkboxgroup复选框组布局
(8)column列布局 多列风格的布局样式
(9)table表格布局 可以创建出复杂的表格布局
(10)border边框布局 将整个容器分为5个部分:东南西北中。
(11)box盒布局
在ext中,所有的布局都是从ext.container开始的
3)使用viewport
viewport代表整个浏览器窗口的显示区域,将document.body作为渲染对象,它会根据浏览器窗口的大小自动调整自身的尺寸,每个页面中只允许出现一个viewport实例。
6.ext的事件和类
分为两种类型:自定义类型事件和浏览器事件
自定义事件:所有继承自Ext.util.Observable类的控件都可以支持事件,可以为这些对象定义一些事件,然后为这些事件配置监听器。当某个事件被触发时,ext会自动调用对应的监听器。
浏览器事件:传统意义上的鼠标单击、移动等事件。
相关推荐
ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS...ExtJS快速入门 ExtJS快速入门 ExtJS快速入门ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门
ExtJs入门实例ExtJs入门实例ExtJs入门实例
ExtJs的入门电子资料,ExtJs2.0 学习系列
ExtJS入门教程(超级详细).pdf
EXTJS4自学手册——EXT文件目录,本地加载文档,命名规范 EXTJS4自学手册——EXT基本方法、属性(onReady、define、create) EXTJS4自学手册——EXT基本方法、属性(apply、applyIf、constructor) EXTJS4自学手册...
ExtJS入门教程(超级详细)
extjs入门 extjs入门 extjs入门 extjs入门 extjs入门
学习ExtJs的思想莫过于一是组件,另外的一个就是面板。ExtJs其实是java Swing 的思想的变迁。基于组件的这种思想能让我们自由... 正本书抓住的就是这两个思想,得其要领,再加上很好的例子说明,真的可谓是入门之利器。
ExtJS入门教程 一、开始EXTJS 二、组件的介绍 三、EXT核心
extjs入门学习,各个组件的使用,包括Observable、Observable、BoxComponent、Container、Panel、Viewport及Window...
用Ext编写的多文件上传组件,已封装。 支持多文件上传,文件下载,文件删除,
ExtJS入门实例、包含各种详细代码,非常适合初学者学习
extjs入门到精通,实例有简单到复杂,还有综合实力,下载即可运行,环境也是配好的,希望对你有帮助!
extjs入门教程 extjs入门教程介绍,GRID,json介绍
【最新编排】EXTJS入门教程(超级详细)-20.pdf 【最新编排】EXTJS入门教程(超级详细)-20.pdf 【最新编排】EXTJS入门教程(超级详细)-20.pdf 【最新编排】EXTJS入门教程(超级详细)-20.pdf
Extjs入门实例chm版,非常好的Extjs学习资料
extjs入门.pdf
extjs入门简介,讲解基础的概念和架构图。供新手快速入门