Extjs 入门资料

1.Ext简介

.Extjs是一个Ajax框架，是一个用javascript写的，用于在客户端创建丰富多彩的web应用程序界面。ExtJs可以用来开发RIA（Rich Internet Application,富互联网应用系统）的Ajax应用框架。

ExtJs是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。因此，可以把ExtJs用在.Net,Java.Php等各种开发语言开发的应用中

2.Ext库文件说明                                                              

.要使用extjs，那么首先要得到extjs库文件，该框架是开源的，可以直接从官方网站下载。

解压后看到文件有：

adapter: 负责将里面提供的第三方底层库（包括ext自带的底层库）映射为Ext所支持的底层库。

build ：压缩后的ext全部源码（里面分类存放）

docs ： API帮助文档

examples ：提供使用ExtJS技术做出的小实验

resources ：ExtUI资源文件目录，如CSS、图片文件都存放在这里。

source : 没有经过压缩的Ext全部的源码（里面分类存放），遵从Lesser GNU开源的协议。

Ext-all.js ： 压缩后的Ext全部源码

ext-all-debug.js ：未经压缩的Ext全部的源码（用于调试）

ext-core.js ：压缩后的Ext的核心组件，包括sources/core下的所有类。

ext-core-debug.js： 未经压缩的Ext核心组件，包括sources/core下的所有类。

3.应用ExtJs

应用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表示适配器，也就是说可以有多种适配器，因此可以把adapter/ext/ext-base.js换成adapter/jquery/ext-jquery-adapter.js,或adapter/prototype/ext-prototype-adapter.js等。

一个要使用extjs框架的页面中一般要包括下面几句：

<link rel=”stylesheet” type=”text/css” href=”extjs/resources/css/ext-all.css”/>

<****** type=”text/javascript” src=”extjs/adapter/ext/ext-base.js”></script>

<****** type=”text/javascript” src=”extjs/ext-all.js”></script>

在ExtJs库文件及页面内容加载完后，ExtJs会执行Ext.onReady中指定的函数。一般情况下用户的ExtJs应用都是从Ext.onReady开始的，使用ExtJs应用程序的代码大致如下：

6.ExtJs核心组件

1.Component也就是组件，Ext中使用Ext.Component类来定义组件，其它具体的组件及控件都是继承该类实现。Component定义了一个标准的Ext组件生命周期管理：创建、渲染、销毁等。另外还包含了所有组件公有的一些基本属性及行为比如显示或隐藏、启用或禁用等。可以通过Ext.getCmp方法来获得一个组件。所有的组件都可以放到Ext.Container中，并自动支持延迟渲染。Ext中所有需要放到一个layout中渲染显示的可视化部件需要继承Component或其子类。

所有component都有一个Ext组件类型值，即xtype属*，可以使用getXType方法得到组件的xtype值，isXType是用来判断一个组件是否属于指定的类型。

2.BoxComponent，父类是Ext.Component，所有盒状组件的基类，所有具有边界属性的组件的基类。所有的容器类都继承了Ext.BoxComponent

属*： autoHeight 自动高度适应，设置为true则使用样式height：‘auto’，否则为固定的高度，默认为false

       autoWidth 自动宽度适应，设置为true则使用样式width：‘auto’， 否则为固定的高度，默认为false

3.Container 容器 父类Ext.BoxComponent 。是Ext中所有具有容器功能的组件的基类。容器组件包含处理子项的一些基本行为，负责添加、插入、删除这些子项。容器提供布局支持功能，可以通过布局来可视化渲染容器中的子组件。这个类是用于共其它容器类继承，一般不直接使用new关键字创建这个类的实例。

7 使用面板

面板Panel是ExtJs控件的基础，很多高级控件都是在面板的基础上扩展的，还有其它大多数控件也都直接或间接与它有关系。应用程序的界面一般情况下是由一个一个的面板通过不同的组织方式形成。

