久久青草伊人,亚洲区在线播放,国产999精品久久

EXT ��目例子

��菜毛毛 — Wed, 24 Jun 2009 03:58:00 GMT

商��N通是集采购、销售、库存管理于一体，采用etmvc和extjs开发的一套管理程序�?/p>

演示地址�Q?a target="_blank">http://www.etmvc.cn/trade

�pȝ��前端采用iframe的�Ş式分隔各个功能模块，特点是编写控制JS代码��单，�~�点也是显而易见的�?/p>

关于�~�写单页面的extjs�E�序�Q�请见另一个案例的�q�销�?/a>�pȝ��演示�?/p>

�q�行环境�Q�JDK6, TOMCAT6, MYSQL5�?/p>

数据库名�Q�trade�Q�登录帐号密码：root/soft123456�?/p>

�pȝ��d��时帐号密码：admin/admin�?/p>

trade.png (174532字节)
下蝲�ơ数�Q?52

trade.war (3952992字节)
下蝲�ơ数�Q?54

trade.rar (1380466字节)
下蝲�ơ数�Q?93

trade.sql (44400字节)
下蝲�ơ数�Q?65

��菜毛毛 2009-06-24 11:58 发表评论

《轻松搞定Extjs》顺利发�?(�?

��菜毛毛 — Mon, 15 Jun 2009 04:25:00 GMT

《轻松搞定Extjs》顺利发�?/a>

《�{载�?br />
PDF下蝲地址�Q?a title="下蝲点击�q�里" >下蝲点击�q�里

下面是书�c�目录：

��菜毛毛 2009-06-15 12:25 发表评论

Javascript的调试利器：Firebug使用详解

��菜毛毛 — Thu, 04 Jun 2009 02:13:00 GMT

摘要: 转蝲自：http://blog.csdn.net/tianxiaode/archive/2007/09/02/1769152.aspx 真的写的很好�Q�我惌��己写些，但是自愧没有他的�_��Q�就拿来��M��?nbsp; Javascript的调试，是开发Web应用��其是AJAX应用很重要的一环，目前对Javascript�q�行调试的工具很多，我比较喜�Ƣ��用的是Firebug。Fi... 阅读全文

��菜毛毛 2009-06-04 10:13 发表评论

Tutorial:Javascript中的作用域（scope�Q�是什�?(一)(试用FIREBUG了解)

��菜毛毛 — Mon, 18 May 2009 02:32:00 GMT

Personal tools

Tutorial:What is that Scope all about (Chinese)

From Learn About the Ext JavaScript Library

Jump to: navigation, search

Summary: 本教�E�讲解了Javascript中的作用域（scope�Q�几个要点和变量可见度（variables visibility�Q�等的问题�?

Author: Jozef Sakalos(译者：Frank Cheung)

Published: August 27, 2007

Ext Version: 1.1+ / 2.0+

Languages: English Chinese Korean Turkish Italian

[hide]

1 事前准备
2 定义
3 正式开�?/span>
4 window对象
5 理解作用�?/span>
6 变量的可见度

事前准备

学习本教�E�的最��x��法是随手准备�?a class="external text" title="http://firefox.com" rel="nofollow">Firefox中的工具Firebug。这样��得您可以卛_��试教程的例子�?

如果机子上还没有FireFox和FireBug�Q�就应该��快安装一套来用�?/p>

定义

作用域scope
1.�Q�名词）某样事物执行、操作、拥有控制权的那么一个区�?[1]
2. �Q�名词） �~�写�E�序�Ӟ��E�序之中变量的可见度�Q�例如，一个函数能否��用另外一个函数所创徏的变量�?a class="external autonumber" title="http://computing-dictionary.tfd.com/scope" rel="nofollow">[2]

可是�q�能够说明什么问题呢�Q?每当有�h在说“�q�是作用域的问题”�?#8220;作用域搞错了”的时候，那就是说某个函数�q�行��h��的时候，找不到正��变量的位置。这��h��们便知道应该从哪一斚w��入手�Q�查扑և�问题所在�?

正式开�?/span>

实际上每一个你定义的函数都是某个对象的�Ҏ��。甚��x��q�样的写法：

function fn() {
alert(11);
}

老兄你不是故弄玄虚吧～。做一个这��L��演示可真得是��单得要命。没错！本例不需要�Q何Javascript文�g�Q�服务器或html。你只要打开firefox�Q�弹出firebug,点击console tab。在Firefox状态栏上面看到�?gt;>>提示的地方就可以输入了�?

输入�Q?

function fn() { alert(11); };

然后回�R。一切安�?..你刚才做的实际上是定义了一个函数fn。接着试试�Q?

fn();

然后回�R。得�?1的警告窗口？�q�不错吧�Q�接着试试�Q?

window.fn();
this.fn();

得到一��L��l�果吧？�q�是因�ؓ函数fn是window对象的一个方法，在第二行�?this"的作用域实际指向了window对象。不�q�多数情况中你不需要像�q�样window.myFunction(...)地调用函敎ͼ��q�样太麻烦了�Q�程序员工作��h��会很不方�ѝ�?

window对象

window 对象��L��存在的，你可理解其�ؓ一个浏览器�H�口对象。它包含了其它所有的对象�?strong>document 和所有的全局变量�?

你可以打开Firebug�Q�切换到 Script ��面�q�在Firebug右侧�?strong>New watch expression... 里面输入 window。观察window对象�I�竟有什么在里面�?

接着�Q�尝试找出我们之前定义过�?strong>fn函数�?

另外�Q�每个frame或iframe拥有其自�w�的window对象�Q�其自��n的全局�I�间�?/strong>

理解作用�?/span>

接下的内容开始有点复杂了。切换到Firebug Console标签��늄�后输入：

var o1 = {testvar:22, fun:function() { alert('o1: ' + this.testvar); }}; var o2 = {testvar:33, fun:function() { alert('o2: ' + this.testvar); }};

�l�果是什么？你声明了o1 �?o2两个对象�Q�分别都有一些属性和�Ҏ��Q�但��g��同�?

接着试试�Q?

fun(); window.fun(); this.fun();

出错了，是吧�Q�因为window对象�Q�等价于this�Q��ƈ没有fun的方法。试一试下面的�Q?

o1.fun(); o2.fun();

22�?3出来了？非常好！

接下来这部分的内�Ҏ��复杂啦。基于这个原始的函数�Q�如果对象的数量多的话，你必��Mؓ每个对象加上�q�个函数�Q�明显是重复力_��了。这栯��吧，o1.fun写得非常清晰的而且��Z��搞掂它已�l�占用了我一个星期的开发时间。想象一下代码到处散布着this变量�Q�怎么能不头疼�Q�如果要��调用（执行�Q�的o1.fun�Ҏ��?strong>this会执行o2,应该怎么实现呢？试一试下面的�Q?

o1.fun.call(o2);

明白了吗�Q�当执行o1的fun�Ҏ��时你��变�?strong>this指向到o2�q�个对象�Q�换句话��_��更加严�}地说:o1.fun的方法在对象o2的作用域下运行�?/strong>

当运行一个函敎ͼ�一个对象的�Ҏ��Ӟ��你可��作用域当作this值的变量�?

变量的可见度

变量的可见度和作用域的关�p�非常密切。我们已�l�了解到�Q�可在�Q何对象的外部�Q�声明变量，或在全局的函敎ͼ�函数也是变量的一�U�）也可以，更严��D��Q�它们是全局对象window的属性�?全局变量在�Q何地斚w��可见�Q�无论函数的内部�q�是外部。如果你在某一个函数内修改了一个全局变量�Q�其它函��C��会得知这个值是修改�q�的�?/strong>

对象可以有它自己的属性（像上面的testvar�Q?�q�些属性允�总�内部或是外部均是可见的。试�Q?

alert(o1.testvar); // 从外部访问o1的属性testvar

从内部访问的演示可在两个��试对象�?strong>fun�Ҏ��扑ֈ��?

用关键字var在内部声明，相当于声明局部变量（局部声明也是在一条链上，即Scope Chain 作用域链上，Frank注）�Q?

i = 44; function fn2() { var i = 55; alert(i); } fn2();

��得��C��么？对了�Q?5。声明在函数fn2的变�?strong>i是一个本地变量（局部变量）�Q�和�{�于44的全局变量i 44没什么关�p�R�?But:

alert(i);

�q�会讉K��全局变量i�Q�显�C?4�?

希望本文能帮助读者彻底理解作用域变量可见性的含义�?

延��阅读�Q?

Scope in JavaScript

Ext Programmer's API Documentation
Ext User Forums

Retrieved from "

��菜毛毛 2009-05-18 10:32 发表评论

��L��地进入Ext的世�?-firefox debug

��菜毛毛 — Mon, 18 May 2009 02:21:00 GMT

Tutorial:Playing With Ext The Easy Way (Chinese)

From Learn About the Ext JavaScript Library

Jump to: navigation, search

Summary: Playing With Ext The Easy Way (Chinese)

Author: Patrick Donelan (��译�Q?a class="external text" title="http://www.5iya.com/blog" rel="nofollow">Cloudream)

Published: 2007-10-12

Ext Version: 2.0

Languages: English Deutsch Chinese Korean Japanese Spanish Turkish

[hide]

1 �y�跚学步
- 1.1 �W�一�?- 入门
- 1.2 �W�二�?- ��h��
2 牛刀��试

�y�跚学步

�W�一�?- 入门

惛_��您已�l�听说过 Ext、浏览了在线演示�Q��ƈ且尝试阅�?a class="external text" title="http://extjs.com/deploy/dev/docs/" rel="nofollow">API文档。不�q�，面对复杂的API文档�Q�您却不知如何下手？�Q?

�W�二�?- ��h��

通览�q?a class="external text" title="http://extjs.com/deploy/dev/docs/" rel="nofollow">API文档�Q��ƈ且找��C��所要立��d��试的功能�Q�面�Ҏ؜杂的�|�页源代码，如何开始一个简单的��试��面�Q�那�?#8230;…

不论您的目标是什么，您都可以依照本文快速的开始��用Ext。不�Q�不用搭建服务器�Q�您所需要的仅仅�?a title="Manual:Resources" >Firefox��览器和Firebug调试插�g。如果还没有安装�Q�那么现在就是一个好��Z��?

牛刀��试

打开Ext API文档�Q�您已经上�\�Q?
单击 F12 打开 Firebug 控制台�?
如果您的 firebug 控制台处于单行模式（�?'>>>' 开��_��Q�那么请单击右下角的�U�色上箭头以开启多行编辑模式�?
输入以下代码�Q��ƈ敲击 Ctrl-Enter 来运�?

Ext.get(document.body).update('
');

上边�q�行代码的作用是��当前DOM body元素用一个ID�?strong>test的div元素替换。刚才那些API文档已经被删除，�?Ext 代码依旧生效�Q��ƈ且随时�ؓ您效功�?

现在�Q�我们假设您希望��单的��d��一个面板元素（Panel�Q�，但对Ext.Panel的API冗繁的说明无能�ؓ力。那么试着��这些代码添加到 firebug 的控制台中：

Ext.get(document.body).update('
');
new Ext.Panel({
renderTo: 'test',
width: '200px',
title: 'My Title',
html: 'My HTML content'
});

再次敲击 Ctrl-Enter 。嗨�Q�您的面板元素已�l�诞生�?

很好�Q�不�q�如果修改一些选项呢？用下边的代码替换刚才的那些代码：

Ext.get(document.body).update('
');
new Ext.Panel({
renderTo: 'test',
width: '200px',
title: 'My Title',
html: 'My HTML content',
collapsible: true
});

敲击 Ctrl-Enter 。怎么��P��一个可以�׾~�的面板��配�|�好了。（注意面板右上角的��图标）

每次敲击 Ctrl-Enter �Q�第一行代码都会移除现有的内容�Q�这��h��可以有一个干净的调试环境。这是一个简单的��技巧，十分方便您尝试各�U�配�|�选项�?

您可以�ؓupdate()函数��d��所需要的 HTML 代码�Q�无论多��。然后编写或多或��的 Javascript 来探�?Ext API�?

�q�等什么？现在��去亲自实践 Ext Api 吧�?

Ext Programmer's API Documentation
Ext User Forums

Retrieved from "

Categories: Tutorial | Chinese

��菜毛毛 2009-05-18 10:21 发表评论

��菜毛毛 — Mon, 18 May 2009 01:44:00 GMT

我认为学习EXT开发最好的�Ҏ��是，在真正开发之前，掌握好高�U�JavaScript知识�Q?��像鱼儿游在水里一样对JS�q�用自如�?

自己可以创徏JavaScript的类、明白类原型�Q�class's prototype�Q�的原理�Q?和明白函数的作用域都是有益的帮助�?明白Ajax��Z��么要异步方式也是其中的一个知识点�?

论坛�?0�Q�所提出的问题很大原因是对JavaScript知识不牢固所臻I��而不是EXT API的问题�?当真正开始用EXT做开发了�Q�那么安装目录下examples/*的文件夹��过70个例子便是研�I�的好对象， �q�些例子��Z��展示了你日后��会使用的大多数技巧或�Ҏ��?接着�Q�最好就是先拿examples/*的文件夹中例子练一�l�手�Q�做一些简单、轻型的��项目�?如果直接拿EXT�l�合到程序去开发，很可能你会因��来越复杂的问题惔��x��陗��?

把每一��的知识�?技�?都做成可单独�q�行文�g�Q�这样以便你以后参考，�q�有一个好处是�Q�可以发到论坛上�Q�然后我们放到examples/*的文件夹�Q�以便我们的��试�q�协助你�?如果能按照以上的��d��Q�我�怿��q�是一个很好的累积。而且按照我的角度看，整个UI��是�q�样一点一�Ҏ��v来�?/p>

��菜毛毛 2009-05-18 09:44 发表评论

��菜毛毛 — Mon, 18 May 2009 01:42:00 GMT

有关重大改变的几个要�?/span>

文章内容是对2.0新变化的�l�合��q�。请留意Ext框架在从1.x跨越�?.0的过�E�中�Q�经历了无数的细微改�q�、臭虫修正和其他的改动�?要逐一列出��难��Z��Q�所以本文着重提及架构上有�{换的地方�Q�和一些全新加入的功能。本文下列的各部分将完整地解释这每一��的�l�节�?

�l��g模型 Component Model
�?.x中就有Component和BoxComponent两个�c�M��Q�但却没有深入整合到框架中去。到2.0�Q�这两个�c�d��到极大的改进�q�是一切主要组件的基础�?��管�q�些�c�d��于开发者而言一般是��量隐藏�l�节�Q�不�q�理解好�l��g生存周期�q�方面的基础知识有利于进一步的Ext学习�?a title="" >参阅详细�?
容器模型 Container Model
有几个核心类可用于生成器�Ӟ��widgets�Q�和包含其它�l��g的布局�?容器Container为对象的容纳和组件的布局提供一个基��性的构成方式�Q�对于整个Ext框架可视化必不可��?面板Panel 从容器类�l�承�Q��ؓ用户�E�序提供特定功能的UI基类�Q�属于容器结构层�ơ中最常用的类�?�H�口Window是面板的一�U�特�D�类型，使得web应用�E�序如桌面式�Q�desktop-style�Q�那栗��?strong>视见区Viewport是专为全屏幕web�E�序应用而设计的实用容器 �?a title="" >参阅详细
布局Layouts
1.x中的布局方式集中围绕在BorderLayout和其相关的几个类�?.0中，布局的整体架构徏立在崭新的容器类、布局�c�M��?BorderLayout现加入到九种风格布局之中。布局�c�d��l�是全部重写设计�q�考虑最大的可扩展性�?布局的管理亦受益�?.0的框�Ӟ��L��一些开发者之前需要面对的复杂实现�?a title="" >参阅详细
Grid
Grid�l��g往往都被认�ؓ是Ext的核心组件之一�Q�在2.0的版本中同时�l�箋演进。新版的用户界面更友好，性能更佳�Q�功能上新加了行摘要、行归组、和一些基于插件实现如expandable rows和row numbering �{�等的更多功能�?a title="" >参阅详细
模板 XTemplate
1.x的模版类处理一些简单的模版时��o人满意，但对于复杂的输出��d��q��乏健壮的支持�?�?.0中，全新的XTemplate可支持子模版�Q�数�l�处理，直接代码执行�Q�逻辑判断和更多有用的功能�?a title="" >参阅详细
数据视图 DataView
1.x的模版将数据�l�定到模版以生成制定的UI视图。JsonView是快速绑定JSON数据辅助�c�R�?.0的DataView把以上两�U�方式作�l�一的处理，不同之处是它�l�承自BoxComponent�Q�可更好地支持各�U�布局方式�Q�新的XTemplate�c�Mؓ模版处理提供强大的支持�?a title="" >参阅详细
其它新组�?/strong>
�q�些新组件包括动作（Action�Q�、CycleButton�?Hidden (field)�?ProgressBar和TimeField�?a title="" >参阅详细

补充说明

主题
2.0支持开��即用的主题�Q�Theme�Q�，使用更�ؓ��化。Ext 1.x支持四套主题�Q�但2.0减少��C��套（"Ext Blue" 和Gray�Q��?如打��自定义Ext的主题，那么Gray主题��是一份不错的蓝本�Q�另外一�?a title="Ext Extensions" >2.0 �C�֌�主题也可以提供一些思�\或直接��用�?�q�不是API改动的一部分�Q�但是有需要在�q�里提及一下�?
�H�破性进�?/strong>
令�h遗憾�Q?.0的一些改动无法做到向后兼宏V��因为无论相关的�l��g�q�是渲染模型已经是从底层上大�q�修改，许多现有的组件必��舍弃旧1.x的方式重写编写，�?.x的差别较大�?我们提供�?a title="Ext 1 to 2 Migration Guide" >1.x�?.0升��指南希望能协助解决现有Ext 1.x�E�序的升�U�问题�?

�l��g模型 Component Model

�l��g概述

2.0的一个目标就是希望能以简单的代码块构建程序，甚至比以往更简单�?�l��gComponent�c�L��初在1.x引入�Q�却没有全面整合到框架中厅R��在2.0中，�l��g所赋予的能力有长��的改�q�和提升�Q��得其成�ؓ整个架构里最为基��的一个类。组件对象�ؓ�l��g的创建、渲染、事件处理、状态管理和销毁提供了�l�一的模型，Ext下面的每一个组件具备了�q�些��q��件对象扩展出来的�Ҏ��。这�?.0�l��g对象的关键特性：

昑ּ�声明构徏器链和重�?Explicit constructor chaining and overriding
�l��g会将一个基��构造器�q�同配置传入到子�c�M��。函�?tt>initComponent用于提供制定的构造器逻辑�Q�只要在�l�承链上的某一个子�c�d��C��可，所有的�l��g都遵从此方式。此时的子类��可�?tt>initComponent中对其设�|�相关的属性，实现具体的功能�?
可调控的渲染 Managed rendering
2.0中，每个�l��g都支持�g时渲染（lazy rendering�Q�，又称按需渲染�Q�on-demand rendering�Q�。渲染的调控一般是��Z��自动讄��完好的。即使如此，你亦可以通过�?a class="external text" title="http://extjs.com/deploy/dev/docs/?class=Ext.Component&member=beforerender" rel="nofollow">beforerender�?a class="external text" title="http://extjs.com/deploy/dev/docs/?class=Ext.Component&member=render" rel="nofollow">render事�g控制渲染发生、结束，辑ֈ�最为灵�zȝ��自定义调控�?
可调控的销�?Managed destruction
每一个组件具�?a class="external text" title="http://extjs.com/deploy/dev/docs/?class=Ext.Component&member=destroy" rel="nofollow">destroy的函敎ͼ�当组件不再需要时�Q�Ext��p��责组件的�l�束调控�Q�如自动垃圾回收和摧毁组件元素。当�Ӟ��销毁亦提供相应的事�Ӟ��?a class="external text" title="http://extjs.com/deploy/dev/docs/?class=Ext.Component&member=beforedestroy" rel="nofollow">beforedestroy�?a class="external text" title="http://extjs.com/deploy/dev/docs/?class=Ext.Component&member=destroy" rel="nofollow">destroy可按照实际的情况作出逻辑处理�?
状态管理自动化 Automatic state management
�l��g内徏讄��和获取状态（State�Q�的功能�Q�只要让全局对象StateManager和一个状�?Provider都初始化好，那么多数的组仉��h��自动状态管理的能力�?
�l��g常规行�ؓ的统一接口 Consistent interface for basic component behavior
一般常规的行�ؓ如隐藏、显�C�和�Ȁ�z�R��禁用均是组件的基本�Ҏ��。如需要，�q�些都可由子�c�d��重写或制定�?
��q��件管理器负责的可用调�?Availability via ComponentMgr
Ext的每一个组件在创徏的时候就会由�l��g��理器登记注册，即你可随时获取�Q何组�Ӟ��只需调用Ext.getCmp('id')�?
支持插�g Plugin support
现在��M��的组件可以通过插�g的�Ş式来扩展了。插件实质是带有init�Ҏ��的一�U�类。该�Ҏ��会有一个单独的参数�Q�类型�ؓExt.Component�Q�传入到其中。插件可通过�l��g�?a class="external text" title="http://extjs.com/deploy/dev/docs/?class=Ext.Component&member=plugins" rel="nofollow">plugins配置��Ҏ��定。当�l��g创徏�Ӟ��如果有插件可用，�l��g��׃��调用每个插�g上的init�Ҏ��Q�将自��n的引用作为参��C��入�?每个插�g�q�行之后可调用组件的�Ҏ��或响应组件的事�g以实现自�w�的功能�?

�l��g的生存周期Component Life Cycle

一般来��_��l��g的对象架构满��了“能运行（Just Works�Q?#8221;�q�一基本要求。架构在设计上已是调控好了大多数�l��g是怎样处理的，而且�Ҏ��l�开发者是透明的�?不过�Q�若对组件对象扩展，或是有些需要制定的地方�Q�就要利用一定的旉��d��现�?深入理解�l��g对象的生存周期会是非常好的帮助。下面的内容��是对基于组件的每个�c�，一个周期内各个重要阶段作出解释�Q?/p>
初始化Initialization

配置��对象生效了
The config object is applied.
�l��g对象的构造器会把全部的配�|�项传入到其子类中去�Q��ƈ且进行下列所有的步骤�?
�l��g的底层事件创��Z��
The base Component events are created
�q�些事�g��q��件对象负责触发。事件有enable, disable, beforeshow, show, beforehide, hide, beforerender, render, beforedestroy, destroy �Q�参�?a class="external text" title="http://extjs.com/deploy/dev/docs/?class=Ext.Component" rel="nofollow">Component API文档完整的内容）�?
�l��g在组件管理器里登��C��
The component is registered in ComponentMgr
initComponent�q�方法��L��使用在子�c�M��Q�就其本�w�而论�Q�该�Ҏ��是一个模板方法（template method�Q�，用于每个子类�ȝ��实�Q何所需的构造器逻辑�Q�any needed constructor logic�Q�。首先会创徏�c�，然后�l��g对象各层�ơ里面的每个�c�都应该调用superclass.initComponent。通过该方法，��可方便地实玎ͼ�implement�Q�，或重写（Override�Q��Q意一层构造器的逻辑�?
状态感知进行初始化�Q�如果有的话�Q?br /> State is initialized (if applicable)
如果�l��g是状态感知的�Q�其状态会�q�行��h��?
加蝲好插�Ӟ��如果有的话）
Plugins are loaded (if applicable)
如果该组件有指定��M��插�g�Q�这时便会初始化�?
渲染好插�Ӟ��如果必须的话�Q?br /> The component is rendered (if applicable)
如果指定了组件的renderTo �?applyTo配置属性，那么渲染工作��׃��立即开始，否则意味着延时渲染�Q�即�{�待到显式控制显�C�，或是其容器告知其昄��的命令�?

渲染�q�程 Rendering

触发beforerender事�g The beforerender event is fired
�q�是个可取消的事�Ӟ��指定的句柄（handler�Q�可��L��l��g�q�行渲染
讄��好容�?The container is set
如果没有指定一个容器，那么��用位于DOM元素中组件的父节点作为容器�?
调用onRender�Ҏ�� The onRender method is called
�q�是子类渲染最重要的一个步骤，�׃��该方法是一个模板方法（template method�Q�，用于每个子类�ȝ��实�Q何所需的渲染逻辑�Q�any needed render logic�Q�。首先会创徏�c�，然后�l��g对象各层�ơ里面的每个�c�都应调�?tt>superclass.onRender。通过该方法，��可方便地实玎ͼ�implement�Q�，或重写（Override�Q��Q意一层渲染的逻辑�?
�l��g�?#8220;隐藏”状态的 The Component is "unhidden"
默认下，许多�l��g是由CSS样式�c�d��"x-hidden"讄��隐藏的。如�?autoShow所配置的��gؓtrue�Q�这时就不会有这�?hide"样式�c�M��用在该组件上
自定义的�c�R��样式生效了 Custom class and/or style applied
一切组件的子类都支�?a class="external text" title="http://extjs.com/deploy/dev/docs/?class=Ext.Component&member=cls" rel="nofollow">cls�?a class="external text" title="http://extjs.com/deploy/dev/docs/?class=Ext.Component&member=style" rel="nofollow">style 两种�Ҏ��的配�|�属性，分别用于指定用户自定义的CSS样式�c�d��CSS规则�?推荐指定cls的方法来制定�l��g及其各部分的可视化设�|�。由于该样式�c�M��套用在组件markup最外的一层元素，所以标准CSS规则会��承到�l��g下�Q何子元素的��n上�?
触发render事�g The render event is fired
�q�是�l��g通知成功渲染的一个步骤。这�Ӟ��你可肯定地认为组件的DOM元素是可用的了。如果尝试在渲染之前讉K��l��g�Q�会抛出一个不可用的异常�?
调用了afterRender�Ҏ�� The afterRender method is called
�q�是另外一个实现或重写特定所需�?#8220;后渲�?#8221;逻辑的模板方法。每个子�c�d��调用superclass.afterRender.
�l��g被隐藏或��用�Q�如果有的话�Q?The Component is hidden and/or disabled (if applicable)
配置��hidden和disabled到这步生�?
所有状态感知的事�g初始化（如果有的话） Any state-specific events are initialized (if applicable)
状态感知的�l��g可由事�g声明�Ҏ��加蝲和保存状态。如支持�Q�加入此�cȝ��事�g�?

销毁过�E?Destruction

触发beforedesroy事�g The beforedestroy event is fired
�q�是个可取消的事�Ӟ��指定的句柄（handler�Q�可��L��l��g被销毁�?
调用了beforeDestroy�Ҏ�� The beforeDestroy method is called
�q�是另外一个实现或重写预定销毁逻辑的模板方法。每个子�c�d��调用superclass.beforeDestroy�?
元素及其侦听器被�U�除 Element and its listeners are removed
若组件是渲染好的�Q�所属的元素的事件侦听器和DOM树中的元素都会被�U�除�?
调用了onDestroy�Ҏ�� The onDestroy method is called
�q�是另外一个实现或重写特定所需�?#8220;后销�?#8221;逻辑的模板方法。每个子�c�d��调用superclass.onDestroy�?strong>注意容器�c�（Container class�Q�和一切容器的子类�Q�提供了一个默认的onDestroy实现�Q�自动遍历其items集合里的每一��，分别地执行子�l��g�w�上�?tt>destroy�Ҏ��?
在组件管理器中撤销�l��g对象的登�?Component is unregistered from ComponentMgr
使得不能再从Ext.getCmp获取�l��g对象
触发destroy事�g The destroy event is fired
�q�是�l��g成功销毁的一个简单通知。此时组件已�l�DOM中已是不存在的了
�l��g上的事�g侦听器被�U�除 Event listeners on the Component are removed
�l��g本��n可允�总�所属的元素得到事�g侦听器。如有的话，�q�同删除�?

�l��g的X�c�d�� XTypes

XTypes是Ext 2.0中新的概念，被认为是Ext�l��g的特定类型。可用的xtype摘要可在 Component�c�API开始的地方扑ֈ�。与一般JavaScript对象用法�怼��Q�XTypes可用于查找或比较�l��g对象�Q�如isXType�?a class="external text" title="http://extjs.com/deploy/dev/docs/?class=Ext.Component&member=getXType" rel="nofollow">getXType�{�的�Ҏ��。其�?a class="external text" title="http://extjs.com/deploy/dev/docs/?class=Ext.Component&member=getXTypes" rel="nofollow">getXTypes的方法可列出��L��l��g的xtpye层次表�?/p>
然而，Xtypes最大的用途是怎么用于优化�l��g的创建和渲染�q�程�?通过指定一个xtype的配�|�对象的写法�Q�可隐式声明的方式创建组�Ӟ��使得当不需要立��x��染的情况��只是一个对象，省去不必要的实例化步骤。这时不仅渲染的动作是�g时的�Q�而且创徏实际对象的这一步也是�g时的�Q�从而节省了内存和资源�?在复杂的布局中，�q�种性能上的改进��ؓ明显�?

//昑ּ�创徏所容纳的组�?/span> var panel = new Ext.Panel({ ... items: [ new Ext.Button({ text: 'OK' }) ] }; //使用xtype创徏 var panel = new Ext.Panel({ ... items: [{ xtype: 'button', text: 'OK' }] };

�W�一个例子中�Q�面板初始化的同�Ӟ��按钮��L��会立卌��创徏的。如果加入较多的�l��g�Q�这�U�方法很可能减慢的渲染速度。第二例子中�Q�按钮直到面板真正在��览器上需要显�C�才会被创徏和渲染�?

如果面板从未昄��Q�例如有个tab一直是隐藏的）�Q�那么按钮就不会被创建，不会消耗�Q何资源了�?

BoxComponent

BoxComponent 是另外一个重要的基类�Q�该�c�M��l��gComponent扩展�Q��ؓ��M��要进行可视渲染和参与布局的组件提供了一致的、跨��览器的��子模型�Q�Box Model�Q�实现。BoxComponent负责调节大小和定位，自动处理各浏览器之间的差异，如外/内补丁、边框的问题�Q��Ş成一个统一的箱子模型，以支持各�U�浏览器�?.0的一切容器类�Q�container�Q��承自BoxComponent�?/p>
容器模型Container Model

Ext 2.0 Component/Container Class Hierarchy

容器 Container

一个组件如果有包含其它的组�?/em>�Q�那么，容器Container便是�q�个�l��g奠基之石。该�c�L��供了布局斚w��和调节大��、嵌套组所需的逻辑�Q��ƈ且提供一个基��性的加入�l��g协调机制。容器类不应该直接��用，其目的在于�ؓ一切可视的容器�l��g提供一个基�c�R�?/p>
面板 Panel

面板Panel�?.0最常用的容器，90�Q�布局��d��都离不开面板。布局里的排版元素便是面板�Q�面板如同一张白�U�，完全是空白的矩�Ş�Q�没有可视内宏V��虽然这��P��面板也提供了一些预留区域，方便加入�E�序所需的UI界面�Q�包括顶部或底部的工��h��、菜单栏、头部区域、底部区域和�w�干区域。同时内建可展开和可收羃行�ؓ的按钮，和其它不同�Q务预讄��按钮。面板可��L��C��降到��L��的容器或布局�Q�当中定位或渲染的逻辑全部由Ext调控�Q?

下列是Ext 2.0面板最主要的几个子�c�：

GridPanel
TabPanel
TreePanel
FormPanel

Window

Window 是一�U�可��动的、可最��?最大化的、可复原的、可拖动�?.�{�此�cȝ��Ҏ��面板。其目的在于实现一�U�具有桌面风格的�E�序界面的基�c�，�?a class="external text" title="http://extjs.com/deploy/dev/examples/desktop/desktop.html" rel="nofollow">Ext桌面演示看到的那栗��?/p>
视见区Viewport

视见区Viewport是以document.body作容器的实用�c�，它会与浏览器视图自适应��寸�Q�是全屏�q�应用的基础�Q�如��览器大��调节、布局重新计算的问题由该类自动完成�?注意视见区Viewport除了document.body元素外不能渲染在其它的容器上�Q�所以一个页面只能有一个视见区�?/strong>

布局 Layouts

Ext 2.0 Layout Class Hierarchy

引言

2.0中最��h��义的改进之一。在创徏优雅的程序布局时感受到易用性或灉|��性方面带来的好处。在Ext 1.x�Q�布局的开发集中围�l�在BorderLayout、Region和ContentPanel几个�c�R�?1.x BorderLayout已经可以方便地生成UI�Q�但要真正创建属于自��q��布局�Q�还是没有��够的支持�?创徏复杂的布局通常需要手工编写一些代码应付滚动条、嵌套和某些怪癖的问题�?

Ext 2.0带来了一个重写编写的、企业��应用的布局��理�pȝ��?共有10�U�风格的布局��理器，分别提供构徏各种可能的程序布局基础。Ext调控了布局诸如size、定位、滚动条和其他的属性方面的问题�Q�一如既往地简单，开��即用。在容器也可无限嵌套布局、�؜合其他不同风格的布局�?

布局由容器内�|�创建，所以布局不应通过关键�?strong>new实例化这�U�方式直接��用�?有一�U�内部的机制�Q�容器与布局能够很好地协调工作—只需配置好相关的参数�Q�容器就会委托其负责的布局�c�d��作。创建容器的时候，你应选定一�U�布局的风��g��及相关的配置�Q�这两个配置是属性layout和属性layoutConfig�?举例�Q?/p>
var panel = new Panel({ title: 'My Accordion', layout: 'accordion', //在这个面板中所使用的布局样式 layoutConfig: { animate: true //布局指定的配�|�项写在�q�里 } // 其他Panel的选项 });

当你创徏嵌套布局�Ӟ��明白面板包含其他面板是很重要的，布局中的每个面板必须指定一个布局��理�?/em>�?多数情况你不需要指定布局的风格如“border”�?#8220;accordion”�Q�较常见的是“fit”那一�U�，会自动调整大��自适应它的容器�?如果你不指定某个布局��理器，默认的是ContainerLayout�c�，不过�q�样很可能导致一些意料不到的情况发生�Q�所以最好精��声明一下�?

每种布局�c�都支持其特定的配置选项。关于布局每种配置选项可参考API文档�?

布局��理�?Layout Managers

ContainerLayout

其它一切布局��理器的基类�Q�容器若不指定某个布局��理器，则默认的��理器就是这个ContainerLayout。ContainerLayout没有��M��的外观表�C��?其主要的职责是容�U�_��目、控制渲染和一些常见�Q务，如调节大��缓�Ԍ��resize buffering�Q��?ContainerLayout常用于扩展制定的布局�Q�很��实例化直接使用。详�l�在API 参�?/a>.

CardLayout

CardLayout��容器中的每个组件当作一个卡片来处理。在某一旉��Q�只有一个卡片是可见的，容器象一个卡片堆栈一样工作。大多数的情况，用于向导�Q�Wizards�Q�，制定的tab实现或其它多��面信息的场合。参�?a class="external text" title="http://extjs.com/deploy/dev/docs/?class=Ext.layout.CardLayout" rel="nofollow">API 参�?/a>�?/p>

AbsoluteLayout

�q�是一个非常简单的布局�Q�通过X/Y坐标�_��来定位包含各��的相关容器。参�?a class="external text" title="http://extjs.com/deploy/dev/docs/?class=Ext.layout.AbsoluteLayout" rel="nofollow">API 参�?/a>.

ColumnLayout

适用于多个列�q�排�l�构的布局风格�Q�每个列的宽度须由像素值或癑ֈ�比指定，但高度自适应于内容的高度。详�l�在API参�?/a>.

AccordionLayout

AccordionLayout包含了一�l�像卡片垂直方向堆栈的面板，同通过展开或收�~�来昄��内容。在某一旉��Q�只有一个卡片是可见的。详�l�在API参�?/a>�?/p>

FitLayout

�q�是一个简单的布局�Q�主要是创徏一个适应容器大小的布局区域。如没有特定的布局要求�q�是容器最好的默认布局。详�l�在API参�?/a>.

AnchorLayout

�q�是��Z��些固定元素相对于容器四条边的布局。元素可通过与边�~�的癑ֈ�比或便宜一个值来定位�Q��ƈ支持相当于物理容器有不同��寸�?#8220;虚拟层画布（virtual layout canvas�Q?#8221;�?详细�?a class="external text" title="http://extjs.com/deploy/dev/docs/?class=Ext.layout.AnchorLayout" rel="nofollow">API文档�?/p>

FormLayout

FormLayout是�ؓ创徏一张要提交数据条目的表单而设计的布局风格。注意，一般来�Ԍ��?a class="external text" title="http://extjs.com/deploy/dev/docs/?class=Ext.form.FormPanel" rel="nofollow">FormPanel�怼��Q�此布局�c�都有表单提交的自动处理�Q�但你会更們֐�使用前者�?FormPanels必须指定layout:'form'�Q�只能一定是�q�样�Q?所以表单额外需要一个布局��其嵌套�?参阅API文档�?/p>

BorderLayout

�?.x的BorderLayout的布局完全一致。布局区域支持嵌套�Q?滑动条面板和可关闭、微调的分隔区域。对于一些典型业务程序的UI��ؓ适用。详�l?a class="external text" title="http://extjs.com/deploy/dev/docs/?class=Ext.layout.BorderLayout" rel="nofollow">API文档�?/p>

TableLayout

主要目的是通过一个表格的形式划分区域。实际上也是生成一个table的HTML makeup 详细�?a class="external text" title="http://extjs.com/deploy/dev/docs/?class=Ext.layout.TableLayout" rel="nofollow">API参�?/a>�?/p>

Grid

概述

2.0中的GridView有极大的改进�Q�而Grid的UI部分�Q�正是由GridView�q�个�c�L��实现的�?.0中GridView最主要的新功能有：

效能的提�?/strong>
GridView的底层结构和渲染代码已在2.0完整重构�q�，�q�侧重考虑了效能部分。正因性能的原因，锁定列的�q�一功能已经取消�Q�参阅下一节）�?
感观�Q�look and feel�Q�的改进
和新2.0的主题一��P�� Grid的外观控制也有新变化�Q��得Grid比以前更时尚和看上去更具吸引力�?
单行归组
多个行可被归�l�到某一指定列，��q��户重新归�l�亦可�?
多行�l�摘�?/strong>
每一�l�可相应的提供一个数据摘要组
�q�阶插�g支持
�?.0中，新加入插件机制。GridView��是�q�种插�g机制的一个典型例子。如范例中所�C�，Grid优秀的功能便是依靠几个预先做好的插�g。插件RowExpander提供了展开、收�~�行的功能，插�gRowNumberer��提供了行中数字的支持�?

列锁定的注意事项�Q�Column Locking�Q?/span>

有些用户或许发现Ext 1.x中列锁定的功能，�?.0因�ؓ已经取消�Q��ƈ可以说以后也不再支持了。列锁定�Q�Column locking�Q�，虽然�Ҏ��些用��h��说有其的用途，但与2.0 GridView的新功能有不兼容的地方（如归�l�、摘要等�Q�，而且��Z��实现锁定会��得Grid渲染性能开销增大�?因此�Q?.x gridView�q�功能的向上升��Q�或打补丁，均不会由官方支持�?

注意�Q?/strong>当前有�ؓ2.0而做的用��h��展在�q�行中，以实�?.0的列锁定�Q�而且看上��d��得还蛮不错。更多有用资讯可论坛的帖�?/a>扑ֈ��?/p>
XTemplate

XTemplate使用了多�U�标�{�֒��Ҏ��操作�W�支持模板，使得模板在应付复杂的数据�l�构时尤为健壮。这里所列出的高度概括的几项功能�Q�欲了解完整的细节和使用�Ҏ��Q�请参阅XTemplate API文档.

自动数组填充和作用域切换
可在子模板作用域内访问父�U�对�?
可访问数�l�烦�?
支持数据值的��单匹�?
自动渲染��点型数�l�（不包含非对象的��|��
基础性的条�g逻辑�W�号if
可执行模板中直接写好的�Q意语�?
支持模板的配�|�属�?
可通过配置��对象自定义模板�Ҏ��
可用于服务端的JavaScript模板

DataView

从表面上看，DataView�?.x的View�c�非常相伹{��两者都支持模版数据渲染�Q�Data store数据�l�定和内建的选区模型和事件。但是，随着2.0新架构的设计�Q�DataView赋予了更强大的功能�?下面是这�ơ最重要的改动：

�l�承自BoxComponent
1.x View�cȝ��承自Observable, 作�ؓ独立�l��g而言工作不错�Q?但是它�ƈ没提供内建的机制与其他组件融合的能力。而DataView��是针对�q�种不��作出的改�q�，该类从BoxComponent�l�承�Q�因�?a title="" >如前文所�q?/a>�Q�也具备一般组件的生存周期控制�?
发挥了XTemplate之功�?/strong>
1.x View�c�采用了1.x本��n的模版类Template 。较好满��了view自��n的需求，但是难以满��一些复杂的渲染��d��。DataView采用的模版类也升�U�到2.0�?a title="" >XTemplate�Q�可��L��定制UI应付复杂的数据�?
新增的配�|�选项
DataView 提供了更为灵�zȝ��Q�几个新选项�Q?

itemSelector: 必须是一个DomQuery选择�W�告知该�cȝ��竟如何分辨出每个item。相�?.x的做法带来更高的灉|��性和更高的速度�?
simpleSelect: 一�U�新的选区生成模式�Q��得用��h��L��下Shift或Ctrl键便可进行多选�?
overClass: 一个CSS的样式类�Q�每个元素onmouseover和onmouseout时生效�?
loadingText:像其他绑定store的Ext�l��g一��P��DataView支持标准的遮�|�效果�?

其它新组�?/span>

一些有��的新组件也加入�?.0中去了。要了解�q�些新组件到底有什么新功能�Q�最好还是看看API文档完整的介�l��?/p>
动作 Action

动作Action是一�U�从�l��g中抽象出来的可复用的“功能�?#8221;�Q�即多个�l��g之间的同一功能都来自这个ACTION的实现。动作允�怽��׃�n句柄�Q�handlers�Q�，配置选项和UI的更斎ͼ�所有组件均支持动作的接口（主要是Toolbar�Q�Button�?Menu�l��g�Q��?详细�?a class="external text" title="http://extjs.com/deploy/dev/docs/?class=Ext.Action" rel="nofollow">API文档�?/p>
CycleButton

�q�是一个包含复选元素菜单的特制的SplitButton。当菜单子项每次被单击，按钮都会轮回一�ơ状态，触发change的事�Ӟ��或调用按钮的changeHandler函数�Q�如果有的话�Q�以�Ȁ�z�菜单项�?FeedViewer演示�E�序��包含了该例子�?预览�H�口地址的那个按钮就是一个SplitButton。详�l�在API文档�?/p>
Hidden (field)

�q�个便是HTML表单中隐藏域的一个简单的实现�Q�能够以EXT FORM�l��g般操控。详�l�在API参�?/a>�?/p>
�q�度�?ProgressBar

1.x中的�q�度条是��单地内徏在MessageBox�c�M��。现在已重构为单独的器�g�q�有�q�一步的改进。它支持两种不同的模式（手动和自动进度）�Q�而且LOOK and FEEL斚w��可轻村ֈ�定。详�l�在API参�?/a>�?/p>
TimeField

�q�是下拉列表旉��选取器的��单实现。详�l�在API参�?/a>�?/p>
Retrieved from "

��菜毛毛 2009-05-18 09:42 发表评论

Firefox使用Firebug中debug

��菜毛毛 — Mon, 18 May 2009 01:30:00 GMT

Firefox使用Firebug中debug视图下的step into, step over�{�按钮需要先讄��javascript脚本的断�?
debug视图中包括step into和step over�{�按钮，�q�些按钮在通常的情况下是无效的�Q�如果需要单步调试javascript代码�Q�可以在相应的javascript代码处设�|�断点，然后��h��面�?/p>
[Firebug��介]
当前版本�Q?.05
Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
在您��览旉��成在Firefox中的Firebug能让您对于大量开发工具了如指掌。您可以实时在�Q何浏览的��面中编辑、调试、监视CSS�Q�HTML和JavaScript�?br /> Visit the Firebug website for documentation, screen shots, and discussion forums:
讉K��Firebug站点可以获得文档、效果图和讨��坛�?/p>
[Firebug发布�|�址]
https://addons.mozilla.org/en-US/firefox/addon/1843
[Firebug站点]
http://www.getfirebug.com
[Firebug文档]
http://www.getfirebug.com/docs.html
[Firebug的bug]
http://code.google.com/p/fbug/issues/list
[Firebug视图]
Console 控制�?br /> Script 脚本
DOM     文档对象�l�构
Net     �|�络

[Firebug的console API]
console API文档, http://www.getfirebug.com/console.html
console.time()用于计算旉��

[Firebug常见问题]
在FireBug的console对象输出�Ӟ��需要注意第一个参数被自动识别为格式字�W�串

Firefox使用Firebug中debug视图下的step into, step over�{�按钮需要先讄��javascript脚本的断�?

文章出处�Q�DIY部落(http://www.diybl.com/course/1_web/javascript/jsjs/2007927/74522.html)

��菜毛毛 2009-05-18 09:30 发表评论

�q�期的ext��目�ȝ��(�?

��菜毛毛 — Fri, 15 May 2009 13:16:00 GMT

最�q�也�l�于使用ext做了一个小的web��目。第一�ơ��用ext做项目毕竟经验不��I��仅记下一些开发思�\和需要注意的地方�?/p>

Ext Js 2.2+Spring 2.5,没有使用struts,hibernate

1�Q�目录结�?/strong>

a�Q�js部分

根目录下建立/js/ext/目录�Q�存放所有和ext相关的js文�g�?js/ext/目录下可建立ext相关子目�?/p>
/js/ext/adapter/ �?存放适配器jquery,prototype,yui。。�?/p>
/js/ext/experimental/ �?存放ext一些未正式推出的组�Ӟ��可参考ext开发包examples例子部分�?/p>
/js/ext/plugins/ �?存放ext扩展�l��g�Q�例如ext的patch文�g�Q�ext主题�Q�扩展组建等�{��?/p>
/js/ext/resources/ �?不用说了�Q�ext开发包中的resources目录直接拯��?/p>
/js/ �?目录下可以放一些最常用的js文�g�?/p>
/js/ext/ �?目录下放�|�ext-all.js�Q�ext-base.js�Q�ext-lang-zh_CN.js�Q�ext核心文�g�Q?/p>
b�Q�模块部�?/p>
根目录下建立/module/文�g夹，每个模块�?module/目录下新建文件夹�Q�例如：

/module/comment/ �?评论模块

/module/stat/ �?�l�计模块

每个模块目录下新建js目录存放当前模块需要引用的js文�g�Q�例�?module/comment/js/comment.js

为简化开发不使用struts�Q�直接��用jsp代替struts�Q�每个模块下新徏action.jsp替代structs接受

ext ajax��h��Q�action.jsp不负责页面的昄��。只负责service层方法调用及��h��跌��{�?/p>
c�Q�权限部�?/p>
根目录下直接��Z��个security目录完事�?/p>
2�Q�基本布局及权�?/strong>

border布局�Q�center区域使用TabPanel�l�徏增加新的iframe�H�口装蝲�pȝ��不同模块�?/p>
暂不在意iframe的效率问题，��可能做到每个系�l�模�?UI部分的独立�?/p>
初始化布局时TabPanel�l��g中添加默认的�Ƣ迎��d��面�Q�解决TabPanel�l��g��d��新窗口时高度增加的bug�?/p>
权限�pȝ��设计参考spring security��的数据库设计�Q�项目后期可与spring security整合�?/p>
3�Q�用戯��问超�?/strong>

解决两种情况下的用户讉K��时�?br /> a�Q�普通http��h��的session��时�?br /> b�Q�异步http��h��的session��时�Q��用ext后大部分的界面刷新都是异步的ajax��h��?br />
不管是那�U�类型的http��h��L��可以�׃��个过滤器来捕捉�?br /> 分类�Q�普通http��h��的header参数中没有x-requested-with:XMLHttpRequest头信息，而异步的有�?br /> 其实对于常见的ajax框架�Q�header中还有标�C��p�n份的header信息�?br />
对于普通的http��h��Q�发现session��时后直接重定向��C��个超旉��面，昄��讉K��时�?br /> 对于异步http��h��Q�发现session��时后则向请求的response中写入特定的��时头信息，客户端ajax对象��?br /> 头信息，发现有超时状态标志后调用昄��时信息的javascript�Ҏ��Q�提�C�用戯��问超时�?/p>

服务器端session��时后在�q��o器中为response��d��新的头信息，标记该请求超�Ӟ��

Js代码

if(r.getHeader("x-requested-with")!=null
    && r.getHeader("x-requested-with").equalsIgnoreCase("XMLHttpRequest")){
    response.setHeader("sessionstatus","timeout");
}

if(r.getHeader("x-requested-with")!=null && r.getHeader("x-requested-with").equalsIgnoreCase("XMLHttpRequest")){ response.setHeader("sessionstatus","timeout"); }

使用Ext.Ajaxt对象完成异步��h��的交互，Ext.Ajax是单实例对象�Q�非帔R��要，全局单一Ext.Ajax实例�Q�）�?br /> 注册Ext.Ajax的requestcomplete事�g�Q�每个ajax��h��成功后首先响应该事�g。在该事件的回调函数里面判断
讉K��h��是否��时。��用Ext.Ajax对象的好处是�Q�只需要引入一个包含了几行��时处理代码的js文�g�Q�就可以
为当前应用增加超时处理功能，原有代码不需要做��M��修改�?

使用Ext.Ajaxt对象完成异步��h��交互�Q�假如checkUserSessionStatus是你的回调方法，每个��面引用�Q?

Js代码

Ext.Ajax.on('requestcomplete',checkUserSessionStatus, this);
function checkUserSessionStatus(conn,response,options){
    //Ext重新��装了response对象
    if(typeof response.getResponseHeader.sessionstatus != 'undefined'){
        //发现��h��时�Q�退出处理代�?..
    }
}

Ext.Ajax.on('requestcomplete',checkUserSessionStatus, this); function checkUserSessionStatus(conn,response,options){ //Ext重新��装了response对象 if(typeof response.getResponseHeader.sessionstatus != 'undefined'){ //发现��h��时�Q�退出处理代�?.. } }

可以利用的几个特性：
a�Q�所有的ajax��h��均带有x-requested-with:XMLHttpRequest头信�?br /> b�Q�Ext.Ajax是单实例对象�Q�非帔R��要，全局单一Ext.Ajax实例�Q�）
c�Q�注册Ext.Ajax的requestcomplete事�g�Q�每个ajax��h��成功后首先响应该事�g�Q�概�늱�似spring的aop拦截�Q��?

对于其他的ajax框架�Q�解决用戯��问请求超时这个问题的思�\是类似的�?/p>

在这里推荐一个很实用的Js�Ҏ��Q?/p>

Js代码

function getRootWin(){
    var win = window;
    while (win != win.parent){
        win = win.parent;
    }
    return win;
}

function getRootWin(){ var win = window; while (win != win.parent){ win = win.parent; } return win; }

通过该方法，可以在一个�Q意深度的iframe中调用父iframe中的�Ҏ��。具体到�q�里��是无论哪一个iframe中的用户�?/p>
问请求超�Ӟ��都可以通过该方法调用最外层iframe中的退出方法，�q�样便�ؓ用户提供了一个统一的访问超旉��出的UI

呈现�?/p>

4�Q�系�l�异常处�?/strong>

��实际业务代码中的各�U�异常封装成IOException, ServletException异常�Q�指定过滤器捕获。其余处理思�\�?br /> 用户讉K��时处理�?/p>

5�Q�添加jquery支持

使用jquery��手的且希望在Ext��目中同时��用某些jquery插�g的时候，��d��jquery支持�?/p>
��面head中直接添加：

Js代码

"stylesheet" type="text/css" href="/js/ext/resources/css/ext-all.css" />

"text/javascript" src="/js/ext/adapter/jquery/jquery.js">
"text/javascript" src="/js/jquery.cookie.js">
"text/javascript" src="/js/ext/adapter/jquery/ext-jquery-adapter.js">

"text/javascript" src="/js/ext/ext-base.js">
"text/javascript" src="/js/ext/ext-all.js">
"text/javascript" src="/js/ext/ext-lang-zh_CN.js">

6�Q�修改布局

常见的布局一般是�Q�header,center,footer,以及一个位于页面左侧的tree menu。其实对于Ext的UI实现来说�Q?/p>
��L��header,footer也不错，因�ؓExt的UI本来��做得挺好看再加上去掉header及footer后可以�ؓcenter增加�?/p>
��可视区面积�Q�一个页面还可以昄��更多的内宏V�?br />
应该可以支持�q�两�U�布局方式的切换，交给用户选择�?br /> 试了几次�Q�在border布局初始化完毕之后再惛_��掉header,footer区域好像比较�ȝ��Q�ext的官方论坛上也说�?/p>
计border布局的本意就是应付静态呈现�?br /> 但是好像已经有javaeye上的同志实现了动态的border布局呵呵。可以参考一�?EXT2的动态BorderLayout�l��g �?/p>

7�Q�更换主�?/strong>

去ext的官�|�上下蝲各种主题皮肤 Themes for Ext 2.0

主题皮肤文�g拯��x��?js/ext/plugins/theme/css/,/js/ext/plugins/theme/images/ 目录

最好将用户选择的主题配�|�保存在cookie中，�q�样用户每次登陆都可以��用相同的界面主题�?/p>
Ext主题切换�Q?/p>

Js代码

if($.cookie('ext.theme') != null && $.cookie('ext.theme') != 'default'){
    Ext.util.CSS.swapStyleSheet("theme","/js/ext/plugins/theme/css/"+$.cookie('ext.theme'));
}

if($.cookie('ext.theme') != null && $.cookie('ext.theme') != 'default'){ Ext.util.CSS.swapStyleSheet("theme","/js/ext/plugins/theme/css/"+$.cookie('ext.theme')); }

8�Q�添加自定义的toolbar图标

直接参考javaeye上的�q�边文章 �׃�n一些Ext的图�?/a> 卛_��Q�作者提供的图标很好看，使用也非常简单�?/p>

9�Q�生成Excel文档
最先参考的资料是extjs论坛上面的这��文章：GridPanel directly to Excel.
作者思�\不错�Q�就是利用javascript直接��d��GridPanel的store数据�Q�然后生成一个描�q�excel文档的xml数据�Q�最�?br /> 再通过一个包含了该xml数据�?data" URL下蝲该excel�?br /> 该方法的好处是通用性比较强�Q�生成的excel文档也不隄��Q��ƈ且是不需要服务器端参与处理的一�U�纯客户端解��x��案�?br /> 但是最大的�~�点是目前IE7不支持（This needs a browser that supports data URLs. FF, Opera and IE8 will support this.�Q��?br /> 而后发现dojochina�|�站上的一个用��h��理和修改了这个生成excel文档的实现方法�?/p>
引用

以下的几个问题我都已�l�整理和修改�Q?br /> 1、没有考虑到含有序号和选择框的grid�Q?br /> 2、utf8转换bug.
3、宽度的bug
4、不支持ie6、ie7和Safari

原文地址�Q?a >官方Grid导出到Excel修正�?/a> �Q�作者给出的代码有些��问题，需要略微进行些调整�Q?br />
如果是IE��览器，客户端将以multipart/form-data方式向服务器端提交该xml数据�?br /> 原文�l�出了后台由php实现时的exportexcel.php代码�?/p>

如果后台由java实现�Q�exportexcel.jsp

Java代码

<%@page import="java.util.Date"%>
<%@page import="org.apache.commons.lang.time.DateFormatUtils"%>
<%@page import="com.oreilly.servlet.multipart.*"%>
<%
    response.setContentType("application/vnd.ms-excel");
    response.setHeader("Content-disposition","attachment;filename="+
                       (DateFormatUtils.format(new Date(),"yyyyMMddHHmmss"))+".xls" );

    MultipartParser parse = new MultipartParser(request,1000000000);
    Part part = null;
    int maxcount = 0;
    ParamPart param = null;

    while(true){
        part = parse.readNextPart();
        if(part == null || maxcount>1000)
            break;
        if(part.isParam() && part.getName().equalsIgnoreCase("exportContent")){
            param = (ParamPart)part;
            break;
        }
        maxcount++;
    }

    if(param!=null){
        response.getWriter().println(param.getStringValue());
    }else{
        ;
    }
%>

<%@page import="java.util.Date"%> <%@page import="org.apache.commons.lang.time.DateFormatUtils"%> <%@page import="com.oreilly.servlet.multipart.*"%> <% response.setContentType("application/vnd.ms-excel"); response.setHeader("Content-disposition","attachment;filename="+ (DateFormatUtils.format(new Date(),"yyyyMMddHHmmss"))+".xls" ); MultipartParser parse = new MultipartParser(request,1000000000); Part part = null; int maxcount = 0; ParamPart param = null; while(true){ part = parse.readNextPart(); if(part == null || maxcount>1000) break; if(part.isParam() && part.getName().equalsIgnoreCase("exportContent")){ param = (ParamPart)part; break; } maxcount++; } if(param!=null){ response.getWriter().println(param.getStringValue()); }else{ ; } %>

�q�里使用 com.oreilly.servlet 解析multipart/form-data�c�d��数据�?a >com.oreilly.servlet 很适合文�g�Q�表单�؜合提
交、多文�g上传的数据解析�?/p>

10�Q�js文�g��理

凡是�q�种��Z��javascript的富客户端解��x��案一大问题就是js文�g太多。每个页面不仅要导入Ext的css,js文�g�Q?br /> �q�要导入每个��面应用需要的一些js文�g�Q�这��L��理�v来很�ȝ��?br /> 原来的情况，臛_��要导入：

Html代码

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

<script type="text/javascript" src="/js/ext/adapter/jquery/jquery.js">script>
<script type="text/javascript" src="/js/jquery.cookie.js">script>
<script type="text/javascript" src="/js/ext/adapter/jquery/ext-jquery-adapter.js">script>

<script type="text/javascript" src="/js/ext/ext-base.js">script>
<script type="text/javascript" src="/js/ext/ext-all.js">script>
<script type="text/javascript" src="/js/ext/ext-lang-zh_CN.js">script>
<script type="text/javascript" src="/js/extajax.js">script>
<script type="text/javascript" src="/js/exttheme.js">script>

推荐使用 JSLoader ��理众多的js�Q�css文�g
1�Q�编写一个js文�g�l�一��理支持所有公用css�Q�js文�g的动态导�?/p>

Js代码

//��d��jquery支持
JSLoader.loadJavaScript("/js/ext/adapter/jquery/jquery.js");
JSLoader.loadJavaScript("/js/jquery.cookie.js");
JSLoader.loadJavaScript("/js/ext/adapter/jquery/ext-jquery-adapter.js");
//Ext支持
JSLoader.loadStyleSheet("/js/ext/resources/css/ext-all.css");
JSLoader.loadJavaScript("/js/ext/ext-base.js");
JSLoader.loadJavaScript("/js/ext/ext-all.js");
JSLoader.loadJavaScript("/js/ext/ext-lang-zh_CN.js");
//加蝲自定义toolbar图标css样式
JSLoader.loadStyleSheet("/js/ext/plugins/icon/css/ext-extend.css");
//加蝲用户��时,异常处理
JSLoader.loadJavaScript("/js/extajax.js");
//主题��理
JSLoader.loadJavaScript("/js/exttheme.js");
//Excel导出支持
JSLoader.loadJavaScript("/js/ext.excel.js");

//��d��jquery支持 JSLoader.loadJavaScript("/js/ext/adapter/jquery/jquery.js"); JSLoader.loadJavaScript("/js/jquery.cookie.js"); JSLoader.loadJavaScript("/js/ext/adapter/jquery/ext-jquery-adapter.js"); //Ext支持 JSLoader.loadStyleSheet("/js/ext/resources/css/ext-all.css"); JSLoader.loadJavaScript("/js/ext/ext-base.js"); JSLoader.loadJavaScript("/js/ext/ext-all.js"); JSLoader.loadJavaScript("/js/ext/ext-lang-zh_CN.js"); //加蝲自定义toolbar图标css样式 JSLoader.loadStyleSheet("/js/ext/plugins/icon/css/ext-extend.css"); //加蝲用户��时,异常处理 JSLoader.loadJavaScript("/js/extajax.js"); //主题��理 JSLoader.loadJavaScript("/js/exttheme.js"); //Excel导出支持 JSLoader.loadJavaScript("/js/ext.excel.js");

2�Q�每个页面只需要引入：

Html代码

<script type="text/javascript" src="/js/jsloader.js">script>
<script type="text/javascript" src="/js/assets.js">script>

http://www.javaeye.com/topic/320633

��菜毛毛 2009-05-15 21:16 发表评论

Tutorial:EXT��?1

��菜毛毛 — Fri, 15 May 2009 08:24:00 GMT

Tutorial:Introduction to Ext 2.0 (Chinese)

From Learn About the Ext JavaScript Library

Jump to: navigation, search

Summary: 对Ext库的��M��概述�q�介�l�如何完成一些常见的�E�序��d��。新用户应从�q�里开始�?

Author: Brian Moeskau(译者：Frank Cheung)

Published: 2007�q�十一月一�?

Ext Version: 2.0

Languages: English Chinese Japanese
Korean Italian Bahasa Indonesia

本教�E�适用于Ext 2.0的版本，�?a title="Tutorial:Introduction to Ext" >版本1.x仍可扑ֈ��?

无论你是Ext库的新手�Q�抑或是想了解Ext的�h�Q�本��文章的内容都适合你。本文将��单地介绍Ext的几个基本概念，和如何快速地做出一个动态的��面�q�运行�v来，假设读者已具备了一些JavaScript�l�验和简单了解HTML的文档对象模型（document object model �Q�DOM�Q��?

下蝲Ext

如果你未曾下载过�Q�那应从官方�|�站那里下蝲最新版本的Ext http://extjs.com/downloads �?/p>
因应各种的下载需求，有几�U�不同的可选项。通常圎ͼ�最�E�_��的版本，是较多�h的选择。下载解包后�Q�那�?strong>example文�g夹便是一个探索Ext的好地方�Q?/p>
开始！

下蝲�C�Z��文�g

IntroToExt2.zip

我们��讲讲怎么使用Ext�Q�来完成一些JavaScript常见的�Q务。如果你惌��p��试，��应该先�?tt>IntroToExt2.zip �Q�用来构建已下面的Ext代码�?/p>
Zip包里有三个文�Ӟ��ExtStart.html, ExtStart.js�?strong>ExtStart.css。解包这三个文�g到Ext的安装目录中�Q�例如，Ext是在“C:\code\Ext\v2.0”中，那应该在"v2.0"里面新徏目录“tutorial”。双�?strong>ExtStart.htm�Q�接着你的��览器打开启动��面�Q�应该会有一条消息告诉你配置已完毕。如果出��C��Javascript错误�Q�请按照��面上的指引操作�?/p>
现在在你常用的IDE中或文本�~�辑器中�Q�打开ExtStart.js看看�?/p>
Ext.onReady(function() { alert("Congratulations! You have Ext configured correctly!"); });

Ext.onReady可能是你接触的第一个也可能是在每个��面都要使用的方法。这个方法会在DOM加蝲全部完毕后，保证��面内的所有元素能被Script引用�Q�reference�Q�之后调用。你可删除alert()那行�Q�加入一些实际用途的代码试试�?/p>
Element�Q�Ext的核�?/span>

大多数的JavaScript操作都需要先获取��面上的某个元素的引用（reference�Q?好让你来做些实质性的事情。传�l�的JavaScript做法�Q�是通过ID获取Dom节点的：

var myDiv = document.getElementById('myDiv');

�q�毫无问题，不过�q�样单单�q�回一个对象（DOM节点�Q�，用�v来�ƈ不是太实用和方便。�ؓ了要用那节点�q�点事情�Q�你�q�将要手工编写不��的代码�Q�另外，对于不同�c�d��览器之间的差异�Q�要处理��h��可真头大了�?/p>
�q�入Ext.element 对象。元素（element�Q�的的确��是Ext的心脏地带，--无论是访问元素（elements�Q�还是完成一些其他动作，都要涉及它。Element的API是整个Ext库的基础�Q�如果你旉��不多�Q�只是想了解Ext中的一两个�cȝ��话，Element一定是首选！

由ID获取一个Ext Element 的相应代码如下（首页ExtStart.htm 包含一个ID�?#8220;myDiv”�?div�Q�然后，在ExtStart.js中加入下列语句）�Q?The corresponding code to get an Ext Element by ID looks like this (the starter page ExtStart.html contains a div with the id "myDiv," so go ahead and add this code to ExtStart.js):

Ext.onReady(function() { var myDiv = Ext.get('myDiv'); });

再回头看看Element对象�Q�发��C��么有��的东东呢？

Element包含了常见的DOM�Ҏ��和属性，提供一个快��L��、统一的、跨��览器的接口�Q�若使用Element.dom的话�Q�就可以直接讉K��底层DOM的节炏V��）�Q?
Element.get()�Ҏ��提供内置�~�存�Q�Cache�Q�，多次讉K��同一对象效率上有极大优势�Q?
内置常用的DOM节点的动作，�q�且是跨��览器的定位的位�|�、大��、动甅R��拖攄��{�（��d��/�U�除 CSS �c? ��d��/�U�除事�g处理�E�序, 定位, 改变大小, 动画, 拖放�Q��?

�q�意味着你可用少量的代码来做各种各样的事情，�q�里仅仅是一个简单的例子�Q�完整的列表�?a class="external text" title="http://extjs.com/deploy/dev/docs/?class=Ext.Element" rel="nofollow">Element API 文档中）�?/p>
�l�箋在ExtStart.js中，在刚才我们获取好myDiv的位�|�中加入�Q?/p>
myDiv.highlight(); //黄色高亮昄��然后渐退 myDiv.addClass('red'); // ��d��自定义CSS�c?(在ExtStart.css定义) myDiv.center(); //在视图中��元素居�?/span> myDiv.setOpacity(.25); // 使元素半透明

获取多个DOM的节�?/span>

通常情况下，惌��取多个DOM的节点，难以依靠ID的方式来获取。有可能因�ؓ没设�|�ID,或者你不知道ID,又或者直接用ID方式引用有太多元素了。这�U�情况下�Q�你��׃��不用ID来作��取元素的依据�Q�可能会用属性（attribute�Q�或CSS Classname代替。基于以上的原因�Q�Ext引入了一个异常强大的Dom Selector库，叫做DomQuery�?/p>
DomQuery可作为单独的库��用，但常用于Ext�Q�你可以在上下文环境中（Context�Q�获取多个元素，然后通过Element接口调用。��o人欣喜的是，Element对象本��n便有Element.select的方法来实现查询�Q�即内部调用DomQuery选取元素。这个简单的例子中，ExtStart.htm包含若干�D�落�Q?lt;p>标签�Q�，没有一个是有ID的，而你惌��村֜�通过一�ơ操作马上获取每一�D�，全体执行它们的动作，可以�q�样做：

// 每段高亮昄�� Ext.select('p').highlight();

Element.select在这个例子中的方便性显露无疑。它�q�回一�?a class="external text" title="http://extjs.com/deploy/dev/docs/?class=Ext.CompositeElement" rel="nofollow">复合元素�Q�能通过元素接口�Q�Element interface�Q�访问每个元素。这样做的好处是可不用��@环和不分别访问每一个元素�?

DomQuery的选取参数可以是一�D�较长的数组�Q�其中包括W3C CSS3 Dom选取器、基本XPatch、HTML属性和更多�Q�请参阅DomQuery API文档以了解这功能强大的库个中�l�节�?/p>
响应事�g

到这范例为止�Q�我们所写的代码都是攑֜�onReady中，卛_��面加蝲后��M��立即执行�Q�功能较单一——这��L��话，你便知道�Q�如何响应某个动作或事�g来执行你希望做的事情�Q�做法是�Q�先分配一个function�Q�再定义一个event handler事�g处理器来响应。我们由�q�个��单的范例开始，打开ExtStart.js�Q�编辑下列的代码�Q?/p>
Ext.onReady(function() { Ext.get('myButton').on('click', function(){ alert("你单��M��按钮"); }); });

代码依然会加载好��面后执行，不过重要的区别是�Q�包含alert()的function是已定义好的�Q�但它不会立卛_��被执行，是分配到按钮的单��M��件中。用��显的文字解释，��是�Q�获取ID�?myDottom'元素的引用，监听��M��发生�q�个元素上被单击的情况，�q�分配一个function,以准备�Q何单��d��素的情况�?/p>
一般来��_��Element.select也能做同��L��事情�Q�即作用在获取一�l�元素上。下一例中�Q�演�C�Z��面中的某一�D�落被单��d��Q�便有弹出窗口：

Ext.onReady(function() { Ext.select('p').on('click', function() { alert("你单��M��一�D�落;"); }); });

�q�两个例子中�Q�事件处理的function均是��单几句，没有函数的名�U�ͼ��q�种�c�d��函数�U�Cؓ“匿名函数�Q�anonymous function�Q?#8221;�Q�即是没有名的的函数。你也可以分配一个有名字的event handler,�q�对于代码的重用或多个事件很有用。下一例等效于上一例：

Ext.onReady(function() { var paragraphClicked = function() { alert("你单��M��一�D�落;"); } Ext.select('p').on('click', paragraphClicked); });

到目前�ؓ止，我们已经知道如何执行某个动作。但当事件触发时�Q�我们如何得知这个event handler执行时是作用在哪一个特定的元素上呢�Q�要明确�q�一炚w��常简单，Element.on�Ҏ��传入到even handler的function中（我们�q�里先讨论第一个参敎ͼ�不过你应该浏览API文档以了解even handler更多的细节）。在我们之前的例子中�Q�function是忽略这些参数的�Q�到�q�里可有��许的改变，——我们在功能上提供了更深层次的控制。必��d��说明的是�Q�这实际上是Ext的事件对象（event object�Q?一个跨��览器和拥有更多控制的事件的对象。例如，可以用下列的语句�Q�得到这个事件响应所在的DOM节点�Q?br />

Ext.onReady(function() { var paragraphClicked = function(e) { Ext.get(e.target).highlight(); } Ext.select('p').on('click', paragraphClicked); });

注意得到的e.target是DOM节点�Q�所以我们首先将其�{换成为EXT的Elemnet元素�Q�然后执行欲完成的事�Ӟ��q�个例子中，我们看见�D�落是高亮显�C�的�?br />

使用Widgets

(Widget原意�?#8220;��器�?#8221;�Q�现指页面中UI控�g)

除了我们已经讨论�q�的核心JavaScript库，当前的Ext亦包括了一�p�d��的最前端的JavaScirptUI�l��g库。文本以一些常用的widget��Z��子，作简单的介绍�?/p>
MessageBox

比�v略�ؓ沉闷�?#8220;HelloWolrd”消息�H�口�Q�我们做��许变化�Q�前面我们写的代码是�Q�单��L��个段落便会高亮显�C�，现在是单��L��落，在消息窗口中昄��D�落内容出来�?br /> 在上面的paragraphClicked的function中，��这行代码：

Ext.get(e.target).highlight();

替换为：

var paragraph = Ext.get(e.target); paragraph.highlight(); Ext.MessageBox.show({ title: 'Paragraph Clicked', msg: paragraph.dom.innerHTML, width:400, buttons: Ext.MessageBox.OK, animEl: paragraph });

�q�里有些新的概念需要讨��Z��下。在�W�一行中我们创徏了一个局部变量（Local Variable�Q�来保存某个元素的引用，卌��单击的那个DOM节点�Q�本例中�Q�DOM节点指的是段落paragrah,事因我们已经定义该事件与
标签发生兌��的了�Q�。�ؓ什么要�q�样做呢�Q�嗯...观察上面的代码，我们需要引用同一元素来高亮显�C�，在MessageBox中也是引用同一元素作�ؓ参数使用�?br /> 一般来��_��多次重复使用同一��|��Value�Q�或对象�Q�是一个不好的方式�Q�所以，作�ؓ一个具备良好OO思维的开发者，应该是将其分配到一个局部变量中�Q�反复��用这变量�Q?/p>
现在�Q��ؓ了我们接下来阐述新概�늚�演示�Q�请观察MessageBox的调用。乍一看，�q�像一�q�串的参��C��入到�Ҏ��中，但仔�l�看�Q�这是一个非常特别的语法。实际上�Q�传入到MessageBox.show的只有一个参敎ͼ�一个Object literal�Q�对象字面化�Q?包含一�l�属性和属性倹{��在Javascript中，对象字面化是动态的�Q�你可在��M��时候用{和}创徏一个典型的对象(object)。其中的字符�׃��p�d��的name/value�l�成的属性，属性的格式是[property name]:[property value]。在整个Ext中，你将会经帔R��到这�U�语法，因此你应该马上消化�ƈ吸收�q�个知识点！
使用对象字面化Object Literal的原因是什么呢�Q�主要的原因�?#8220;灉|��性、可伸羃性（flexibility�Q?#8221;的考虑"�Q�随时可新增、删除属性，亦可不管��序地插入。而方法不需要改变。这也是多个参数的情况下�Q��ؓ最�l�开发者带来不��的方便�Q�本例中的MessageBox.show())。例如，我们说这儿的foo.action�Ҏ��Q�有四个参数�Q�而只有一个是你必��M��入的。本例中�Q�你惛_��中的代码可能会是�q�样的foo.action(null, null, null, 'hello').,若果那方法用Object Literal来写�Q�却是这��P�� foo.action({ param4: 'hello' })�Q�这更易用和易读�?/p>
Grid

Grid是Ext中�h们最惛_��睹�ؓ快的和最为流行Widgets之一。好�Q�让我们看看怎么��L��地创��Z��个Grid�q�运行。用下列代码替换ExtStart.js中全部语句：

Ext.onReady(function() { var myData = [ ['Apple',29.89,0.24,0.81,'9/1 12:00am'], ['Ext',83.81,0.28,0.34,'9/12 12:00am'], ['Google',71.72,0.02,0.03,'10/1 12:00am'], ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'], ['Yahoo!',29.01,0.42,1.47,'5/22 12:00am'] ]; var myReader = new Ext.data.ArrayReader({}, [ {name: 'company'}, {name: 'price', type: 'float'}, {name: 'change', type: 'float'}, {name: 'pctChange', type: 'float'}, {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'} ]); var grid = new Ext.grid.GridPanel({ store: new Ext.data.Store({ data: myData, reader: myReader }), columns: [ {header: "Company", width: 120, sortable: true, dataIndex: 'company'}, {header: "Price", width: 90, sortable: true, dataIndex: 'price'}, {header: "Change", width: 90, sortable: true, dataIndex: 'change'}, {header: "% Change", width: 90, sortable: true, dataIndex: 'pctChange'}, {header: "Last Updated", width: 120, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'} ], viewConfig: { forceFit: true }, renderTo: 'content', title: 'My First Grid', width: 500, frame: true }); grid.getSelectionModel().selectFirstRow(); });

�q�看上去很复杂，但实际上加�v来，只有四行代码�Q�不包含��试数据的代码）�?

�W�一行创建数�l��ƈ作�ؓ数据源。实际案例中�Q�你很可能从数据库、或者WebService那里得到动态的数据�?
接着�Q�我们创建�ƈ加蝲data store�Q?data store��会告诉Ext的底层库接手处理和格式化�q�些数据。不同的数据�c�d��d��c�Reader中指明�?
接着�Q�我们创��Z��个Grid的组�Ӟ��传入各种的配�|��|��有：

新的data store, 配置好测试数据和reader
列模型column model定义�?列columns的配�|?
其他的选择指定了Grid所需的功�?

最后，通过SelectionModel告诉Grid高亮昄��W�一行�?

不是太困隑֐��Q�如果一切顺利，完成之后你会看到像这��L��Q?

当然�Q�你现在�q�未掌握�q�段代码的某些细节，但先不要紧，�q�个例子的目的是告诉你，只要学习了少量的几行代码�Q�创��Z��个富界面的多功能的UI�l��g是可能的。更多的grid�l�节读者可作�ؓ一�U�练习去学习。这儿有许多学习Grid的资源，Ext Grid教程�?a class="external text" title="http://extjs.com/deploy/dev/examples/" rel="nofollow">Grid交互演示交和Grid API文档�?

�q�有更多�?.

�q�只是其中一部分。还有一打的UI Widgets可以供调用，�?layouts, tabs, menus, toolbars, dialogs, tree view�{�等。请探烦范例演示�?

使用Ajax

在弄好一些页面后�Q�你已经懂得在页面和脚本之间的交互（interact�Q�原理。接下来�Q�你应该掌握的是�Q�怎样与远�E�服务器�Q�remote server�Q�交换数据，常见的是从数据库加蝲数据�Q�load�Q�或是保存数据（save�Q�到数据库中。通过JavaScript异步无刷��C��换数据的�q�种方式�Q�就是所谓的Ajax。Ext内徏卓越的Ajax支持�Q�例如，一个普遍的用户操作��是�Q�异步发送一些东西到服务器，然后�Q�UI元素�Ҏ��回应�Q�Response�Q�作出更新。这是一个包含text input的表单，一个div用于昄��消息�Q�注意，你可以在ExtStart.html中加入下列代码，但这必须要访问服务器�Q�：

id="msg">

Name: type="text" id="name" /> type="button" id="okButton" value="OK" />
id="msg">
接着�Q�我们加入这些处理交换数据的JavaScript代码到文件ExtStart.js�?用下面的代码覆盖)�Q?/p>

Ext.onReady(function(){ Ext.get('okButton').on('click', function(){ var msg = Ext.get('msg'); msg.load({ url: 'ajax-example.php', // <-- 按实际改�?/span> params: 'name=' + Ext.get('name').dom.value, text: 'Updating...' }); msg.show(); }); });

注意�Q?/strong> �q�个例子需要web server才可�q�行�?��览器的URL地址不应是以file://开��_��而是http://开��_��否则的话Ajax的数据交互将不会工作。Localhost��可以工作得很好�Q�但必须是通过http的�?

�q�种模式看�v来已�l�比较熟悉了吧！先获取按钮元素，加入一个匿名函数监听单凅R��在事�g处理器中�Q�event handler�Q�，我们使用一个负责处理Ajax��h��、接受响应（Response�Q�和更新另一个元素的Ext内徏�c�，�U�C��UpdateManagerUpdater。UpdateManager可以直接使用�Q�或者和我们现在的做法一��P��通过Element的load�Ҏ��来引用（本例中该元素是id�?#8220;msg“的div�Q�。当使用Element.load�Ҏ��Q�请求（request)会在加工处理后发送，�{�待服务器的响应�Q�Response�Q�，来自动替换元素的innerHTML。简单传入服务器url地址�Q�加上字�W�串参数�Q�便可以处理�q�个��h��Q�本例中�Q�参数值来�?#8220;name”元素的value),而text值是��h��发送时提示的文本，完毕后显�C�那个msg的div�Q�因为开始时默认隐藏�Q�。当�Ӟ��和大多数Ext�l��g一��P��Ext.Ajax 有许多的参数可选，不同的Ajax��h��有不同的�Ҏ��。而这里仅演示最��单的那种�?/p>

最后一个关于Ajax隐晦的地方就是，服务器实际处理请求和�q�回�Q�Resposne�Q�是具体�q�程。这个过�E�会是一个服务端��面�Q�一个Servlet�Q�一个Http调度�q�程�Q�一个WebService,甚至是Perl或CGI脚本�Q�即不指定一个服务器都可以处理的http��h��。让人无法预料的是，服务器返回什么是服务器的事情�Q�无法给一个标准的例子来覆盖阐�q�所有的可能性。�?/p>
下面的例子是一些常见的语言以方便开始测�?�q�段代码输出刚才我们传入'name'的那个值到客户端，卛_��送什么，�q�回什么，然后在我们刚才写�?msg' div中加入该文本�Q�。PHP的已�l�包含在下蝲文�g中，文�g名�ؓ'ajax-example.php'�Q�可换成你自己服务端的代码：

Plain PHP

if(isset($_POST['name'])) { echo 'From Server: '.$_POST['name']; } ?>

CakePHP

if(isset($this->data['name'])) { $this->flash('From Server: '.$this->data['name']); } ?>

Django

from django.http import HttpResponse def ajax_request(request): return HttpResponse('From Server: %s' % request.POST.get('name', 'nada'))

Perl

#!/usr/bin/perl use strict; use warnings; use CGI; my $Query = new CGI; print $Query->header(); print "Hello from : ".$Query->param('name'); exit;

ASP.Net

protected void Page_Load(object sender, EventArgs e) { if (Request.Form["name"] != null) { Response.Write("From Server: " + Request.Form["name"]); Response.End(); } }

ColdFusion

StructKeyExists(form, "name")> From Server: #form.name#

JSP

From Server: ${param.name}

使用Ajax的真正挑战，是需要进行适当的手工编码，�q�相应格式化为服务端可接收的数据�l�构。有几种格式供�h们选择�Q�最常用为JSON/XML)�?Ext没有跟�Q何服务器语言有独家联�p�，因此其它特定语言的库亦可用于Ext处理Ajax服务。只要页面接受到�l�果是EXT能处理的数据格式�Q�Ext�l�不会干涉服务器其他的事情！推荐参阅我们提供�?a class="external text" title="http://extjs.com/learn/Manual:Resources#Platform-Specific_Resources" rel="nofollow">各个�q�_��资源以了解服务端框架的更多资讯和辅助�?/p>
下一步是�Q?/span>

现在你已�l�一睹Ext其芳容，知道她大概能做些什么了。下面的资源有助您进一步深入了解：

Additional Tutorials
Interactive Examples
Ext Programmer's API Documentation
Ext User Forums

Retrieved from "

��菜毛毛 2009-05-15 16:24 发表评论

EXT新手 ��建立自己的工��L��

��菜毛毛 — Fri, 15 May 2009 07:06:00 GMT
我认为学习EXT开发最好的�Ҏ��是，在真正开发之前，掌握好高�U�JavaScript知识�Q?br /> ��像鱼儿游在水里一样对JS�q�用自如�?br />
自己可以创徏JavaScript的类、明白类原型�Q�class's prototype�Q�的原理�Q?br /> 和明白函数的作用域都是有益的帮助�?br />
明白Ajax��Z��么要异步方式也是其中的一个知识点�?br />
论坛�?0�Q�所提出的问题很大原因是对JavaScript知识不牢固所臻I��而不是EXT API的问题�?br />
当真正开始用EXT做开发了�Q�那么安装目录下examples/*的文件夹��过70个例子便是研�I�的好对象，
�q�些例子��Z��展示了你日后��会使用的大多数技巧或�Ҏ��?br />
接着�Q�最好就是先拿examples/*的文件夹中例子练一�l�手�Q�做一些简单、轻型的��项目�?br /> 如果直接拿EXT�l�合到程序去开发，很可能你会因��来越复杂的问题惔��x��陗��?br />
把每一��的知识�?技�?都做成可单独�q�行文�g�Q�这样以便你以后参考，�q�有一个好处是�Q�可以发到论坛上�Q�然后我们放到examples/*的文件夹�Q�以便我们的��试�q�协助你�?br />
如果能按照以上的��d��Q�我�怿��q�是一个很好的累积。而且按照我的角度看，整个UI��是�q�样一点一�Ҏ��v来�?br />
Animal
Ext官方中文教程列表

特别鸣谢�Q?a target="_blank">Ext中文�?/a>整理、维�?

注意�Q��{载文�?请保留原始链接和�|�名

入门:

Tutorial:EXT��? extjs.com/learn/Tutorial:Introduction_to_Ext_2.0_(Chinese) Tutorial:Ext 2��q? extjs.com/learn/Ext_2_Overview_(Chinese) Tutorial:EXT新手�� extjs.com/learn/Tutorial:EXT新手�� Tutorial:怎么��L��地进入Ext的世�? extjs.com/learn/Tutorial:Playing_With_Ext_The_Easy_Way_(Chinese) Tutorial:Javascript中的作用域（scope�Q�是什�?(一) extjs.com/learn/Tutorial:What_is_that_Scope_all_about_(Chinese) Tutorial:Javascript中的作用域（scope�Q�是什�?(�? extjs.com/learn/What_is_that_Scope_all_about2_(Chinese) Manual:Ext源码概述 extjs.com/learn/Manual:Ext_Source_Overview_(Chinese) Manual:Ext与RESTful Web Services extjs.com/learn/Manual:RESTful_Web_Services_(Chinese)

�E�序设计:

Tutorial:如何合理地规划一个应用程�? extjs.com/learn/Tutorial:Application_Layout_for_Beginners_(Chinese) Tutorial:如何本地化ext的教�E? extjs.com/learn/Tutorial:Localizing_Ext_(Chinese) Tutorial:xtype的含�? extjs.com/learn/Tutorial:Xtype_defined_(Chinese) Tutorial:扩展Ext中的�l��g extjs.com/learn/Manual:Component:Extending_Ext_Components(Chinese) Tutorial:扩展与插件之间的区别 extjs.com/learn/Manual:Component:Extension_or_Plugin_zh-CN Tutorial:Ext�l��g的复�? extjs.com/learn/Manual:Component:Extending_Ext_Components(Chinese) Tutorial:从源码生成Ext extjs.com/learn/Tutorial:Building_Ext_From_Source_(Chinese)

基础用法:

Tutorial:DomQuery基础 extjs.com/learn/Tutorial:DomQuery_Basics(Chinese) Tutorial:Ext中的事�g extjs.com/learn/Tutorial:Events_Explained_(Chinese) Tutorial:��q�模�? extjs.com/learn/Tutorial:Getting_Started_with_Templates_(Chinese) Tutorial:模板�Q�Templates�Q�的函数 extjs.com/learn/Tutorial:Utilizing_Format_Features_of_Templates_(Chinese) Manual:事�g的处�? extjs.com/learn/Manual:Intro:Event_Handling_cn Manual:Ext中的�l�承 extjs.com/learn/Manual:Intro:Inheritance_(Chinese) Manual:Ext的类设计 extjs.com/learn/Manual:Intro:Class_Design_cn Manual:Ajax通讯 extjs.com/learn/Manual:Core:Ext.Ajax_(Chinese) Manual:JSON处理�Ҏ�� extjs.com/learn/Manual:Core:Working_with_JSON_(Chinese) Manual:函数的原型扩�? extjs.com/learn/Manual:Utilities:Function_(Chinese)

�l��g的��?

Tutorial:Tab标签��? extjs.com/learn/Tutorial:TabPanel_Basics_(Chinese) Tutorial:Ext 1.x中的布局 extjs.com/learn/Tutorial:Using_Layouts_with_Ext_-_Part_1_(Chinese) Tutorial:Grid�l��g初学 extjs.com/learn/Tutorial:Beginning_Using_the_Grid_Component_(Chinese) Tutorial:Grid的数据分��? extjs.com/learn/Tutorial:Basics_of_Paging_With_the_Grid_Component_(Chinese) Tutorial:Ext菜单器�g extjs.com/learn/Tutorial:Ext_Menu_Widget_(Chinese) Tutorial:表单�l��g初学 extjs.com/learn/Tutorial:Getting_Started_with_Forms_(Chinese) Tutorial:表单�l��g初学(�? extjs.com/learn/Tutorial:Loading_Data_Into_and_Submitting_a_Form_(Chinese) Manual:Cookie的存�? extjs.com/learn/Manual:Core:State_(Chinese)

YUI-Ext(Ext前��n)的相��x��?/h2>
Tutorial:EXT新手��Q�徏立自��q��工具��（Toolkit�Q? extjs.com/learn/Tutorial:EXT新手�� Tutorial:如何用YUI��L��做JavaScript动画 extjs.com/learn/Tutorial:如何用YUI��L��做JavaScript动画 Tutorial:��L��三步�Q�搞掂内存泄�? extjs.com/learn/Tutorial:��L��三步�Q�搞掂内存泄�?/a> Tutorial:用YUI-EXT创徏Ajax Feed-viewer extjs.com/learn/Tutorial:用YUI-EXT创徏Ajax_Feed-viewer Tutorial:使用DomHelper 创徏元素的DOM、HTML片断和模�? extjs.com/learn/Tutorial:使用DomHelper 创徏元素的DOM、HTML片断和模�?/a> Tutorial:EXT设计模式初学�? extjs.com/learn/Tutorial:EXT设计模式初学�?/a> Tutorial:预览 �Q�增强版的拖攑֒�新增的TreePanel extjs.com/learn/Tutorial:预览_�Q�增强版的拖攑֒�新增的TreePanel Tutorial:创徏一个可复用的AJAX对话�?-一个完成好的例�? extjs.com/learn/Tutorial:创徏一个可复用的AJAX对话�?-一个完成好的例�?/a> Tutorial:创徏YUI的Grid extjs.com/learn/Tutorial:创徏YUI的Grid Tutorial:Grid 调用�q�程数据 extjs.com/learn/Tutorial:Grid 调用�q�程数据 Tutorial:为Yahoo! UI Extensions Grid增加内置的可�~�辑�? extjs.com/learn/Tutorial:为Yahoo! UI Extensions Grid增加内置的可�~�辑�?/a> Tutorial:Ext.MasterTemplates 入手 extjs.com/learn/Tutorial:Ext.MasterTemplates 入手 Tutorial:像了解爱��Z��样了解ExtJs extjs.com/learn/Tutorial:像了解爱��Z��样了解ExtJs Tutorial:JSON和浏览器安全 extjs.com/learn/Tutorial:JSON和浏览器安全 Tutorial:JavaScript的一�U�模�l�模�? extjs.com/learn/Tutorial:JavaScript的一�U�模�l�模�?/a> Tutorial:关于JavaScript�?貌似�c�（pseudo-classes�Q�－�Q�－�Q�不吐不�? extjs.com/learn/Tutorial:关于JavaScript�?貌似�c�（pseudo-classes�Q�－�Q�－�Q�不吐不�? Tutorial:Application Layout �E�式開發入門介紹 extjs.com/learn/Tutorial:Application Layout �E�式開發入門介紹 Tutorial:如何建立一個可以Disable/Editable的Editor gird extjs.com/learn/Tutorial:如何建立一個可以Disable/Editable的Editor gird

��菜毛毛 2009-05-15 15:06 发表评论

ExtJs制作菜单��D��

��菜毛毛 — Tue, 05 May 2009 07:00:00 GMT
     摘要: 本菜单的效果完整代码下蝲详细代码�Q? ...  阅读全文

��菜毛毛 2009-05-05 15:00 发表评论

��菜毛毛 — Tue, 05 May 2009 06:58:00 GMT

ExtJs实现�q�度条实�?很酷�Q�很��?.

ExtJs 的进度的实现�Q�您可以点这�?/a>下蝲本实例代码，

代码详解�Q?/strong>

var pbar1; //定义一个变量用于进度条对象
var btn1; //定义一个变量用于进按钮对象
Ext.onReady(function(){
pbar1=new Ext.ProgressBar({ //实例化进度条
renderTo:"div1", //�q�度条呈现的一个DIV
width:800, //�q�度条的宽度
text:"单击按钮开�?.." //在进度条里的初始文本
});
btn1=Ext.get("btn1"); //按钮对象
btn1.on("click",f1); //按钮事�g�Q�单��L��调用f1()函数
});
var i=0; //初始化一个变量�ؓ0�Q�下面会用到�?/span>
function f1(){
i++; //让i�?
pbar1.updateProgress(i/100.0); //让进度条更新到指定的�q�度。这个值是0-1之间的数�Q�我让i/100.0,以让它的�l�果是一个小�?/span>
pbar1.updateText("�q�度:"+i+"%"); //�q�度条显�C�的文本
if(i==100){ //当i==100的时候让按钮状态可以��用，�q�让i=1�Q�再让进度条停止
document.getElementById("btn1").disabled=false;
i=0;
clearInterval(x);
}
document.getElementById("btn1").disabled=true; //让按钮的状态�ؓ不可�?/span>
setTimeout("f1()",50);//用setTimeout函数递归调用f1()函数�Q�以辑ֈ��q�度条一直跑的效�?/span>
}
//*****************�q�度条实�?*********************//
var pbar2;//定义一个变量用于进度条对象
var btn2;//定义一个变量用于进按钮对象
Ext.onReady(function(){
pbar2 = new Ext.ProgressBar({ //实例化进度条
renderTo:"div2", //�q�度条呈现的一个DIV
width:600, //�q�度条的宽度
text:"单击按钮开�?.." //在进度条里的初始文本
});
btn2=Ext.get("btn2"); //按钮对象
btn2.on("click",function(){//按钮事�g�Q�单��L��执行funciton()
Runner.run(pbar2,btn2,10,function(){ //Runner是在下面定义。Runner.run�Ҏ��参数(�q�度条对象，按钮对象�Q�进度大��：可以自由讑֮��Q�进度条完成时执行的行数�Q�如果不做�Q何事情可以填null)
Ext.Msg.alert("Information","�q�度条已�l�加载完�?....."); //对话�?/span>
pbar2.reset(); //重置�q�度�?/span>
pbar2.updateText("单击按钮重新开�?.."); //更新�q�度条的文本
});
});
});
//�q�个函数是我从Ext官方下蝲的包里的examples里直接拷贝来的，我也懒得�ȝ��IӞ��貌似有点复杂
var Runner = function(){
var f = function(v, pbar, btn, count, cb){
return function(){
if(v > count){
btn.dom.disabled = false;
cb();
}else{
if(pbar.id=='pbar4'){
//give this one a different count style for fun
var i = v/count;
pbar.updateProgress(i, Math.round(100*i)+'% completed...');
}else{
pbar.updateProgress(v/count, 'Loading item ' + v + ' of '+count+'...');
}
}
};
};
return {
run : function(pbar, btn, count, cb){
btn.dom.disabled = true;
var ms = 5000/count;
for(var i = 1; i < (count+2); i++){
setTimeout(f(i, pbar, btn, count, cb), i*ms);
}
}
}
}();
//***********�q�度条实�?**************//
var pbar3;//定义一个变量用于进度条对象
var btn3;//定义一个变量用于进按钮对象
Ext.onReady(function(){
pbar3 = new Ext.ProgressBar({ //实例化进度条
renderTo:"div3", //�q�度条呈现的一个DIV
width:300, //�q�度条的宽度
text:"单击按钮开�?.." //在进度条里的初始文本
});
btn3=Ext.get("btn3"); //按钮对象
btn3.on("click",function(){ //按钮单击事�g
btn3.dom.disabled=true; //把按钮设�|��ؓ不可用状�?/span>
pbar3.updateText("正在更新..."); //更新�q�度条的文本信息
pbar3.wait({ //开始执行进度条
interval:100, //每次�q�度的时间间�?/span>
duration:5000, //�q�度条跑动的持箋旉��
increment:50, //�q�度条的增量�Q�这个��D��的越大，�q�度条跑的越慢，不能��于1�Q�如果小�?�Q�进度条会跑��?/span>
fn:function(){ //�q�度条完成时执行的函敎ͼ�也可设�ؓnulll
btn3.dom.disabled=false;//把按钮设�|��ؓ可用状�?/span>
pbar3.updateText("更新完成..单击按钮重新开�?..");//更新�q�度条的文本信息
}
});
});
});

��菜毛毛 2009-05-05 14:58 发表评论

Ext布局�cȝ��介绍与��?转黄灯桥的专�?

��菜毛毛 — Tue, 05 May 2009 06:54:00 GMT
     摘要: Ext布局�cȝ��介绍与��? 在WEB应用的开发中�Q�应用界面的布局设计是一��很重要的内宏V��在EXT中，可以通过BorderLayout与NestedLayoutPanel很方便的设计出各�U�的布局。本文章的主要内容主要是介绍如何通过BorderLayout、NestedLayoutPanel以及各种面板设计��面布局�? 1.    ...  阅读全文

��菜毛毛 2009-05-05 14:54 发表评论

ExtJs学习入门--之HELLOWORLD

��菜毛毛 — Tue, 05 May 2009 06:43:00 GMT

ExtJs学习入门
Posted on 2009-05-05 14:37 ��菜毛毛阅读(0) 评论(0) �~�辑收藏

ExtJs��?/span>�Q?span lang="EN-US">
ExtJS是一个用javascript写的�Q�主要用于创建前端用��L��面，使一个与后台技术无关的前端ajax框架。因此，
可以�?span lang="EN-US">ExtJs用在.Net Java �{�各�U�开发语�a�开发的应用中�?/p>

获得ExtJS�Q?span lang="EN-US">
ExtJs开源框架可以在官方�|�站上下载，�|�址�Q?span lang="EN-US">http//extjs.com/download
解压出来的文件有�Q?span lang="EN-US">
adapter: 负责��里面提供第三方底层�?span lang="EN-US">(包括Ext自带的底层库)映射�?span lang="EN-US">Ext所支持的底层库�?span lang="EN-US">
build: 压羃后的ext全部源码�Q�里面分�c�d��放）�?span lang="EN-US">
docs�Q?span lang="EN-US">extJS API�?span lang="EN-US">
exmaples:提供使用ExtJs技术做出的��事�?span lang="EN-US">.
resources:Ext UI资源文�g目录,�?span lang="EN-US">Css 囄��文�g都存攑֜��q�里�?span lang="EN-US">.
Ext-all-debug.js:无压�~�的Ext全部的源�?span lang="EN-US">(用于调式).
ext-core.js:压羃后的Ext的核心组�?span lang="EN-US">,包括sources/core下的所有类.
ext-core-debug.js:无压�~?span lang="EN-US">Ext的核心组�?span lang="EN-US">,包括source/core下的所有类.

�~�写ExtJs�E�序必备�?/span>:
ext-all.js |--核心文�g�Q�包含了ext的所有功�?/span>
adapter/ext/ext-base.js | --基础�?/span>
build/locale/ext-lang-zh_CN.js |中文��译
resources |包含css样式和图�?/span>

�W�一�?span lang="EN-US">HelloWorld�E�序
//在自己徏的工�E�里导入必须的包

	ContainerLayout 其它一切布局��理器的基类�Q�容器若不指定某个布局��理器，则默认的��理器就是这个ContainerLayout。ContainerLayout没有��M��的外观表�C��?其主要的职责是容�U�_��目、控制渲染和一些常见�Q务，如调节大��缓�Ԍ��resize buffering�Q��?ContainerLayout常用于扩展制定的布局�Q�很��实例化直接使用。详�l�在API 参�?/a>.		CardLayout CardLayout��容器中的每个组件当作一个卡片来处理。在某一旉��Q�只有一个卡片是可见的，容器象一个卡片堆栈一样工作。大多数的情况，用于向导�Q�Wizards�Q�，制定的tab实现或其它多��面信息的场合。参�?a class="external text" title="http://extjs.com/deploy/dev/docs/?class=Ext.layout.CardLayout" rel="nofollow">API 参�?/a>�?/p>
	AbsoluteLayout �q�是一个非常简单的布局�Q�通过X/Y坐标�_��来定位包含各��的相关容器。参�?a class="external text" title="http://extjs.com/deploy/dev/docs/?class=Ext.layout.AbsoluteLayout" rel="nofollow">API 参�?/a>.		ColumnLayout 适用于多个列�q�排�l�构的布局风格�Q�每个列的宽度须由像素值或癑ֈ�比指定，但高度自适应于内容的高度。详�l�在API参�?/a>.
	AccordionLayout AccordionLayout包含了一�l�像卡片垂直方向堆栈的面板，同通过展开或收�~�来昄��内容。在某一旉��Q�只有一个卡片是可见的。详�l�在API参�?/a>�?/p>		FitLayout �q�是一个简单的布局�Q�主要是创徏一个适应容器大小的布局区域。如没有特定的布局要求�q�是容器最好的默认布局。详�l�在API参�?/a>.
	AnchorLayout �q�是��Z��些固定元素相对于容器四条边的布局。元素可通过与边�~�的癑ֈ�比或便宜一个值来定位�Q��ƈ支持相当于物理容器有不同��寸�?#8220;虚拟层画布（virtual layout canvas�Q?#8221;�?详细�?a class="external text" title="http://extjs.com/deploy/dev/docs/?class=Ext.layout.AnchorLayout" rel="nofollow">API文档�?/p>		FormLayout FormLayout是�ؓ创徏一张要提交数据条目的表单而设计的布局风格。注意，一般来�Ԍ��?a class="external text" title="http://extjs.com/deploy/dev/docs/?class=Ext.form.FormPanel" rel="nofollow">FormPanel�怼��Q�此布局�c�都有表单提交的自动处理�Q�但你会更們֐�使用前者�?FormPanels必须指定layout:'form'�Q�只能一定是�q�样�Q?所以表单额外需要一个布局��其嵌套�?参阅API文档�?/p>
	BorderLayout �?.x的BorderLayout的布局完全一致。布局区域支持嵌套�Q?滑动条面板和可关闭、微调的分隔区域。对于一些典型业务程序的UI��ؓ适用。详�l?a class="external text" title="http://extjs.com/deploy/dev/docs/?class=Ext.layout.BorderLayout" rel="nofollow">API文档�?/p>		TableLayout 主要目的是通过一个表格的形式划分区域。实际上也是生成一个table的HTML makeup 详细�?a class="external text" title="http://extjs.com/deploy/dev/docs/?class=Ext.layout.TableLayout" rel="nofollow">API参�?/a>�?/p>

久久青草伊人,亚洲区在线播放,国产999精品久久

EXT ��目例子

《轻松搞定Extjs》顺利发�?(�?

Javascript的调试利器：Firebug使用详解

Tutorial:Javascript中的作用域（scope�Q�是什�?(一)(试用FIREBUG了解)

Personal tools

Views

Tutorial:What is that Scope all about (Chinese)

From Learn About the Ext JavaScript Library

Contents

事前准备

定义

window对象

变量的可见度

��L��地进入Ext的世�?-firefox debug

Tutorial:Playing With Ext The Easy Way (Chinese)

From Learn About the Ext JavaScript Library

Contents

�y�跚学步

�W�一�?- 入门

�W�二�?- ��h��

牛刀���试

补充说明

�l��g模型 Component Model

�l��g概述

�l��g的生存周期Component Life Cycle

初始化Initialization

渲染�q�程 Rendering

销毁过�E?Destruction

�l��g的X�c�d�� XTypes

BoxComponent

容器模型Container Model

容器 Container

面板 Panel

Window

视见区Viewport

布局 Layouts

引言

布局���理�?Layout Managers

ContainerLayout

CardLayout

AbsoluteLayout

ColumnLayout

AccordionLayout

FitLayout

AnchorLayout

FormLayout

BorderLayout

TableLayout

Grid

概述

XTemplate

DataView

动作 Action

CycleButton

Hidden (field)

�q�度�?ProgressBar

TimeField

Firefox使用Firebug中debug

�q�期的ext��目�ȝ��(�?

Tutorial:EXT����?1

Tutorial:Introduction to Ext 2.0 (Chinese)

From Learn About the Ext JavaScript Library

下蝲Ext

开始！

响应事�g

使用Widgets

MessageBox

Grid

�q�有更多�?.

使用Ajax

Plain PHP

CakePHP

Django

Perl

ASP.Net

ColdFusion

JSP

EXT新手 �����建立自己的工��L��

Ext官方中文教程列表

牛刀��试

布局��理�?Layout Managers

Tutorial:EXT��?1

EXT新手 ��建立自己的工��L��

�l��g的��?

Ext布局�cȝ��介绍与��?转黄灯桥的专�?