ExtJS【笔记】

原创
2014/03/03 07:18
阅读数 129

#ExtJS #开始ExtJS ##2.1 获得ExtJS adapter:负责将里面提供第三方底层库(包括Ext 自带的底层库)映射为Ext 所支持 的底层库。
build: 压缩后的ext 全部源码(里面分类存放)。
docs: API 帮助文档。
exmaples:提供使用ExtJs 技术做出的小实例。
resources:Ext UI 资源文件目录,如CSS、图片文件都存放在这里面。
source: 无压缩Ext 全部的源码(里面分类存放) 遵从Lesser GNU (LGPL) 开源的 协议。
Ext-all.js:压缩后的Ext 全部源码。
ext-all-debug.js:无压缩的Ext 全部的源码(用于调试)。
ext-core.js:压缩后的Ext 的核心组件,包括sources/core 下的所有类。
ext-core-debug.js:无压缩Ext 的核心组件,包括sources/core 下的所有类。

##2.2 应用ExtJS 应用extjs 需要在页面中引入extjs 的样式及extjs 库文件,样式文件为resources/css/extall. css,extjs 的js 库文件主要包含两个,adapter/ext/ext-base.js 及ext-all.js,其中ext-base.js 表示框架基础库,ext-all.js 是extjs 的核心库。
要使用ExtJS 框架的页面中一般包括下面几句: <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="extjs/ext-all.js"></script>

在ExtJS 库文件及页面内容加载完后,ExtJS 会执行Ext.onReady 中指定的函数,因此 可以用,一般情况下每一个用户的ExtJS 应用都是从Ext.onReady 开始的,使用ExtJS 应用 程序的代码大致如下:
fn 也可以写成一个匿名函数的形式,因此上面的代码可以改成下面的形式:
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="extjs/ext-all.js"></script> <script> function fn() { alert(‘ExtJS库已加’); } Ext.onReady(fn); </script>

##2.3 ExtJS版的HelloWorld
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ExtJS</title> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="extjs/ext-all.js"></script> <script> Ext.onReady(function() { Ext.MessageBox.alert("hello","Hello,easyjf open source"); }); </script> </head> <body> </body> </html>

进一步,我们可以在页面上显示一个窗口,代码如下:

<script>
Ext.onReady(function()
{
	var win=new Ext.Window({title:"hello",width:300,height:200,html:'<h1>Hello,easyjf open source</h1>'});
	win.show();
});
</script>
展开阅读全文
打赏
0
3 收藏
分享
加载中
更多评论
打赏
0 评论
3 收藏
0
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部