ExtJS【笔记】

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>

你可能感兴趣的:(ExtJS【笔记】)