Extjs
来源:互联网 发布:话剧 知乎 编辑:程序博客网 时间:2024/05/17 04:03
http://examples.sencha.com/extjs/6.2.0/examples/
http://docs.sencha.com/extjs/6.2.0/
extjs 官方网站https://www.sencha.com/ Products—extjs
https://www.sencha.com/products/extjs/
http://docs.sencha.com/文档
http://docs.sencha.com/extjs/6.2.0/index.html
http://examples.sencha.com/extjs/6.2.0/examples/
http://docs.sencha.com/extjs/6.2.0/guides/getting_started/getting_started.html
https://www.sencha.com/products/sencha-cmd/
开源版本https://www.sencha.com/legal/GPL/
store-Licensing -SenchantedGPL Download Page
右边Sencha Ext JS输入邮箱 Download sdk
http://cdn.sencha.com/ext/gpl/ext-6.0.0-gpl.zip
指定SDK 创建APP
sencha -sdk /path/to/extjs/framework generate app AppName path/to/app cd /path/to/app sencha app watch 启动内置服务器浏览HTML (每改动一个文件 自动刷新界面)
会生成一个地址 粘贴到浏览器中就可以访问了
认识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)
01.
<HTML>
02.
<HEAD>
03.
<TITLE>HelloWorld</TITLE>
04.
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
>
05.
<link rel=
"stylesheet"
type=
"text/css"
href=
"./ext-4.0/resources/css/ext-all.css"
/>
06.
<script type=
"text/javascript"
src=
"./ext-4.0/bootstrap.js"
></script>
07.
<script type=
"text/javascript"
src=
"./ext-4.0/locale/ext-lang-zh_CN.js"
></script>
08.
<script type=
"text/javascript"
>
09.
Ext.onReady(
function
(){
10.
Ext.MessageBox.alert(
'HelloWorld'
,
'Hello World!Hello World!Hello World!Hello World!'
);
11.
});
12.
</script>
13.
</HEAD>
14.
<BODY></BODY>
15.
</HTML>
3.实现工具栏和菜单栏
01.
<script type=
"text/javascript"
>
02.
Ext.onReady(
function
(){
03.
var
toolbar =
new
Ext.toolbar.Toolbar({
04.
renderTo:
'toolbar'
,
05.
width:300
06.
});
07.
08.
var
childrenMenu =
new
Ext.menu.Menu({
09.
ignoreParentClicks:
true
,
10.
items:[
11.
{text:
'open one'
},
12.
{text:
'open two'
}
13.
]
14.
});
15.
16.
var
fileMenu =
new
Ext.menu.Menu({
17.
shadow:
'frame'
,
18.
allowOtherMenus:
true
,
19.
items:[
20.
new
Ext.menu.Item({
21.
text:
'new'
22.
}),
23.
{text:
'open'
,menu:childrenMenu},
24.
{text:
'close'
}
25.
]
26.
});
27.
28.
29.
toolbar.add(
30.
{
31.
text:
'新建'
,
32.
menu:fileMenu
33.
},
34.
{
35.
text:
'打开'
36.
},
37.
{
38.
text:
'保存'
39.
},
40.
'->'
,
41.
'<a href="#">link</a>'
,
42.
'text'
43.
);
44.
45.
});
46.
</script>
47.
</HEAD>
48.
<BODY>
49.
<div id=
'toolbar'
></div>
50.
</BODY>
4.最常用的表单
1)Ext.form.Basic基本表单 提供了字段管理、数据验证、表单提交、数据加载等功能
2)认识Ext.form.Panel表单面板 是表单项的容器,默认使用anchor布局
Ext.form.Panel与传统表单的提交方式、表单的验证和对表单组件的支持有不同:
(1)表单的提交方式 原始的方式是同步进行,panel使用异步方式
(2)对表单验证的支持 ExtJS支持javascript验证方式
(3)对表单组件的支持 panel支持ext封装后的高级组件
例子一:
01.
<script type=
"text/javascript"
>
02.
Ext.onReady(
function
(){
03.
Ext.QuickTips.init();
04.
var
form =
new
Ext.form.Panel({
05.
title:
'myForm'
,
06.
height:120,
07.
width:200,
08.
frame:
true
,
09.
renderTo:
'form'
,
10.
defaults:{
11.
labelWidth:50,
12.
width:150,
13.
labelAlign:
'left'
,
14.
allowBlank:
false
,
15.
blankText:
'will not null'
,
16.
msgTarget:
'qtip'
17.
},
18.
items:[{
19.
xtype:
'textfield'
,
20.
fieldLabel:
'name'
21.
},
22.
{
23.
xtype:
'numberfield'
,
24.
fieldLabel:
'age'
25.
}]
26.
});
27.
});
28.
</script>
29.
</HEAD>
30.
<BODY>
31.
<div id=
'form'
></div>
32.
</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会自动调用对应的监听器。
浏览器事件:传统意义上的鼠标单击、移动等事件。
作者:陈建虹
原文:http://blog.csdn.net/cjh6311882/article/details/8287283
- ExtJS
- extJs
- ExtJs
- extjs
- ExtJS
- ExtJS
- Extjs
- ExtJs
- extjs
- Extjs
- Extjs
- Extjs
- extjs
- ExtJs
- extjs
- extjs
- ExtJS
- Extjs
- SVN服务器搭建和使用(三)
- 【第5周 项目1-建立顺序栈算法库】
- 数据预处理2
- Socket TCP CS
- 第五周 项目一(9)契波那契数列(Raptor)
- Extjs
- sdl2 for android ubuntu开发环境搭建记录,编译SDL2 on ubuntu 16.04 x64
- 第五周项目7,从1加到100
- Android组件10—TabHost
- xml解析——增删改查操作后将其修改结果保存
- 深入分析Javascript事件代理
- 第五周- 项目二 建立链栈算法库
- 关于OSB的weblogic.socket.MaxMessageSizeExceededException错误
- 第5周项目1-建立顺序栈算法库