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

最新推荐文章于 2023-03-18 15:33:57 发布

原创最新推荐文章于 2023-03-18 15:33:57 发布 · 534 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ext #界面 #前端 #技术

ExtJS是一款轻量级且功能强大的前端Ajax框架，用于开发RIA应用。它支持多种开发语言，如.NET、Java和PHP等。本文介绍了ExtJS的基本概念、下载地址、开发环境配置方法及简单的应用实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

</head>

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代码

-1>组件的配置属性及值

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

var button=new Ext.Button({

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

});

事件处理

addListner(eventname，callback);eg:

普通的js代码

Ext js代码

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窗口及对话框