您的位置：首页 > Web前端 > JavaScript

一篇文章教你学会使用ext js

2016-08-06 07:09 441 查看

Ext Js是一款轻量级（单选行，多选行，高亮显示选中的行，拖拽改变列宽度，按列排序）的前端Ajax框架，界面美观，功能强大。

ExtJS可以用来开发RIA也即富客户端的AJAX应用，是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。ExtJs最开始基于YUI技术，由开发人员JackSlocum开发，通过参考JavaSwing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。

Ext的<UI组件模型和开发理念脱胎、成型于Yahoo组件库YUI和Java平台上Swing两者，并为开发者屏蔽了大量跨浏览器方面的处理。相对来});说，EXT要比开发者直接针对DOM、W3C对象模型开发UI组件轻松。

1、下载地址：http://www.sencha.com

2、开发环境

Ext支持文本编辑，常见的Ext开发工具：JsEclipse、DreamWeave、Aptana、Spket、Komodo Edit等。

Eclipse+Spket的配置：

Eclipse、Spket、Ext解压，将Eclipse解压后的文件拷到程序目录下，把Spket复制到Eclipse的安装目录下，运行Eclipse。

window--->prefrences---->spket----->javascript prefiles--->new --->ExtJS---->add Library---->ExtJS----->add File---->Ext All--->选中ExtJS--->default--->ok,这样就设置了Ext代码提示功能了哦，重启Eclipse，就可以看到效果了哦.......

3、Ext 的简单应用----hello
ext

<head>

<link type="text/css"
rel="stylesheet" href="ext/resources/css/ext-all.css"/>引用样式文件

<link type="text/javascript"
href="extjs/adapter/ext/ext-base.js"/> 引用基础文件

<link
type="text/javascript" href="extjs/ext-all.js"/>
引用核心文件

</head>

<script>

Ext.onReady(function(){

Ext.MessageBox.alert("hello","hello Ext");

//Ext窗口

var win=new Ext.Window({title："hello",width:300,height:200,html:"<h1>hello,this is Ext window</h1>"});

win.show();

});

</script>

3、Ext组件与事件

组件的用法

1)new 关键字 eg：new Ext.window /new Ext.GridPanel(普通组件)

2)构造函数中传递构造参数来创建组件，组件的构造函数中一般包含一个对象，这个对象中包含创建组件所需要的配置属性及值，组件根据构造函数中参数及值来初始化组件，eg:

js代码

var panel=new
Ext.GridPanel({title："hello",width:300,height:200,html:"<h1>hello,this is Ext window</h1>"});

panel.render("hello");

html代码

<div id="hello"></div>
-1>组件的配置属性及值

JSON格式{属性名称：“值”，属性名称："值"};eg:

var button=new Ext.Button({

text:"add",pressed:true,handler:emptyFn

});

事件处理

addListner(eventname，callback);eg:

普通的js代码

<script type="text/javascript">

function a (){

alert("some thing");

}

</script>

<input id="btnAlert"type="button" onclick="a()" value="alert框"/>

Ext js代码

<script type="text/javascript">
function
a (){
alert("some
thing");
}
Ext.onReady(function(){
Ext.get("btnAlert").addListener("click",a);
});
</script>
<input id="btnAlert"type="button" onclick="a()" value="alert框"/>

4、Ext面板panel

面板的组成：顶部工具栏、底部工具栏、面板顶部、面板底部、面板主区域 eg：

Ext.onReady(function(){

new Ext.panel({

renderTo:"hello",

titile:"面板头部的header",

width:300,

height:200,

html:'<h1>面板主区域</h1>',

tbar:[{text:"顶部工具栏"}],

bbar:[{text:"底部工具栏"}],

button:[{text:"按钮位于footer"}]

});

});

5、Ext窗口及对话框

<script type="text/javascript">

Ext.onReady(function(){

var i=0;

var win=new Ext.window({

titile:"窗口"+i++,

width:300,

height:200,

maximizable:true});

win.show();

Ext.get("btn").addListener("click",a);

});

</script>

<input id="btn"type="button" onclick="newWin()" value="新窗口"/>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript ext 界面前端技术

相关文章推荐

新的分享

章节导航