面板组成部分：一个顶部工具栏（tbar），一个底部工具栏（bbar），面板头部（header），面板尾部（bottom），面板主区域（body）几个部分组成。 面板的类名为Ext.Panel，其xtype为panel. 如例子：panel2.html

属*： autoScroll     是否自动添加滚动条。为true则在面板的body元素中使用样式 overflow：‘auto‘，

                    从而在学要的时候会显示一个滚动条。为false则表示不显示滚动条，会导致截断多余的内容，默认值为false。

       hideCollapseTool   在collapsible为true时，是否显示关闭/开启面板的按钮，默认为false

7.1工具栏Toolbar

面板中可以有工具栏，工具栏可以位于面板的顶部和底部，Ext中的工具栏是由Ext.Toolbar类表示的。是其它工具栏的基类。工具栏上可以放按钮、文本、分隔符等内容。可以直接通过面板的tools配置选项往面板头部加入预定义的工具栏选项。还可以在顶部或底部工具栏中加入各种工具栏选项。（eg。panel2.html）

Ext中的工具栏中的项目主要由下面的类定义：

Ext.Toolbar.Button--------按钮，xtype为tbbutton

Ext.Toolbar.TextItem---------文本，xtype为tbtext

Ext.Toolbar.Fill------------填充区域，xtype为tbfill

Ext.Toolbar.Separator---------分隔符，xtype为tbseparator

Ext.Toolbar.Spacer-----------一个空格，xtype为tbspacer

Ext.Toolbar.SplitButton--------Split按钮，xtype为tbsplit

7.2选择面板TabPanel

选择面板也就是指包含Tab的面板，一个面板中会有多个tab，同一时刻活动tab只能是一个。选项面板在Ext中由类Ext.TabPanel来定义，该类直接继承自Panel，因此他实际上也是一个面板。Ext并没有针对选项面板中的Tab专门定义一个新的类，每一个tab其实也就是普通的Panel而已。（eg。tabPanel.html）

7.3视图区ViewPort

在前面的实例中，为了显示一个面板，我们需要在页面上添加一个<div>，然后把Ext控件渲染到这个div上。ViewPort代表整个浏览器显示区域，该对象渲染到页面的body区域，并会随着浏览器显示区域的大小自动改变，一个页面中只能有一个ViewPort实例。

eg。Ext.onReady(function(){

new Ext.ViewPort({

enableTabScroll:true,

layout:”fit”,

items:[{title:”面板”,

html:””,

bbar:[{text:”button1”},

{text:”button2”}]

}]

});

});

ViewPort不需要在指定renderTo，而我们也看到ViewPort确实填充了整个浏览器显示区域，并会随着浏览器显示区域大小的改变而改变。

ViewPort主要用于程序的主页面，可以通过使用不同的布局来搭建不同风格的应用程序主界面，在ViewPort上常用的布局有fit，border等。（eg。viewPort.html）

8 窗口、对话框及提示框

8.1窗口Window

8.1.1窗口基本应用

ExtJs中窗口是由Ext.Window类定义，该类继承自Ext.Panel，因此窗口其实是一种特殊的面板Panel，窗口包含了浮动、可拖动、可关闭、最大化、最小化等特性。（eg、window.html）

8.1.2窗口分组

窗口是分组进行管理的，可以对一组窗口进行操作，默认情况下的窗口都是默认组Ext.WindowMgr中。窗口分组由类Ext.WindowGroup定义，该类包括bringToFrong、getActive、hideAll、sendToBack等方法用来对分组中的窗口进行的操作。（eg、windowGroup.html）

8.2对话框MessageBox

8.2.1对话框基本应用

Ext的对话框都封装在Ext.MessageBox类，该类还有一个简写形式即Ext.Msg，可以直接通过Ext.MessageBox或Ext.Msg类直接调用相应的对话框方法来显示漂亮的Ext对话框。消息框MessageBox是异步的，不同于正常的JavaScript中的alert方法（将中断浏览器的操作）。显示一个MessageBox的时候不会影响其他代码的执行，因此，如果需要用户在对消息框反馈之后执行一些代码，就必须要使用回调函数。

