ExtJs初步学习

来源：互联网发布：淘宝确认收货编辑：程序博客网时间：2024/06/04 19:39

ExtJs是一个很不错的Ajax框架，可以用来开发带有华丽外观的客户端应用，使得我们的b/s应用更加具有活力及生命力！

ExtJs是一个用javascript编写，与后台技术无关的前端ajax框架。

adapter：负责将里面提供第三方底层库(包括Ext自带的底层库)，映射为Ext所支持的底层库

docs:API帮助文档

examples:提供使用ExtJs技术做出的小实例

paks:全部ext源码

resources:Ext UI资源文件目录，如：css、图片文件都存放在这里

应用ExtJS：

应用extjs需要在页面中引入extjs样式，样式文件为resources/css/ext-all.css ，extjs的js库文件主要包含两个adapter/ext/ext-base.js 、ext-all.js，ext-base.js表示框架基础库，ext-all.js是extjs的核心库，adapter表示适配器，也就是说可以有多种适配器

要是使用ExtJs库，要在页面中使用以下几句：

//路径根据情况可做修改

一般情况下，每一个用户的ExtJs应用都是从Ext.onReady开始的，使用ExtJs应用程序代码大致如下：

function fn(){

alert(“hello”);

}

Ext.onReady(fn);

</script>

这里fn可以写成一个匿名函数的形式，因此上面的代码可以改成下面的形式：

function fn(){

alert(“hello”);}

Ext.onReady(function(){

alert(“hello”);

});

</script>

第一个ExtJs版的helloworld

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

Ext.onReady(function(){

Ext.Msg.alert("hello","hello world");

});

</script>

</head>

<body>

</body>

</html>

下面是一个窗口的例子：

Ext.onReady(function(){

var vin=new Ext.Window({

title:"hello",

width:300,

height:300,

html:'<h1>hello</h1>'

});

vin.show();

});

下面是一个面板的例子：

Ext.onReady(function(){

//Ext.Msg.alert("hello","hello liulimin jiwenfneg");

var obj={title:"hello",

width:300,

height:200,

html:'<h1>hello jiwenfeng</h1>'};

var panel= new Ext.Panel(obj);

panel.render("hello");

});