包含extjs笔记系列的词条

本文目录一览：

• 1、ExtJS是什么，一位学长说的，对这个从未听说
• 2、Extjs4模仿desktop的桌面问题
• 3、如何设置 Ext.Viewport 的宽度(定位)
• 4、转：新手如何学习ExtJS 4

ExtJS是什么，一位学长说的，对这个从未听说

1.extja是什么？

答： ExtJS是一种主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。

功能丰富，无人能出其右

无论是界面之美，还是功能之强，ext的表格控件都高居榜首。

单选行，多选行，高亮显示选中的行，推拽改变列宽度，按列排序，这些基本功能咱们就不提了。

自动生成行号，支持checkbox全选，动态选择显示哪些列，支持本地以及远程分页，可以对单元格按照自己的想法进行渲染，这些也算可以想到的功能。

再加上可编辑grid，添加新行，删除一或多行，提示脏数据，推拽改变grid大小，grid之间推拽一或多行，甚至可以在tree和grid之间进行拖拽，啊，这些功能实在太神奇了。更令人惊叹的是，这些功能竟然都在ext表格控件里实现了。

呵呵~不过ext也不是万能的，与fins的ecside比较，ext不能锁定列（土豆说1.x里支持锁定列，但是2.0里没有了，因为影响效率。），也没有默认的统计功能，也不支持excel，pdf等导出数据。另外fins说，通过测试ecside的效率明显优于ext呢。:)

[编辑本段]Ext发展史

1、第一只“出海”的YUI-Ext只是作者Jack打算对基于BSD协议的Yahoo!UI库进行自定义的扩展，但后来一度风头盖过其父辈YUI，足以说明 大家对它的热情，很多人把它投入项目人并不十分了解它。分析人士打了一比喻：就好比尚未谋面， 并不了解一个人的家庭、教育、品行等背景，只因为他有一副精致漂亮的外观，就对其陷入了疯狂的倾慕之中。因此分析人士建议，在投入项目前，要认真仔细地了 解EXT的内在原理和与其他Ajax库不同地方。

2、在2006年初 ，Jack Slocum(杰克斯·洛克姆 ) 就一套公用设施扩建为Yahoo! User Interface (YUI) 库而工作。这些扩展很快组织成一个独立的库代码并以” yui-ext” 的名义下发布。

3、在2006年秋天,Jack发行了版本为0.33的yui-ext,而最终被证明为最后版本的代码，根据这名字（下开放源代码DSB许可）。在年底之前，这个库已大受欢迎, 名字被简化为Ext，反映了它作为一个框架的成熟和独立。

该公司成立于2007年初，Ext现在为双执照，使用LGPL和一个商业执照。

4、在2007年4月1日，发布1.0正式版。

5、直至今日(2008年4月1日)ExtJS已发展涵盖美国、日本、中国、法国、德国等全球范围的用户，现在的版本为Ext-3.0

6、官方在2009年4月14-16日的首次Ext Conference中发布了Ext的3.0 RC版本。

7、2009年5月4日，Ext的3.0 版本发布。

[编辑本段]什么是EXT

1、ExtJS可以用来开发RIA也即富客户端的AJAX应用，是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。ExtJs最开始基于YUI技术，由开发人员JackSlocum开发，通过参考JavaSwing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。

2、Ext的UI组件模型和开发理念脱胎、成型于Yahoo组件库YUI和Java平台上Swing两者，并为开发者屏蔽了大量跨浏览器方面的处理。相对来说，EXT要比开发者直接针对DOM、W3C对象模型开发UI组件轻松。

[编辑本段]ExtJs UI Engine简介

ExtJs初期仅是对Yahoo! UI的对话框扩展，后来逐渐有了自己的特色，深受网友的喜爱。 发展至今， Ext除YUI外还支持Jquery、Prototype等的多种JS底层库，让大家自由地选择。该框架完全基于纯Html/CSS+JS技术，提供丰富的跨浏览器UI组件，灵活采用JSON/XML数据源开发，使得服务端表示层的负荷真正减轻，从而达到客户端的MVC应用！

