extjs简介_动力节点Java学院整理
ExtJS:富客户端开发的得力助手
ExtJS为开发者在构建富客户端的B/S应用时,提供了丰富的UI组件及统一的主题,从而极大地便利了开发过程,提高了开发效率。虽然它不适合用于互联网站开发,但其强大的功能和高效的开发体验使其在富客户端领域独树一帜。
目录文件概览
当你打开ExtJS的源代码,你会看到以下几个主要目录文件:
builds:这里存放的是压缩后的ExtJS代码,体积更小,加载更快。
docs:开发者的好帮手,这里存放的是丰富的开发文档。
examples:官方提供的各种演示示例,帮助开发者更好地理解和使用ExtJS。
locale:多国语言资源文件,支持全球各地的开发者。
pkgs:ExtJS各部分功能的打包文件,方便管理和使用。
resource:存放ExtJS所需的CSS和图片文件。
src:未压缩的源代码目录,方便开发者阅读和理解。
bootstarp.js:ExtJS库的引导文件,可以自动切换ext-all.js与ext-all-debug.js。
ext-all.js:ExtJS的核心库。
ext-all-debug.js:带有详细调试信息的ExtJS核心库,方便开发者调试。
ext-all-debug-w-ments.js:带注释的ExtJS核心库调试版,有助于学习和理解。
如何引入文件
在项目中要使用ExtJS,需要引入一些核心文件。整个resources文件夹是必备的,它包含了ExtJS的所有资源文件,如CSS和图片。你需要引入ext-all.js(或用于调试的ext-all-debug.js/ext-all-debug-w-ments.js)以及ext-lang-zh_CN.js(用于中文支持)。
一个简单的示例
下面是一个简单的HTML页面示例,它引入了ExtJS的相关文件并创建了一个简单的窗口:
```html
Ext.onReady(function() {
// 创建一个窗体
var win = new Ext.Window({
width: 300,
height: 300,
items: [],
modal: true,
buttonAlign: 'center',
buttons: [{
text: '测试', id: 'btnTest',
handler: function() {
Ext.Msg.show({
title: '询问',
msg: '您喜欢 ExtJs 吗?'
});
}
}]
}).show(); // 显示窗体
});