extjs学习（一）

来源：互联网发布：六小龄童知乎扒皮编辑：程序博客网时间：2024/06/04 23:23

Ext是一个Ajax框架，用于在客户端创建丰富多彩的web应用程序界面，是在Yahoo!UI的基础上发展而来的。官方网址：http://www.extjs.com/ 现在改为:www.sencha.com。

ExtJS是一个用来开发前端应用程序界面的JS框架，借鉴Swing等思想，提供了一套完整的组件库及强大的ajax支持功能，可以用Ext来开发基于Ajax的富客户端应用。

个人感觉用extjs开发网站，几乎不用美工的参与，但是大量的js代码还是不小的挑战。适合做后台系统。

一、如何使用extjs

extjs3.2版本，需要引入样式文件（css文件），以及脚本库（两个，一个驱动adapter,一个ext-all.js）。

ext应用代码，使用Ext.onReady(function(){})来调用ExtJs组件。

（开始学习时，可将下载的extjs解压后，全部复制到工程下来学习。）

引入ExtJS的样式文件

ExtJS核心是一个javascript库，因此，我们先要引入Ext的javascript库存文件。ext的JS库文件分成两部分，一个是适配器adapter，其中定

义了事件处理、动画效果等底层的API，Ext提供了几种适配器，jquery、prototype、yui及Ext自生的适配器。

引入ExtJS的脚本库

<scripttype="text/javascript"src="plugins/extjs/ext-3.2/adapter/ext/ext-base.js"></script>

<scripttype="text/javascript"src="plugins/extjs/ext-3.2/ext-all.js"></script>

二、第一个HelloWorld程序

Ext.onReady(function(){    var win = new Ext.Window({           title:'测试窗口',           width:300,            height:200,            buttons:[             {text:'save'},{text:'cancel'}             ]});win.show();})

三、显示一棵树

extjs可以有很多中方式显示一棵树，下面提供一种简单的形式：

var tree=new Ext.tree.TreePanel({title:"小树一棵",        width:200,        height:200,root:new Ext.tree.AsyncTreeNode({              text:"树根",              children:[                       {text:"叶子1",leaf:true},                       {text:"叶子2",leaf:true}]            })});

定义一棵树，就是new TreePanel,必须定义根节点。

总结：使用extjs,就像使用Java中的类一样，使用某个组件，new下，然后定义他的属性，方法，以及事件驱动等。剩余的就是查API，然后就是将一个个组件拼起来，形成一个页面。

0 0