ExtJs支持多平台下的主流浏览器 Internet Explorer 6+ FireFox 1.5+ (PC, Mac) Safari2+、Opera9+。在使用的厂家包括IBM、Adobe、Cisco和更多。ExtJs官方网站

[编辑本段]Ajax主流框架与ExtJS

JQuery、 Prototype和YUI都属于非常核心的JS库。虽然YUI，还有最近的JQuery，都给自己构建了一系列的UI器件（Widget），不过却没有一个真正的整合好的和完整的程序开发平台。哪怕是这些低层的核心库已经非常不错了，但当投入到真正的开发环境中，依然需要开发者做大量的工作去完善很多缺失之处。而Ext就是要填补这些缺口。主流开源框架中只有Dojo像Ext一样，尝试着提供整合的开发平台。相比Dojo这个出色的工具包，我们认为 Ext能提供一个粘合度更高的应用程序框架。Ext的各个组件在设计之时就要求和其它Ext组件组合一起工作是无缝合作的。这种流畅的互通性，离不开一个紧密合作的团队，还必须时刻强调设计和开发这两方面目标上的统一，而这点是很多开源项目未能做到的。从构建每一个组件开始，我们始终都强调组件的外观、性能、互通性和可扩展性，而我们认为组件已经达到了这几点的要求。

Ext绝对可以单独使用。实际上，除了有特定的要求，推荐单独使用Ext，这样的话文件占位更小，支持和整合也更紧密。我们也支持与jQuery、 YUI或Prototype整合使用，作为低层库的角色出现，以提供处理各种核心的服务，如DOM和事件处理，Ajax连接和动画特效。使用整合方式的一个原因是它们已具备了一些特定的器件而Ext并没有原生支持——像YUI的History控件便是一个典型的例子。这时，Ext需要依赖YUI这个库的底层来实现History控件，这样一来的话也可免去Ext自身底层库，从而减少了整个程序的内存占用。另一个使用整合方式的原因是，对于许多已在使用其他底层库的程序，你可能希望逐步加入Ext。总之，如果已经有了其他库，Ext可已利用它们。我们的宗旨是为用户提供各种可能性和性能上的优化。而事实是，只要实现了相对应的底层库接口，为任意一个框架添加上适配器是没有问题的——人们可以轻松地将Dojo、Moo、Ajax.NET，或其它JS库转变为 Ext的底层。

Ext从2.x开始收费，这给他的应用前景带来一些问题。不过对国内开发人员的影响不大，毕竟是客户付款。

[编辑本段]Ext学习及应用经验小结

一、理解Html DOM、Ext Element及Component

要学习及应用好Ext框架，需要理解Html DOM、Ext Element及Component三者的区别。

Ext是基于Web的富客户端框架，其完全是基于标准W3C技术构建设的，使用到的都是HTML、CSS、DIV等相关技术。Ext最杰出之处，是开发了一系列非常简单易用的控件及组件，我们只需要使用这些组件就能实现各种丰富多彩的UI的开发。

无论组件有多少配置属性、还是事件、方法等等，其最终都会转化为HTML在浏览器上显示出来，而每一个HTML页面都有一个层次分明的DOM树模型，浏览器中的所有内容都有相应的DOM对象，动态改变页面的内容，正是通过使用脚本语言来操作DOM对象实现。

仅仅有DOM是不够的，比如要把页面中的某一个节点移到其它位置，要给某一个节点添加阴影效果，要隐藏或显示某一个节点等，我们都需要通过几句 javascript才能完成。因此，Ext在DOM的基础上，创建了Ext Element，可以使用Element来包装任何DOM，Element对象中添加了一系列快捷、简便的实用方法。