1.   Ext.MessageBox.alert(“请注意”, ” 这是ExtJs的提示框 “);

2.   Ext.MessageBox.confirm(“请确认”,”是否真的要删除指定的内容”,function(button,text){

if(button==”yes”)

{alert(“成功删除”);}

});

3. Ext.MessageBox.prompt(“输入提示框”,”请输入你的新年愿望:”,function(button,text){

if(button==”yes”)

{alert(“你的新年愿望是：”+text);}

else

{alert(“你放弃了操作”);}

});

在实际应用中，可以直接使用MessageBox的show方法来显示自定义的对话框。eg、

function save(button)

{

if(button==”yes”)

{

//执行数据保存操作

}

else if(button==”no”)

{

//不保存数据

}

else

{

//取消当前操作

}

}

Ext.MessageBox.show({

   title:’保存数据’,

   msg:’你已经作了一些数据操作，是否要保存当前内容的修改?’,

   buttons:Ext.Msg.YESNOCANCEL,

   fn:save,

   icon:Ext.MessageBox.QUESTION

});

8.2.2提示框Tip

提示框是指当我们把鼠标移动并停留到页面上的某一个元素上时，在页面上会出现一个对该元素说明并悬浮在屏幕上的提示区域，当鼠标移出该元素，则该提示框会自动隐藏。

Tip继承Panel，也就是说ExtJs中使用Panel来显示提示框信息。

eg、Ext.onReady(function(){

var tip=new Ext.Tip({

html:”这是一个简单的提示框”

});

var el=Ext.get(“hello”);

el.on({

“mouseover”:function(){

tip.showBy(el);

},

“mouseout”:function(){

tip.hide();

}

});

});

<div id=”hello”>提示框</div>

ExtJs在Tip类的基础上，提供了专门用于元素提示信息的ToopTip以及在页面中进行快速提示的QuickTip等类。直接使用ToopTip，则不需要自己在元素的mouseover及mouseout事件响应函数中手动处理信息提示框的隐藏及显示。

Ext.onReady(function(){

var el=Ext.get(“hello”);

var tip=new Ext.ToolTip({

html:”这是一个简单的提示框”,

target:el

});

});

…………….

9         布局layout

9.1基本应用

所谓布局就是指容器组件中子元素的分布、排列组合方式。Ext的所有容器组件都支持布局操作，每一个容器都会有一个对应的布局，布局负责管理容器组件中子元素的排序、组合及渲染方式等。

ExtJs的布局基类为Ext.layout.ContainerLayout，其它布局都继承该类。ExtJs的容器组件包含一个layout及layoutConfig配置属*，这两个属性用来指定容器使用的布局及布局的详细配置信息。如果没有指定容器组件的layout则默认会使用ContainerLayout作为布局,有的布局学要layoutConfig配置，有的则不需要layoutConfig配置。

Ext.onReady(function(){

new Ext.Panel({

renderTo:”hello”,

width:400,

height:200,

layout:”column”,

   items:[{columnWidth:.5,   //width:100 可用来指定具体的宽度

title:”面板1”},

{columnWidth:.5,

title:”面板2”

}]

});

});

Ext中的一些容器组件都已经指定所使用的布局，比如TabPanel使用card布局、FormPanel使用form布局，GridPanel中的表格使用column布局等，我们在使用这些组件的时候，不能给这些容器组件再指定另外的布局。

9.2    Border区域布局

Border布局由类Ext.layout.BorderLayout定义，布局名称为border。该布局把容器分为“东”、“南”、“西”、“北”、“中”五块区域，分别由east , south , west , north , center来表示，在往容器中添加子元素的时候，我们只需要通过region配置选项来指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置。（eg、viewPort.html）

9.3    Column列布局（例子 和上面的一样）