ExtJS学习心得

ExtJS 的学习曲线太陡峭了，这是看了文档和 example 给我的感觉。

下面我介绍一下自己的学习路线及过程：

我学习 ExtJS 的第一个 example 是 Window ，因为我首先是被这个吸引住了，我照着 hello demo

用 JS 直接生成 window ， oK, 很顺利的产生了一个窗体。源码如下：

Javascript ：

Ext.onReady(function(){

var win = new Ext.Window({

el:'hello-win',// 将此 div 创建成窗体对象

layout:'fit',// 布局

});

应该注意上面的 el 属性，这个属性在以后的 demo 中随处可见，因为它太重要了，因为它，我

们可以按照正常的方式做页面设计，然后借助这个属性可以用 ExtJS 的样式属性来包装我们的

页面效果。此外注意窗体的 show(container) 方法，这个方法指定要在那里渲染这个窗体。

Html ：

<div id='hello-win'><div class='x-window-header'>Hello Dialog</div></div>

注意我们创建了两个 DIV ，一个是用来创建窗体的，另外一个是创建窗体的标题栏的。

从这个 demo 可以看出，我们成功的创建了一个 ExtJS 样式的窗体，这个窗体有标题，可以关

闭，可以自由的拖动，拖放。值得注意的是，我们是用自己的 div 来创建的窗体。

我们先不管 window 中是否存在内容，接下来我们创建一个简单的 tab 。

Tab 在日常开发中我用的不多，在这里也介绍一下。

Javascript ：

Ext.onReady(function(){

//tabs create by div

var tabs = new Ext.TabPanel({

注意这里的 applyTo 方法，这个方法就是将我们自己创建的 div 渲染成一个 tab ，另外注意

autoTabs 方法，它将会把我们的创建的 id 为 tabs 的 div 的内部样式为 x-tab 的 div 渲染成我们 的

tab 项 .

activeTab ： 0 说明索引为 0 的 tab 为当前活动的， deferredRender 我也不知道，也没看文档 .

Html:

<div id='tabs'>

<div class='x-tab' title='The First Tab'> 这里是 The First Tab 的内容区 </div>

<div class='x-tab' title='The Second Tab'> 这里是 The Second Tab 的内容区 </div>

</div>

注意这里我们又是用了自己的 div

下面我们把这个 tab 放到我们先前创建的 window 中去

deferredRender: false,

autoTabs: true

});

var win = new Ext.Window({

el:'hello-win',// 将此 div 创建成窗体对象

contentEl: 'win-content',// 窗体的内容区

layout:'fit',// 布局

width:500,

height:300,

closeAction:'hide',// 设置是否可以关闭

主要这里我们在 window 内部添加了 contentEl:'win-content' ,items:tabs 的属性配置。

contentEl 表明了这个窗体的内容区

Items 表明了这个窗体将包含的组件

Html ：

<div id='hello-win'>

<div id='win-content'>

<div class='x-window-header'> 包含了内容的 window</div>

<div id='tabs'>

<div class='x-tab' title='The First Tab'> 这里是 The First

Tab

的内容区 </div>

<div class='x-tab' title='The Second Tab'> 这里是 The Second Tab 的内容区 </div>