对于终端用户来说，仅仅有Element是不够的，比如用户要显示一个表格、要显示一棵树、要显示一个弹出窗口等。因此，除了Element以外，Ext 还建立了一系列的客户端界面组件Component，我们在编程时，只要使用这些组件Componet即可实现相关数据展示及交互等，而 Component是较高层次的抽象，每一个组件在渲染render的时候，都会依次通过Element、DOM来生成最终的页面效果。

在使用Ext开发的应用程序中，组件Component是最高层次的抽象，是直接给用户使用的，Ext Element是Ext的底层API，主要是由Ext或自定义组件调用的，而DOM是W3C标准定义的原始API，Ext的Element通过操作DOM 来实现页面的效果显示。

在Ext中，组件渲染以后可以通过访问组件的el属性来得到组件对应的Element，通过访问Element的dom属性可以得到其下面的DOM对象。另外，我们可以通过通过Ext类的快捷方法getCmp、get、getDom等方法来得组件Component、Ext元素Element及DOM节点。比如：

var view=new Ext.Viewport();//创建了一个组件Component

view.el.setOpacity(.5);//调用Element的setOpacity方法

view.el.dom.innerHTML=”Hello Ext”;//通过Element的dom属性操作DOM对象

再看下面的代码：

var win=new Ext.Window({id:”win1″,title:”我的窗口”,width:200,height:200});

win.show();

var c=Ext.getCmp(“win1”);//得到组件win

var e=Ext.get(“win1”);//根据id得到组件win相应的Element

var dom=Ext.getDom(“win1”);//得到id为win1的DOM节点

二、熟悉ext组件体系

Ext2.0对整个框架进行了重构，最为杰出的是推出了一个以Component类为基础的组件体系，在Component类基础上，使用面向对象的方法，设计了一系列的组件及控件。因此，要能游刃有余地使用Ext，熟悉Ext组件体系是最基本的。

在《ExtJS实用开发指南》中，有如下面一幅组件图：

通过组件结构图我们可以一目了然的看出整个Ext组件继承及组成体系，当使用一个组件的时间，了解他的继承体系，这样可以便于我们掌握组件的各种特性。

三、掌握核心控件

控件其实也是组件，比如用于显示树信息的TreePanel、用于显示表格的GridPanel及EditorGridPanel，还有代表应用程序窗口的Ext.Window等都属于Ext控件。在使用Ext的时候，一定要掌握一些核心控件，特别是处于基类的控件。比如上面提到的几个控件，他们都是继承于面板Panel，所以我们要重点掌握面板这个核心控件的特性。比如面板由以下几个部分组成：一个顶部工具栏(tbar)、一个底部工具栏(bbar)、面板头部(header)、面板尾部(bottom)、面板主区域(body)几个部分组成。面板类中还内置了面板展开、关闭等功能，并提供一系列可重用的工具按钮使得我们可以轻松实现自定义的行为，面板可以放入其它任何容器中，面板本身是一个容器，他里面又可以包含各种其它组件。只要掌握了Panel的应用，那么学习TreePanel、Window等就会变得简单得多。

同样的道理，对于Ext的表单字段来说，不管是ComboBox，NumberField、还是DateField，他们其它都是 Ext.form.Field类的子类，在他上面定义了表单字段的各种基本操作及特性。在学习使用表单字段组件时，一定要重点研究Field这个类，掌握他的主要方法、事件等，就能有助于更好的学习使用其它的字段。

四、学习及研究示例

由于javascript语言非常灵活，不像静态强类型语言（比如Java）那样有固定的代码设计模式，而往往是不同的人就有不同的编程风格。在实际应用开发中，只有见多识广，才能在自己的在脑中建立一个开发库。

学习别人的示例对于我们开发帮助会非常大，示例包括基本组件的应用、综合应用等多个方面。在此，简单推荐几个。

1、Ext官方示例，在ext项目下载包的examples目录中，包括各个控件的基本应用演示，同时还有一些比较复杂的组合示例，有简有繁，非常适合初学者认真研究。

