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框"/>
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框"/>
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"}]
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});
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="新窗口"/>
Ext.get("btn").addListener("click",a);
});
</script>
<input id="btn"type="button" onclick="newWin()" value="新窗口"/>