2、Vifir推出的示例，Vifir推出的一些示例主要包括两类，一种是开源的示例应用，另外一种是针对VIP用户的实用示例。开源的示例主要是指 wlr单用户blog系统，这个一个集合了前后台技术的ext综合示例，而针对VIP用户的实用示例则是可以作为开发骨架或扩展组件的示例。

3、其它示例，在ext社区中还有很多比较优秀的ext应用示例，有些只是一个应用演示，虽然没有提供源码下载，但我们可以直接下载引用的js文件来得到这些示例的ext应用代码，同样能取起到非常好的学习效果。

五、多运用

Ext看起来是非常简单的东西，稍有点编程知识的人，按照《ExtJS实用开发指南》中的入门指南，半小时就能学会使用Ext。然而，当准备使用Ext开发一个项目时，却不知道从何处入手，或者是在使用Ext的时候，出了一点小问题自己不知道该如何解决。编程是一门实践性的科学，仅仅靠看书、看别人写的代码是远远不够的，因此，必须多做实践才行，只有通过不断的练习，大量的使用，才能对Ext的组件特性、事件、事件处理机制以及与服务器端交互接口等深入的掌握，只有多做运用，深入了解ext的组件的工作原理及机制，才能编写出高级的Ext的应用。

六、熟读Ext项目的源代码

如果要想深入应用Ext，那么阅读Ext项目的源代码这是必不可少的环节，Ext的代码质量非常高，通过阅读他的代码我们可以更加深刻的了解 javascript面向对象编程，Ext代码中包含了很多高级的js技巧以及设计模式。在使用Ext的过程中，我们经常根据项目的需要对Ext组件进行扩展，设计自己的组件或控件，而如何实现一个自定义的Ext组件，我们可以从Ext的各个组件源代码中找到答案。

Ext的源代码在Ext项目的source目录。读Ext源码，并不一定非要从某一个地方开始，而组件核心代码Component.js、容器组件代码 Container.js、面板Panel.js等这些是必看的； core目录中的Element.js、Ext.js等也是必看的。当需要从一个控件进行扩展的时候，最好能简单看一看这个控件的源代码。

2.extjs应该很少应用吧 我做jsp的，从来就没有用过这些东西·

Extjs4模仿desktop的桌面问题

一个华丽的模拟Windows桌面的系统界面一定能让他就像看到穿黑丝的背影一样，感到眼前一亮。虽然穿黑丝的背影正面可能是个大妈，信息系统的核心也绝不是华而不实的界面。不管怎么说提供一个能瞬间亮瞎客户狗眼的界面和交互模式绝对不是件坏事。

说明：

有些地方没有仔细推敲,还有重构的空间,应该没有Bug,不过还是建议学习消化后再用。

我修改了下,代码里只有展现层。业务逻辑和数据访问层我先去掉了，这样比较符合本篇主题，也方便大家单独应用，以后会陆续添加

附送登录页，存在明文传送密码的问题，用在项目中要注意

附送传统菜单页面,主要是为了演示模块化加载功能页,缺少基本的退出,重新登录之类的功能,自己可以添加功能

如果打算全套上ExtJs4,建议看完本系列并熟悉ExtJs4后再酌情考虑。如果只是用这个“壳”，套Iframe用自己的页,那就没啥太大问题了。

如果没有使用ExtJs的经验，不建议用本篇的代码来学习，这是综合应用，代码比较复杂。

先给出 Xg.part1.rar 、 Xg.part2.rar源码下载链接：

部署运行指南：

下载Xg.part1.rar和Xg.part2.rar 两个文件并解压，得到目录 Xg

在 Visual Studio 2010中打开 Xg.sln,如下图

把整个解决方案编译一下,应该没有任何错误。

把Xg.MVC.Application项目设为启动项，然后按F5运行(建议用Chrome浏览器,IE9也行。不建议用IE6,7,8 速度会比较慢)。你也可以部署到IIS里运行。运行起来如下图：

用户名：admin 密码: 000000 界面模式有“酷炫桌面”和“经典菜单”2种选择进去后分别如下图：

不完全使用指南：

目录结构解释：

菜单和快捷方式都是从C#返回的Json动态生成的，打开Fiddler2 根据请求的URL地址找到相应Controller下的Action 就可以查看到代码。

Asp.Net大型项目实践系列第二季(三)莫人云亦云,莫走弯路!ExtJs 认知、开发、调试3.“测试模块1”演示了ExtJS4的按需加载新特性，也就是只有你打开这个模块的时候，js才会加载。所以在Module1.aspx并没有对Module1.js的引用。而是这样去new了一个模块对象的实例：

script type=”text/javascript”

Ext.create(‘Mod.TestModule.Module1’, { modId: ‘/TestModule/Module1/Module1’ });

/script

要注意的是按需加载需要在run.js里注册文件夹路径：

Ext.Loader.setConfig({

enabled : true,

paths : {

‘Mod.TestModule’ : ”,

‘OIT.ex’ : ”,

‘Ext.ux’ : ”

}

});

如果不想要那个在飘的浮云，去run.js去掉如下代码：

// 浮云控制

var i = -500;

var el = Ext.get(‘scene_cloud’);

var cloudTask = {

run : function() {

el.setStyle(‘left’, i + ‘px’);

i++;

if (i document.body.clientWidth)

i = -500;

},

interval : 30

}

Ext.TaskManager.start(cloudTask);

WallpaperSettings.js可以设置自己的背景图片列表，对应的文件夹是“\Scripts\Desktop\wallpapers”

store : new Ext.data.TreeStore({

model : ‘HMSDesktop.WallpaperModel’,

root : {

text : ‘Wallpaper’,

expanded : true,

children : [{

text : “无”,

iconCls : ‘asterisk_orange’,

leaf : true

}, child(‘blue.jpg’),

child(‘blue-curtain.jpg’),

child(‘fields-of-peace.jpg’),

child(‘fresh-morning.jpg’),

child(‘colorado-farm.jpg’),

child(‘blue-swirl.jpg’),

child(‘desk.jpg’),

child(‘desktop.jpg’),

child(‘desktop2.jpg’),

child(‘sky.jpg’),

child(‘19201080.jpg’),

child(‘FGHJ_079020.jpg’),

child(‘cloud.jpg’)]

}

})

HMSDesktop.js是桌面js的实例，建议从这里看起，改开始菜单的标题也在这里：

// 开始菜单

getStartConfig : function() {

var me = this, ret = me.callParent();

return Ext.apply(ret, {

title : ‘传说中的弦哥’,

height : 400,

logo图片啥的路径在“\Content“和”\Scripts\Desktop\images”下，可以自己换。

如何设置 Ext.Viewport 的宽度(定位)

面板是ExtJs控件的基础，很多控件都是在面板的基础上扩展的，或者他会与其他控件之间有关系。

面板由一个工具栏、一个底部工具栏、面板头部、面板尾部和面板主区域几个部分组成。面本类中还提供了面板展开、关闭等功能。并提供了一些可重用的工具按钮 让我们灵活的控制面板。面板可以放入其他任何容器中，面板本身也是一个容器，所以面板里面也可以包含其他组件。面板的类名为Ext.Panel,其 xtype为panel。

看下面一个例子来显示出面板的各个组成部分：

//普通的面板

function panel(){

var panel=new Ext.Panel({

renderTo:’panel’,

title:’面板的头部’,

width:400,

height:200,

html:’h1面板的主显示区域..可包含任何html代码/h1′,

tbar:[{text:’顶部工具栏按钮’}],

bbar:[{text:’底部工具栏’}],

buttons:[

{

text:’面板底部按钮’,

handler:function()

{

Ext.Msg.alert(‘提示’,’面板底部按钮的事件！’);

}

}

]

});

}

上面的代码就不做详细介绍了，特别注意的一点是renderTo:’panel’，这句代码负责把面板绑定到一个div层里，panel就是div的ID。

div id=”panel”/div

代码执行后会显示下面的效果：

效果不错吧！面板中可以有多个工具栏，可以位于面板的顶部或底部，Ext工具栏是由Ext.Toolbar类表示。工具栏可以存放按钮、文本等内容。而且面板中还提了一些实用的工具栏，可以通过tools配置属性向面板头部加入工具栏选项，看下面的案例：

function panel(){

var panel=new Ext.Panel({

tools:[

{id:”save”},

{id:”help”},

{id:”up”},

{

id:”close”,

handler:function(){

Ext.MessageBox.alert(“工具栏按钮”,”工具栏的关闭按钮事件”)

}

}

],

renderTo:’panel’,

title:’面板的头部’,

width:400,

height:200,

html:’h1面板的主显示区域..可包含任何html代码/h1′,

tbar:[{text:’顶部工具栏按钮’}],

bbar:[{text:’底部工具栏’}],

buttons:[

{

text:’面板底部按钮’,

handler:function()

{

Ext.Msg.alert(‘提示’,’面板底部按钮的事件！’);

}

}

]

});

}

跟普通的面板没什么区别，只是多了个tools配置属性，可以通过ID来设置工具栏选项种类，如果需要给工具栏选项添加事件，则直接配置handler属性就可以。下面我为大家贴了一些id的枚举值：

toggle (collapsable为true时的默认值)

close

minimize

maximize

restore

gear

pin

unpin

right

left

up

down

refresh

minus

plus

help

search

save

print

上面的东西我也没有全部测试，如果大家感兴趣就自己试一下吧。

如果我们需要让这个面板可以拖动，需要加3个配置属性，改变一处配置。

:88,

y: 88,

renderTo: Ext.getBody(),//x,y,renderTo:Ext.getBody()初始化panel的位置

draggable: {

insertProxy: false,//拖动时不虚线显示原始位置

onDrag : function(e){

var pel = this.proxy.getEl();

this.x = pel.getLeft(true);

this.y = pel.getTop(true);//获取拖动时panel的坐标

var s = this.panel.getEl().shadow;

},

endDrag : function(e){

this.panel.setPosition(this.x, this.y);//移动到最终位置

}

}

x与y是设置在屏幕显示位置，renderTo不需要指定div的id了，直接用Ext.getBody()方法就可以把Panel加载。

draggable是拖动时设置，onDrag是在拖动时触发的事件，endDrag是结束拖动时事件。

效果:

这样就可以拖动了，但是会发现在拖动时有一个黑框框，这样可能有些不美观了。如果我们需要让这个黑框随着移动位置而变化。那么我们需要在onDrag事件函数中加如下代码:

if (s) {

s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());

}

看看拖动例子的全部代码：

//可以拖动的面板

function panelDrag(){

var panel=new Ext.Panel({

title: ‘拖一下看看我动不.’,

x:88,

y: 88,

renderTo: Ext.getBody(),//x,y,renderTo:Ext.getBody()初始化panel的位置

floating: true,//true

frame: true,//圆角边框

width: 400,

height: 200,

draggable: {

insertProxy: false,//拖动时不虚线显示原始位置

onDrag : function(e){

var pel = this.proxy.getEl();

this.x = pel.getLeft(true);

this.y = pel.getTop(true);//获取拖动时panel的坐标

var s = this.panel.getEl().shadow;

if (s) {

s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());

}

},

endDrag : function(e){

this.panel.setPosition(this.x, this.y);//移动到最终位置

}

}

})

}

Ext.Panel有几个子类，所以来介绍一下Panel中常见的配置属性、方法，下面内容是资料中的：

1.autoLoad：有效的url字符串，把那个url中的body中的数据加载显示，但是可能没有样式和js控制，只是html数据

2.autoScroll:设为true则内容溢出的时候产生滚动条，默认为false

3.autoShow:设为true显示设为”x-hidden”的元素，很有必要，默认为false

4.bbar:底部条，显示在主体内，//代码：bbar:[{text:’底部工具栏bottomToolbar’}],

5.tbar:顶部条，显示在主体内，//代码:tbar:[{text:’顶部工具栏topToolbar’}],

6.buttons:按钮集合，自动添加到footer中（footer参数，显示在主体外）//代码：buttons:[{text:”按钮位于footer”}]

7.buttonAlign:footer中按钮的位置，枚举值为：”left”,”right”,”center”,默认为right

8.collapsible：设为true，显示右上角的收缩按钮，默认为false

9.draggable:true则可拖动，但需要你提供操作过程，默认为false

10.html:主体的内容

11.id：id值，通过id可以找到这个组件，建议一般加上这个id值

12.width：宽度

13.height：高度

13.title:标题

14.titleCollapse：设为true，则点击标题栏的任何地方都能收缩，默认为false.

15.applyTo：（id）呈现在哪个html元素里面

16.contentEl：（id）呈现哪个html元素里面，把el内的内容呈现

17.renderTo：（id）呈现在哪个html元素里面

applyTo、contentEl、renderTo三者区别个人理解为：applyTo和RenderTo绑定到html元素中，contentEl则是html元素到ext组件中去。

上面说到面板都是绑定在某个html元素中显示面板，是局部的。Extjs中还有一个可以显示在整个body中的组件Ext.ViewPort，它会随着浏览器而变化。要注意的是一个页面中只能存在一个viewport的实例。看下面的代码

function viewport(){

var view=new Ext.Viewport({

enableTabScroll:true,

layout:”fit”,

items:[

{

title:’标题’,

html:”内容”,

bbar:[

{text:”按钮1″}

]

}

]

})

}

与其它使用方式大同小异，Viewport不需要指定renderTo，Viewport通常用于网站主页面，Viewport常用布局有fit、border等，设置layout属性改变布局。

基本的面板我们了解了，还有一个很重要的面板TabPanel，这里用一个小例子做说明，代码就不解释了。面板的用法是非常灵活的，我们可以发挥自己的想象力来做出漂亮的选项卡面板和实用的功能。因为它是可以无限嵌套控件的。

function tabpanel(){

var tabpanel=new Ext.TabPanel({

activeTab:0, //设置默认选择的选项卡

renderTo:’tabpanel’,

width:200,

height:150,

items:[

{

title:”第一个选项”,

html:”第一个的内容”

},

{

title:”第二个选项”,

html:”第一个的内容”

}

]

});

}

对待本人用到的东西来做一个小设计。代码不多做讲解，发一下代码和效果吧

点击展开

更多 0上一篇：Extjs学习总结

下一篇：ExtJs Panel翻译

相关主题推荐 extjs 浏览器 控件 布局 移动 相关博文推荐 vimperator部分使用帮助 javascript 常用函数归纳 javascript原生代码—跨浏览器事… [Phonegap+Sencha Tou… [Phonegap+Sencha Tou… [Phonegap+Sencha Tou… [Phonegap+Sencha Tou… [Phonegap+Sencha Tou… 查看评论

暂无评论

您还没有登录,请[登录]或[注册]

* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场

核心技术类目全部主题 Java VPN Android iOS ERP IE10 Eclipse CRM JavaScript Ubuntu NFC WAP jQuery 数据库 BI HTML5 Spring Apache Hadoop .NET API HTML SDK IIS Fedora XML LBS Unity Splashtop UML components Windows Mobile Rails QEMU KDE Cassandra CloudStack FTC coremail OPhone CouchBase 云计算 iOS6 Rackspace Web App SpringSide Maemo Compuware 大数据 aptech Perl Tornado Ruby Hibernate ThinkPHP Spark HBase Pure Solr Angular Cloud Foundry Redis Scala Django Bootstrap 个人资料

thunder_1985

访问：49882次

积分：1107分

排名：第12092名

原创：49篇 转载：0篇 译文：14篇 评论：11条 文章搜索 文章分类Ant(0)

dwr(5)

Hibernate(1)

javascript(2)

JDBC(2)

Junit(0)

Servlet(0)

Spring(0)

Struts2(3)

UML(0)

XML(0)

文章存档2010年01月(2)2009年12月(12)2009年11月(5)2009年10月(22)2009年09月(22)

阅读排行Struts2文件上传(6028)

ExtJs之combobox(4648)

Struts2文件下载(3970)

struts2异常处理(3809)

ExtJS学习笔记 Ext.FormPanel(2216)

Extjs学习总结(1634)

ExtJs Panel翻译(1453)

ExtJS面板的使用(Ext.Panle、Ext.TabPanel、Ext.Viewport) (1346)

Oracle安装失败后如何完全卸载(1158)

PreparedStatement用法总结(1098)

评论排行Struts2文件下载(3)

MySql分页(3)

PreparedStatement用法总结(2)

PreparedStatement和Statement比较(1)

ExtJs之combobox(1)

Struts2文件上传(1)

引用 extJs 2.0学习笔记(Element.js篇)(0)

让select处于不选中状态(0)

innerText与innerHTML区别 (0)

Oracle安装失败后如何完全卸载(0)

推荐文章最新评论Struts2文件上传

nhm_lxy: 师傅 带带我吧

PreparedStatement用法总结

zlp1992: 你好，如果数据库的是char类型，该怎么设置呢？

PreparedStatement用法总结

teteert: 如果数据库中有一个字段是自动增加的，则使用PrepareedStatement 怎么插入数据啊，自动…

Struts2文件下载

wdlht001: 很好用~谢谢

Struts2文件下载

jinweisheng5521:

ExtJs之combobox

匿名用户:

Struts2文件下载

hetengfeng:

MySql分页

匿名用户:

PreparedStatement和Statement比较

匿名用户:

MySql分页

JavaAlpha:

转：新手如何学习ExtJS 4

最近运营ExtJS交流群的时候，感触颇深，我感觉作为一个老手，我有必要介绍一下如何学习这种基础性问题。新手如何学习ExtJS4？如何入门ExtJS4？如何快速学习ExtJS4？1.仔细阅读新手教程新手教程是指ExtJS官方文档中Guides那一系列文章，因为是英文的，新手阅读起来可能有障碍，为此我特意翻译了这一系列教程，根据使用频度我已经差不多把最常用到的教程翻译完了，后续还将继续翻译。

通读这一系列教程后，你会对ExtJS的基本使用方法有个框架性的了解，你会大体上知道如何实现常用功能。现在我把所有已翻译的教程列举在此，记住，认真的读一定对你有帮助。ExtJS 4 入门ExtJS 4 类系统(Class System)介绍ExtJS MVC架构讲解ExtJS 4 布局和容器ExtJS 4 组件详解ExtJS 4 数据(包)详解ExtJS 4 Grids 详解ExtJS 4 表单ExtJS 4 树2.把官方文档中的所有Demo都浏览一遍做这个事情是为了了解官方Demo中实现了哪些功能，当自己要做一个功能时，有例子照着做是最快的，浏览一遍就会对现有的Demo有个大概印象，当你没有头绪的时候你的大脑会在后台查找之前的印象的，仔细浏览一遍，没有错。3.熟读API Docs(API文档)最近遇到很多人问问题，把一段自己想当然写出来的代码贴上来问为什么不对，事实上你仔细查一下API文档就知道，你这种用法ExtJS根本就不支持，当然不对。

使用搜索的好处是：通常可以较快速的解决一些无头绪的问题