亚洲国产精品一区二区第四页,亚洲天堂一区在线,亚洲国产乱码最新视频

EXT手册�Q�Manual:Core:Working with JSON (Chinese) (�?

菠萝 — Mon, 12 Nov 2007 14:20:00 GMT

有一�D�JavaScript如下�Q?/p>

代码

var obj = {
prop1: "a0~`!@#$%^&*()-_+={}[]|\\:;\"',.?/",
prop2: ['x','y'],
prop3: {
nestedProp1: 'abc',
nestedProp2: 456
}
}

本文��会讨论如何把一个对象�{换�ؓJSON�q�将其发送到服务器�?
�R�輯使用Ext.urlEncode�q�行URL�~�码

首先我们看看Ext.urlEncode �q�个�Ҏ(gu��)��Q�相对应的是Ext.urlDecode解码�Ҏ(gu��)��Q��?Ext.urlEncode()不能用来处理JSON�Q�Ext.urlEncode()只是负责在HTTP�q�行GET、POST��h��Ӟ��某�?#8220;普通的” 对象转换成名�U?��|��name/value�Q�的状态。我�q�里�?#8220;普�?#8221;的意思是urlEncode只是��第一层属性编码，———数�l�自然没有问题但内嵌的对象就不行了�?举例�Q?

代码

Ext.urlEncode(obj) == "prop1=a0~%60!%40%23%24%25%5E%26*()-_%2B%3D%7B%7D%5B%5D%7C%5C%3A%3B%22'%2C.%3F%2F&prop2=x&prop2=y"

* 注意属�?被忽略了
* 注意�Ҏ(gu��)��字符都被�~�码了（使用JS自��n的encodeURIComponent()�Q?

如果你只是想�U��a地发送一些的��h��Q�可把参数写成JavaScript原生对象的�Ş式，然后用这个方法编码urlEncode发送，———这是较方便的做法�?/p>

例如�Q�你可以在一个GET��h��的URL后面加上一�D�|��本字�W�：

* ��h��是这��L(f��ng)��:

代码

http://myurl.com?prop1=a0~%60!%40%23%24%25%5E%26*()-_%2B%3D%7B%7D%5B%5D%7C%5C%3A%3B%22'%2C.%3F%2F&prop2=x&prop2=y

* 服务器会透过URIComponent解码成�ؓ�Q?

代码

prop1 a0~`!@#$%^&*()-_+={}[]|\:;"',.?/
prop2 x
prop2 y

你也可以同POST��h��发送这��L(f��ng)��内容�Q?/p>

* ��h��是这��L(f��ng)��:

代码

http://myurl.com

* POST内容�Q?

代码

prop1=a0~%60!%40%23%24%25%5E%26*()-_%2B%3D%7B%7D%5B%5D%7C%5C%3A%3B%22'%2C.%3F%2F&prop2=x&prop2=y

* 服务器得到的�l�果是和GET��h��的内�Ҏ(gu��)��异的�?

�q�一切还��利�Q�但说到要发送和接受JSON�Q�该怎么办呢�Q�接下来再看�Q?
�R�輯使用Ext.encode�~�码JSON

Ext.encode() �Q�其对应的解码方法�ؓExt.decode�Q��{换一个复制的对象��Z��D�JSON字符举例�Q?/p>

代码

Ext.encode(obj) == '{"prop1":"a0~`!@#$%^&*()-_+={}[]|\\:;\"\',.?/","prop2":["x","y"],"prop3":{"nestedProp1":"abc","nestedProp2":456}}'

* 注意内嵌对象的属性现在被包含�q�去�?

刚才是我们�{换一个简单的对象到名�U?��|��name/value�Q�的状态，现在的情况将有所不同�Q�此时的对象已经被�{换到�Q�序列化�Q�一�D�参数。具体的作用是，以名�U?��|��name/value�Q�的形式�Q�发送到服务器解析。如果只是发送一个JSON字符�Ԍ��可认��个就是json参数�?/p>

要将JSON转换成�ؓ可GET/POST适合发送的名称/��|��name/value�Q�状态，你可以额外地��其�~�码�Q?

代码

encodeURIComponent(Ext.encode(obj)) == "%7B%22prop1%22%3A%22a0~%60!%40%23%24%25%5E%26*()-_%2B%3D%7B%7D%5B%5D%7C%5C%5C%3A%3B%5C%22'%2C.%3F%2F%22%2C%22prop2%22%3A%5B%22x%22%2C%22y%22%5D%2C%22prop3%22%3A%7B%22nestedProp1%22%3A%22abc%22%2C%22nestedProp2%22%3A456%7D%7D"

创徏一个GET的请求如下：

代码

"http://url.com?json=" + encodeURIComponent(Ext.encode(obj))

或是POST��h��也行�Q?

代码

"json=" + encodeURIComponent(Ext.encode(obj))

urlEncode()�Ҏ(gu��)��也是可以�Q?

代码

Ext.urlEncode({ json: Ext.encode(obj)}) == "json=%7B%22prop1%22%3A%22a0~%60!%40%23%24%25%5E%26*()-_%2B%3D%7B%7D%5B%5D%7C%5C%5C%3A%3B%5C%22'%2C.%3F%2F%22%2C%22prop2%22%3A%5B%22x%22%2C%22y%22%5D%2C%22prop3%22%3A%7B%22nestedProp1%22%3A%22abc%22%2C%22nestedProp2%22%3A456%7D%7D"

�q�样便可以通过GET/POST发送。至于另一边的服务端，会透过URIComponent解码�q�段参数�Q?

代码

{"prop1":"a0~`!@#$%^&*()-_+={}[]|\\:;\"',.?/","prop2":["x","y"],"prop3":{"nestedProp1":"abc","nestedProp2":456}}

来访问JSON已解码的数据�?
�R�輯使用Ext.Ajax.request发送JSON

在EXT 1.1,你可以轻村֜�使用Ext.Ajax.request()�Ҏ(gu��)��来创��Z��个典型AJAX的请求。该�Ҏ(gu��)��允许传入一个配�|�项的对象，��x��可包含其它类型的内容�Q�作��求的参数的用途，下面引用API的介�l�：

�Q�原文）params {Object/String/Function} (Optional) An object containing properties which are used as parameters to the request, a url encoded string or a function to call to get either.

�Q�中文）params {Object/String/Function} (可选项) 包含��h��参数的对象，以对象的属性�Ş式出玎ͼ�一�D�可url�~�码的字�W�串�Q�或者是可返回以上两者的函数�?/p>

对于传入的是object�c�d��Q?Ext.Ajax.request会调用Ext.urlEncode()��其转换为名�U?��|��name/value�Q�的状态（通常情况忽略内嵌的对象）�?/p>

代码

var req = Ext.Ajax.request({
url: "/ws/search.pl",
params: obj,
method: 'GET',
disableCaching: false
})

��h��是这��L(f��ng)��Q?/p>

代码

/ws/search.pl?prop1=a0~%60!%40%23%24%25%5E%26*()-_%2B%3D%7B%7D%5B%5D%7C%5C%3A%3B%22'%2C.%3F%2F&prop2=x&prop2=y

服务端解析�ؓ�Q?

代码

prop1 a0~`!@#$%^&*()-_+={}[]|\:;"',.?/
prop2 x
prop2 y

* 如不��止disableCaching�Q�Ext会加上唯一的_dc参数以消除缓册Ӏ?
* 每次送出的数据都是经�q�Ext.urlEncode()�Q�很明显是没有发送完整的JSON,只是一�q�串的名�U?��|��name/value�Q�的状态�?

如果使用POST的方法，�q�程也是相同�Q�区别是名称/��|��name/value�Q�的状态是攑֜�POST BOBY内发送�?/p>

要把JSON发送到服务器，我们需要��用Ext.encode()�Ҏ(gu��)��转换数据对象到文本格式的JSON�?Ext.Ajax.request()允许传入一�D�可URL�~�码的字�W�串�Q�所以你既可以用 encodeURIComponent()�~�码参数�Q�亦可直接是一个简单的对象�Q�让Ext.Ajax.request()��Z��~�码�Q?/p>

代码

var req = Ext.Ajax.request({
url: "/ws/search.pl",
params: {json: Ext.encode(obj)},
disableCaching: false
})

相类似地�Q�服务端会解析�ؓ�Q?/p>

代码

{"prop1":"a0~`!@#$%^&*()-_+={}[]|\\:;\"',.?/","prop2":["x","y"],"prop3":{"nestedProp1":"abc","nestedProp2":456}}

�q�样我们便可以访问JSON已解码的数据了�?/p>

菠萝 2007-11-12 22:20 发表评论

中文化问�?�?

菠萝 — Mon, 12 Nov 2007 14:16:00 GMT

�q�两个问题，解答如下�Q?/p>

1、中文化问题�Q�在 ext-all.js 后面�Q�挂�?ext-lang-zh_CN.js 卛_��Q�如�Q?

代码

<script type="text/javascript" src="<%=contextPath%>/public/js/ext-base.js">script>
<script type="text/javascript" src="<%=contextPath%>/public/js/ext-all.js">script>
<script type="text/javascript" src="<%=contextPath%>/public/js/ext-lang-zh_CN.js">script>

�Q?/p>

菠萝 2007-11-12 22:16 发表评论

菠萝 — Wed, 17 Oct 2007 13:34:00 GMT

摘要: 文��载入�l�束初始化dom Ext.onReady(function(){ //初始化以及应用代�?}); 弹出警告对话�?Ext.MessageBox.alert("Warning", "This example is not done and results may vary."); 表单

菠萝 — Wed, 17 Oct 2007 13:28:00 GMT

摘要: 在WEB应用的开发中�Q�应用界面的布局设计是一��很重要的内宏V��在EXT中，可以通过BorderLayout与NestedLayoutPanel很方便的设计出各�U�的布局。本文章的主要内容主要是介绍如何通过BorderLayout、NestedLayoutPanel以及各种面板设计��面布局�? 1. &n... 阅读全文

菠萝 2007-10-17 21:28 发表评论

一个用ext做的��d��面

菠萝 — Tue, 16 Oct 2007 04:37:00 GMT

最�q�在��x��ext�Q�感觉ext比dodjo的前景好�Q�在�|�上扑ֈ�一个用ext做的��d��?http://ondemand.aicproperties.com/

参照�q�个可以修改��己想要的��d��面�Q�我��是参照�q�个��面�Q�修改了�pȝ��的登录界�?/p>

菠萝 2007-10-16 12:37 发表评论

菠萝 — Tue, 07 Aug 2007 12:24:00 GMT

无论你是Ext库的新手�Q�抑或是想了解Ext的�h�Q�本��文章的内容都适合你。本文将��单地介绍Ext的几个基本概念，和如何快速地做出一个动态的��面�q�运行�v来，假设读者已具备了一些JavaScript�l�验和初�U�了解HTML Dom。否则的话，请从阅读初学JavaScript资源开始�?

下蝲Ext

如果你未曾下载过�Q�那应从�q�里下蝲最新版本的Ext http://extjs.com/downloads�?/p>

针对你的下蝲需求，有几个不同的�Ҏ(gu��)��选项。通常圎ͼ�最�E�_��的版本，是较多�h的选择。下载解包后�Q�那个example文�g夹便是一个探索Ext的好地方�Q?/p>

开始！

我们��用Ext�Q�来完成一些JavaScript��d��?/p>

�W�一步要做的是，下蝲本教�E�的�C�Z��文�g。Zip文�g包括三个文�g�Q?strong>ExtStart.html, ExtStart.js�?strong>ExtStart.css。解包这三个文�g到Ext的安装目录中�Q�例如，Ext是在“C:\code\Ext\v1.0”中，那应该在"v1.0"里面新徏目录“tutorial”。双�?strong>ExtStart.htm�Q�接着你的��览器打开启动��面�Q�应该会有一条消息告诉你配置已完毕。如果是一个Javascript错误�Q�请按照��面上的指引操作�?/p>

在你常用的IDE中或文本�~�辑器中�Q�打开ExtStart.js看看�Q?/p>

Ext.onReady可能是你接触的第一个方法。这个方法是指当前DOM加蝲完毕后，保证��面内的所有元素能被Script引用�Q�reference�Q�。你可删除alert()那行�Q�加入一些实际用途的代码试试�Q?/p>

Ext.onReady(function() {
alert("Congratulations!  You have Ext configured correctly!");
});

Element�Q�Ext的核�?/h2>

大多数的JavaScript操作都需要获取页面上的某个元素（reference�Q?好让你来做有��的事情。传�l�的JavaScript�Ҏ(gu��)��Q�是通过ID获取Dom节点的：

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

�q�毫无问题，不过�q�样单单�q�回一个对象（DOM节点�Q�，用�v来�ƈ不是太强大和好用。�ؓ了要用那节点�q�点事情�Q�你��会要写不少自定义的代码�Q�另外，对于不同�c�d��览器之间的差异�Q�要你处理�v来可真头大了�?/p>

�q�入Ext.element对象。元素（element�Q�的的确��是Ext的心脏地带，--无论是访问元素（elements�Q�还是完成一些动作，都要涉及它。Element的API是整个Ext库的基础�Q�如果你旉��不多�Q�只想了解Ext中的一个类的话�Q�Element一定是首选！

由ID获取一个Ext Element如下�Q�首��ExtStart.htm包含一个div�Q�ID名字�?#8220;myDiv”�Q�然后，在ExtStart.js中加入下列语句）�Q?/p>

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

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

Element包含了常见的DOM�Ҏ(gu��)��和属性，提供一个快��L(f��ng)��、统一的、跨��览器的接口�Q�若使用Element.dom的话�Q�就可以直接讉K��底层DOM的节炏V��）�Q?
Element.get()�Ҏ(gu��)��内置�~�存处理�Q�Cache)�Q�多�ơ访问同一对象效率上有极大优势�Q?
内置常用的DOM节点的动作，�q�且是跨��览器的定位的位�|�、大��、动甅R��拖攄��{�（add/remove CSS classes, add/remove event handlers, positioning, sizing, animation, drag/drop�Q��?

�q�意味着你可用最��的代码来做各种各样的事情，�q�里仅仅是一个简单的例子�Q�完整的列表�?a target=_blank>ElementAPI中）�?/p>

�l�箋在ExtStart.js中，在刚才我们获取好myDiv的位�|�中加入�Q?/p>

myDiv.highlight();      //黄色高亮昄���然后渐退
myDiv.addClass('red');  // ��d��自定义CSS�c?(在ExtStart.css定义)
myDiv.center();         //在视图中���元素居�?
myDiv.setOpacity(.25);  // 使元素半透明

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

通常情况下，不能由ID获取多个DOM的节点，有可能因为没讄��ID,或者你不知道ID,又或者直接用ID方式引用有太多元素了。这�U�情况下�Q�你会不用ID来作��取元素的依据�Q�可能会用属性（attribute�Q�或CSS Classname代替。基于以上的原因�Q�Ext引入了一个功能异常强大的Dom Selector库，叫做DomQuery�?/p>

DomQuery可作为单独的库��用，但常用于Ext�Q�你可以在上下文环境中（Context�Q�获取多个元素，然后通过Element接口调用。幸�q�的是，Element对象本��n便有Element.selcect的方法来实现查询�Q�即内部调用DomQuery选取元素。这个简单的例子中，ExtStart.htm包含若干�D�落�Q?/p>

标签�Q�，没有一个是有ID的，而你惌��村֜�通过一�ơ操作马上获取每一�D�，全体执行它们的动作，可以�q�样做：

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

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

响应事�g

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

Ext.onReady(function() {
Ext.get('myButton').on('click', function(){
alert("You clicked the button");
});
});

加蝲好页面，代码依然会执行，不过区别是，包含alert()的function是已定义好的�Q�但它不会立卛_��被执行，是分配到按钮的单��M��件中。用��显的文字解释，��是�Q�获取ID�?myDottom'元素的引用，监听��M��发生元素被单�ȝ��情况�Q��ƈ分配一个function,以准备�Q何单��d��素的情况�?/p>

正�\来说�Q�Element.select也能做同��L(f��ng)��事情�Q�即作用在获取一�l�元素上。下一例中�Q�演�C�Z��面中的某一�D�落被单��d��Q�便有弹出窗口：

Ext.onReady(function() {
Ext.select('p').on('click', function() {
alert("You clicked a paragraph");
});
});

�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("You clicked a paragraph");
}
Ext.select('p').on('click', paragraphClicked);
});

到目前�ؓ止，我们已经知道如何执行某个动作。但当事件触发时�Q�我们如何得知这个event handler执行时是作用在哪一个特定的元素上呢�Q�要明确�q�一炚w��常简单，Element.on�Ҏ(gu��)��传入到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);
});

注意指定的是DOM节点�Q�所以我们首先将其恢复成为适当的元素，然后执行�Ʋ完成的事�g�Q�这个例子中�Q�我们看见段落是高亮昄��的�?

菠萝 2007-08-07 20:24 发表评论

学习EXT�W�三�?EXT:Menu�l��g

菠萝 — Tue, 07 Aug 2007 12:22:00 GMT

概述: 讲讲如何使用Ext菜单器�g

�q�篇教程中，我们��学习��用Ext的菜单器�Ӟ��Menu Widgets)。假设读者已�l�阅读过Ext��介一文，�q�懂得一些Ext的基本相关知识。菜单器件是Ext库中较迟实现的器件。它由几个类联合构成�Q��得创��Z��个菜单只需若干代码块（Block of code�Q��?/p>

开始！

�W�一步要做的是，下蝲本教�E�的�C�Z��文�g。Zip文�g包括三个文�g�Q?strong>ExtMenu.html,�?strong>ExtMenu.js�?strong>ExtMenu.css�?/strong>�?strong>list-items.gif。解包这四个文�g到Ext的安装目录中�Q�例如，Ext是在“C:\code\Ext\v1.0”中，那应该在"v1.0"里面新徏目录“menututorial”。双�?strong>ExtMenu.htm�Q�接着你的��览器打开启动��面�Q�应该会有一条消息告诉你配置已完毕。如果是一个Javascript错误�Q�请按照��面上的指引操作�?/p>

在你常用的IDE中或文本�~�辑器中�Q�打开ExtMenu.js看看�Q?/p>

Ext.onReady(function() {
alert("You have Ext configured correctly! We are now ready to do some Ext Menu Magic!");
});

在Ext的介�l�中�Q�我们讨��使用Ext的原因和Ext.onReady()函数的功能�?/p>

创徏��易的菜单

先看看怎么做一个基本的菜单�Q�然后再讨论代码中的各个�l��g和知识点。加入下列代码到onReady函数�?

var menu = new Ext.menu.Menu({
id: 'basicMenu',
items: [{
text: 'An item',
handler: clickHandler
},
new Ext.menu.Item({
text: 'Another item',
handler: clickHandler
}),
'-',
new Ext.menu.CheckItem({
text: 'A check item',
checkHandler: checkHandler
}),
new Ext.menu.CheckItem({
text: 'Another check item',
checkHandler: checkHandler
})
]
});
var tb = new Ext.Toolbar('toolbar', [{
text:'Our first Menu',
menu: menu  // 分配menu到按�?
}
]);
function clickHandler() {
alert('Clicked on a menu item');
}
function checkHandler() {
alert('Checked a menu item');
}

OK 仔细看看�q�里的代码，首先实例化一个Menu�c�Mؓ变量“menu”。然后Menu的构建函数接受一串的Object Literal作�ؓ参数�Q�在先前的Ext教程中我们已�l�讨对ObjectLiteral�q�行了解。当前的ObjectLiteral��包含了我们菜单中想要的属性。第一个属性是我们分配的ID�Q�稍后我们可用ID来获取Menu的引用�?

各种Item的类�?/h2>

属�?#8220;items”可能是最重要的属性当中的一个。留意一下语法其实我们是��一个数�l�作为��|��value)传到属性中厅R��数�l�里的数据就是我们想要在菜单中出现的每一��V��每本例中我们放了六个菜单项�Q�但何解每项的语法（Syntax�Q�都不尽相同呢？�W�一��Ҏ(gu��)��一串Object Literal�Q�包含一�l�我们可配置的name/value。Ext的底层库会�ؓ�q�串Object Literal按其配置默认地创建item对象。接着�W�二��Ҏ(gu��)��Item对象本��n�Q�后面跟着分隔�W�，最后两个是单选框��V��整个过�E�演�C�Z��Ext Widget如何动态的�q�行。下例各��可填入到数�l�中�Q?/p>

{text: 'Foo'}                       // Ext 转换�q�个配置对象到menu item
'Straight Text'                     //文本或原始html (�U�文�?
'-'                                 // 创徏分隔�W?
new Ext.menu.Item({text: 'Foo'})    // 创徏一个标准item (同{text: 'Foo'})
new Ext.menu.CheckItem()            // 创徏单选框item
new Ext.menu.DateItem()             // 创徏menu内置的日历控�?
new Ext.menu.ColorItem()            //创徏一个颜色采集器
new Ext.menu.BaseItem(document.getElementById('my-div')) //允许你加入�Q何元�?

Item属�?/h2>

Item接受什么类型的属性呢�Q�本例中我们使用了这两属性：

text: 'An item',
handler: clickHandler

�W�一个是Item的文本。第二个是当用户单击一单击Item所触发的事件处理函敎ͼ�event handler function�Q�。本例中我们��函数clickHandler()和checkHandler()定义在代码的最后。作为演�C�用途，�q�仅仅是用alert()通知你有一个单�ȝ��消息�?br>其它有用的属性是�Q?/p>

cls: 'a-class-name'  ,       // 为标准Item手动讄���样式和图标ICON
icon: 'url',                 // 如不想用CSS,可直接设�|�图标的URL
group: 'name of group',      //只适用多选项�Q�保证只有一��被选中

完整的item属性列表在Menu Item文档中�?/p>

在UI中摆放菜�?/h2>

So,创徏好的Menu对象已经有两个基本的item了，然而我们怎么把它们摆攑ֈ��面中呢?在UI中一个menu可以分配到多个位�|�（同一个对象，不同位置多次使用�Q�，�q�正是Ext如此强大的原因：每一个器�Ӟ��widget�Q�切�?#8220;一块一�?#8221;的类�Q�来构徏整个面向对象的动态结构（Structure�Q�。这意味着menu可用于不同的场合。我们可��menu攑ֈ�有按钮的toolbar中，或用��面中的一个按钮来展开menu�Q�甚臛_��在Ext的其它器件中�Q�widgets�Q��用menu作�ؓ上下文菜单（Context Menu�Q��?/p>

本例中分配一个menu到toolbar中：

var tb = new Ext.Toolbar('toolbar', [{
text:'Our first Menu',
menu: menu  // 分配menu到toolbar
}
]);

Ext.Toolbar构徏函数接受两个参数�Q�第一个是指定toolbar的容器（contrainer�Q�；�W�二个参数是包含全部按钮的数�l�。这�?我们只��用一个按�?正如所见，按钮实质上是一串由数组�l�成的Object Literal,同时�q�个Object Litetal亦包含了不同的属性。下面是一�l�按钮对象的Object Litetal属性：

cls: 'a-class-name'  ,      //手动讄���样式和图标ICON
icon: 'url',                // 如不想用CSS,可直接设�|�图标的URL
text:'Our first Menu',      // 按钮提示之文�?
menu: menu                  // 可以是menu之id或配�|�对�?

Menu的分配方式：

刚才谈到如何分配Menu到工��h��中（toolbar�Q�，�l�而亦讨论menu分配的不同方式，看看有关的细节是怎样的。So,因�ؓmenu属性可以以不同方式地分配，��x��可以赋予一个menu对象�Q�或是已�l�徏好的menuID�Q�或直接是一个menu config对象。你应该有机会就��试一下以多种方式创徏menu�Q�因为类似的方式�Ҏ(gu��)��在Ext的Widgets随处可见。下面的代码演示了如何用不同的方法来做出跟范例一��L(f��ng)��效果�Q�唯一相同的就是menu对象的config。菜单中包括两个子菜单、一个DataItem容器、一个ColorItem容器。另外注意event handing函数需两个参数来获取事件更多的信息和知道哪个item被单��M��。可以的话，把下面的代码也加入到onReady函数中，亲��n体验一下：

var dateMenu = new Ext.menu.DateMenu({
handler : function(datepicker, date){
alert('Date Selected', 'You chose: '+ date.format('M j, Y'));
}
});
var colorMenu = new Ext.menu.Menu({
id: 'colorMenu', // the menu's id we use later to assign as submenu
items: [
new Ext.menu.ColorItem({
selectHandler: function(colorpicker, color){
alert('Color Selected', 'You chose: ' + color);
}
})
]
});
var tb = new Ext.Toolbar('toolbar', [{
text:'Our first Menu',
menu: {
id: 'basicMenu',
items: [{
text: 'An item',
handler: clickHandler
}, {
text: 'Another item',
handler: clickHandler
},
'-',
new Ext.menu.CheckItem({
text: 'A check item',
checkHandler: checkHandler
}),
new Ext.menu.CheckItem({
text: 'Another check item',
checkHandler: checkHandler
}),
'-', {
text: 'DateMenu as submenu',
menu: dateMenu, // assign the dateMenu we created above by variable reference,
handler: date
}, {
text: 'Submenu with ColorItem',
menu: 'colorMenu'    // we assign the submenu containing a ColorItem using it's id
}
]
}
}
]);
function clickHandler(item, e) {
alert('Clicked on the menu item: ' + item.text);
}
function checkHandler(item, e) {
alert('Checked the item: ' + item.text);
}

注意�Q?/strong>留意几种不同的方法加入子菜单�Q�还有even handing函数和Coloritem、DataMenu匿名函数之间的区别�?/p>

�l�一�l?/h2>
Ok我们用上�q�的�Ҏ(gu��)��Q�创��Z��toolbar和menu�Q�看��h��应该是这��L(f��ng)��Q?/p>
上文提及menu可摆攑֜�UI的�Q何位�|�，�q�里��ؓ你演�C�menu如何与Toolbars、MeneuButtons、Context Menus's配合工作�Q�包括一些有用的�Ҏ(gu��)��和动态添加的功能�?/p> MenuButton
new Ext.MenuButton('menubutton', {text:'Menu Button 1', menu: dateMenu});

动态添加菜单按钮到Toolbar

�q�条Toolbar有两个按钮。一个分隔符�Q�和一个纯图标的按钮（附Quicktips�Q�。你可尝试这样做�Q�把zip文�g�?gif加入

Ext.QuickTips.init(); tb.add('-', { icon: 'list-items.gif', //图标可单行显�C? cls: 'x-btn-icon', // �U�图�? tooltip: 'Quick Tips
提示文字' });

更方便的�?/h2>
一些代码片�D�，有助你提高效率，留意注释�Q?

// Menus更多的API内容 // 动�?增、减元素 menu.addSeparator(); //动态加入分隔符 var item = menu.add({ text: 'Dynamically added Item' }); // items 完整支持Observable API item.on('click', onItemClick); // items can easily be looked up menu.add({ text: 'Disabled Item', id: 'disableMe' // <-- 讄��ID便于查找lookup // disabled: true <-- 先不disabled 而采用下面的方式 }); // �?id �?index讉K�� menu.items.get('disableMe').disable();

下一步是

现在你已�l�了解菜单组件是如何工作了。下面的资源有助�(zh��n)�进一步更深入学习菜单�Q?/p>

菠萝 2007-08-07 20:22 发表评论

学习EXT�W�二�?EXT��介（二）

菠萝 — Tue, 07 Aug 2007 12:22:00 GMT

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

Gird是Ext中�h们最惛_��睹�ؓ快的Widgets之一�Q�也是最��行之一。好�Q�让我们看看怎么��L��地创��Z��个Gird�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 ds = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(myData), reader: new Ext.data.ArrayReader({id: 0}, [ {name: 'company'}, {name: 'price', type: 'float'}, {name: 'change', type: 'float'}, {name: 'pctChange', type: 'float'}, {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'} ]) }); ds.load(); var colModel = new Ext.grid.ColumnModel([ {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'} ]); var grid = new Ext.grid.Grid('grid-example', {ds: ds, cm: colModel}); grid.render(); grid.getSelectionModel().selectFirstRow(); });

�q�看上去很复杂，但实际上加�v来，只有七行代码。第一行创建数�l��ƈ作�ؓ数据源。实际案例中�Q�你很可能从数据库、或者WebService那里得到动态的数据。接着�Q�我们创建�ƈ加蝲data store�Q?data store��会告诉Ext的底层库接手处理和格式化�q�些数据。接着�Q�我们定义一个column模型�Q�用来轻村֜�调配Gird的每一列参数。最后我们生成这个Gird,传入data store和column模型两个对象�Q�进行渲染�ƈ选好�W�一行。不是太困难吧？如果一切顺利，搞掂之后你会看到像这��L(f��ng)��Q?

当然�Q�你可能对这�D�代码的某些�l�节�Q��ƈ不完全掌握其中的含义�Q�像MemoryProxy�I�竟是什么？�Q�但先不要紧�Q�这个例子的目的是告诉你�Q�用��量的代码，创徏一个富界面的多功能的UI�l��g而已——这是完全可能的�Q�更多细节的内容�Q�留�l�读者你自己学习吧。这儿有许多学习Grid的资源�?a target=_blank>Ext Grid教程�?a target=_blank>交叉Gird演示�?a target=_blank>Gird API文��?

�q�有更多�?.

�q�只是冰�׃��角。还有一打的UI Widgets可以供调用，�?layouts, tabs, menus, toolbars, dialogs, tree view�{�等。请参阅API文��?a >范例演示�?

使用Ajax

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

Name:

接着�Q�我们加入这些处理交换数据的JavaScript代码到文件ExtStart.js�?用下面的代码覆盖)�Q?/p>
Ext.onReady(function(){ Ext.get('oKButton').on('click', function(){ var msg = Ext.get("msg"); msg.load({ url: [server url], //换成你的URL params: "name=" + Ext.get('name').dom.value, text: "Updating..." }); msg.show(); }); });

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

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

Cold Fusion

From Server: #url.name#

最后一个关于Ajax的谜题就是，服务器实际处理请求和�q�回�Q�Resposne�Q�的具体�q�程。这个过�E�会是一个服务端��面�Q�一个Servlet�Q�一个Http处理器，一个WebService,甚至是Perl或CGI脚本�Q�即��M��一个服务器都可以处理http��h��。无法预料的是，服务器返回什么是服务器的事情�Q�无法给一个标准的例子来覆盖所有的可能性�?�q�段代码输出刚才我们传入'name'的那个值到客户端，卛_��送什么，�q�回什么）�?/p>
使用Ajax的真正挑战，是需�l�过适当处理�q�的手工代码�Q��ƈ相应格式化�ؓ服务端可用接受的数据�l�构。有几种格式供�h们选择�Q�最常用为JSON/XML)。正因Ext是一�U�与服务器中立的语言�Q��得其它特定语�a�的库亦可用于Ext处理Ajax服务。只要页面接受到�l�果是合适的数据格式�Q�Ext�l�不会过问服务器的事情！要全面讨��个问题，已超出本文的范围。推荐正在��用Ajax的�?zh��n)��Q�深入阅�?a target=_blank>Ext Ajax教程�?/p>

菠萝 2007-08-07 20:22 发表评论

菠萝 — Tue, 07 Aug 2007 12:21:00 GMT

教程�Q�Grid�l��g的简易分��?/h2>
概述: 本例��会带你�q�入Grid分页的世�?/p>
原文作者：Shea Frederick 出处

参考图�Q?br>

读者应先下载本例涉及的�C��代码。这里是一个已�l�完成好�?a target=_blank>例子�?/p>
Gird数据

Grid的分��必��M��靠服务端�Q�Server Side�Q�来划分好每一��늚�数据才可以完成�?

本例中的服务端语�a�是PHP,数据库是MySQL�Q�用来导��Z��些随机的数据。下列脚本的作用是，获取我们惌��的数据，同时�q�些数据是已分好��늚�数据。分��늚�参数是由Page Toolbar传入的变量limit和start所军_��的�?

$link = mysql_pconnect("test-db.vinylfox.com", "test", "testuser") or die("Could not connect"); mysql_select_db("test") or die("Could not select database"); $sql_count = "SELECT id, name, title, hire_date, active FROM random_employee_data"; $sql = $sql_count . " LIMIT ".$_GET['start'].", ".$_GET['limit']; $rs_count = mysql_query($sql_count); $rows = mysql_num_rows($rs_count); $rs = mysql_query($sql); while($obj = mysql_fetch_object($rs)) { $arr[] = $obj; } Echo $_GET['callback'].'({"total":"'.$rows.'","results":'.json_encode($arr).'})';

�׃��每个后台开发的环境都不��相同，所以这里的服务端代码就不细�I�了�?/p>
怎么做一个分��늚�Grid

本例采用的是ScriptTagProxy�Q�原因是范例代码 �?服务端代�?不是在同一个服务器上（译注�Q�即“跨域”�Q�，而大多数的情冉|��Q�在同一个服务器上得到数据，直接用HttpProxy��可以了�?/p>
使用DataStore与��^时唯一不同的地方，便是需要设�|?em>totalProerty属性。本例中�Q�我们从服务端的脚本计算�?#8220;total”�q�个��|��告诉DataStore��d��有多��个记录�Q�这里指的是所有的记录数�?/p>
var ds = new Ext.data.Store({ proxy: new Ext.data.ScriptTagProxy({ url: 'http://www.vinylfox.com/yui-ext/examples/grid-paging/grid-paging-data.php' }), reader: new Ext.data.JsonReader({ root: 'results', totalProperty: 'total', id: 'id' }, [ {name: 'employee_name', mapping: 'name'}, {name: 'job_title', mapping: 'title'}, {name: 'hire_date', mapping: 'hire_date', type: 'date', dateFormat: 'm-d-Y'}, {name: 'is_active', mapping: 'active'} ]) });

分页栏Toolbar

�q�里加入一个分��|��到Grid的面板中�Q?-差不多完成喽�?/p>
var gridFoot = grid.getView().getFooterPanel(true); var paging = new Ext.PagingToolbar(gridFoot, ds, { pageSize: 25, displayInfo: true, displayMsg: 'Displaying results {0} - {1} of {2}', emptyMsg: "No results to display" });

最后传�?em>start�?em>limit参数以初始化数据�?/p>
ds.load({params:{start:0, limit:25}});

花时间较多的地方是，在后台如何生成数据，以配合Grid的运作，一旦这些工作OK后，分页Grid再不是一仉��事了�?/p>

菠萝 2007-08-07 20:21 发表评论

学习EXT�W�四�?-开始��用Grid

菠萝 — Tue, 07 Aug 2007 12:21:00 GMT

概述: 本教�E�将以XML为数据源�Q�带你进入Grid的世界�?/p>
本文涉及的范例代码，可以在这里下载。一个完成好的例子可在这里找到�?/p>
步骤一定义数据(Data Definition)

首先要让Grid知道XML文��定义了每一行是什么数据。正如所见，我们命名�?item"在下面的XML��h��中�?/p>
单行的XML��h��数据

0446613657 http://www.amazon[*SNIP*]JVQEG2 Sidney Sheldon Warner Books Book Are You Afraid of the Dark?

接着需要定义某一列�ؓ“�l�一标识�Q�Unique Identifier�Q?#8221;,即ID,�Ҏ(gu��)��“id"所讄��的那个节�Ҏ(gu��)��d��|��h��代码�W�九(ji��)行）。本例中的样本数据是”ASIN"列�?/p>
数据定义的最后部分就是指定你需要显�C�的字段(Fields),把这些字�D�|��C��个数�l�之中，�q�保证这些字�D�与你的XML数据中元素名�U�是一致的�Q�而且�q�要注意先后��序�Q�这里的��序不需要和XML文�g中顺序一致�?/p>
var dataStore = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({url: 'sampledata-sheldon.xml'}), reader: new Ext.data.XmlReader({ record: 'Item', id: 'ASIN' }, [ 'Author', 'Title', 'Manufacturer', 'ProductGroup' ]) });

步骤�?列模型（Column Model�Q?/h3>
下一步便是定义Column Model 列模型。简单地��_��是通过一些属性的讄��Q�决定每一列怎么控制或怎么昄��Q�这是一个由每列的配�|�参数组成的数组。注意，出现的顺序应该与刚才定义“字段”的数�l�一致。较常见的参数通常是header和width�Q�所以你会觉得这两项是必��要讄��的，然而宽度（width�Q�其实不��L��需要的�Q�因为稍后我们将使用autoWidth/Height来代�ѝ�?/p>
列模型样�?/strong>

var colModel = new Ext.grid.ColumnModel([ {header: "Author", width: 120, dataIndex: 'Author'}, {header: "Title", width: 180, dataIndex: 'Title'}, {header: "Manufacturer", width: 115, dataIndex: 'Manufacturer'}, {header: "Product Group", width: 100, dataIndex: 'ProductGroup'} ]);

最后是��DataStore和Column Model两样东西传入到Grid�Q�渲染结果，然后加蝲来自DataStore的数据，�q�些��是你让Grid工作��h��的所有因素！

�q�行渲染�Q?/strong>

var grid = new Ext.grid.Grid('mygrid', { ds: dataStore, cm: colModel }); grid.render(); dataStore.load();

菠萝 2007-08-07 20:21 发表评论

学习EXT�W�六�?-关于�?w��i)TreePanel(Part 1)

菠萝 — Tue, 07 Aug 2007 12:19:00 GMT
�?w��i)组件是YUI.Ext 0.40 新增的组件。虽然YUI已经自带有TREE VIEW的组�Ӟ��但JACK�q�是军_��重新开发。具体原因在http://www.ajaxjs.com/yuicn/article.asp?id=20070245�Q�翻译文章）�?span id=mark-0 title="66 comments" contentindex="0">http://www.jackslocum.com/blog/2006/12/29/preview-drag-and-drop-enhancements-and-the-new-treepanel/ �Q�原文）
一、加载一个同步Tree:

var TreeTest = function(){
var Tree = YAHOO.ext.tree;// 快捷方式

return {
init : function(){
var tree = new Tree.TreePanel('tree_div', {//需要一个tree_div的holder
animate:true, //是否动画
loader: new Tree.TreeLoader({dataUrl:'get_nodes.asp'}), //调用一个JSON
enableDD:false,// 是否支持拖放
containerScroll: true
});

// 讄��根节�?br> var root = new Tree.AsyncTreeNode({
text: 'Frank的作�?, //根节�Ҏ(gu��)��?br> draggable:false, //根节�Ҏ(gu��)��否可拖放
id:'source'
});
tree.setRootNode(root); // 渲染 tree
tree.render(false,false);
// false for not recursive (the default), false to disable animation
root.expand(false,false);
}
};
}();

YAHOO.ext.EventManager.onDocumentReady(TreeTest.init, TreeTest, true);

通过XHR调用�q�个get_nodes.asp文�g�Q�假设服务器�q�回�q�样一个JSON(有关JSON的介�l?http://www.json.org/json-zh.html)�Q?/p>
[{ "text":"yui-ext.js","id":"\/yui-ext.js","leaf":true,"cls":"file" } ,{ "text":"yui-ext-1118.php","id":"\/yui-ext-1118.php","leaf":true,"cls":"file" } ,{ "text":"yui-ext-1228.php","id":"\/yui-ext-1228.php","leaf":true,"cls":"file" } ,{ "text":"build","id":"\/build","cls":"folder" } ,{ "text":"source","id":"\/source","cls":"folder" } ,{ "text":"yui-ext-1123.php","id":"\/yui-ext-1123.php","leaf":true,"cls":"file" } ,{ "text":"yui-ext-1203.php","id":"\/yui-ext-1203.php","leaf":true,"cls":"file" } ]
Server端JSON的输出（ASP JScript�Q?
var goods = new dbOpen(); goods.GetSQL ="select * from goodsbigclass"; with(goods){ GetRS(1); var str=""; str+="["; do{ str+='{"text":"'+rs("BigClassName")+'","id":"\/yui-ext.js","leaf":true,"cls":"file","href":"?b_id='+rs("BigClassID")+'"},'; rs.MoveNext(); }while(!rs.EOF); str+="]"; Response.Write(str); Close(); } goods= null;

解释�Q?br>“text”-->昄��的文�?br>"id"-->id�?
“leaf”-->Boolean��|��如果“叶子”是真的话�Q�则不能包含子节点Children nodes
"cls"-->选用的样式，通常在这里选定图标
”href“-->指定的url�Q�还有一�?#8221;hrefTarget“的属�?br>另外�Q�除了以上的属性，�(zh��n)�还可以在JSON加入��M��的属性，作�ؓ节点的属性，见Jack原话�Q?br>The href attribute is called "href", there's also an "hrefTarget" attribute. For capturing node clicks, you can listen on individual nodes or you can listen for "click" on the tree which will pass you the node that was clicked. FYI, you can put any attributes you want in the json config for the node and it will be available as node.attributes. FAQ.4会��l�解释这个问题�?br>FQA常见问题�Q?/p>
1.Tree支持XML数据交换吗？
A:暂不支持�Q�据FOURM上的话，以后会提供支持，见：
can I use xml instead of json for sending nodes hirerachy �Q?br>Correct me if I'm wrong but I think the answer is no here. But that doesn't mean it won't be supported later on.

2.我想用单��M��替双��d��开子节点，可以吗？
A:可以�Q�见�Q?

tree.on('click', function(node){ if(!node.isLeaf()){ node.toggle(); } });

3.事�g处理的几�U�情形：
A: a.当加入某个节�Ҏ(gu��)��Q��ؓ其增加事�?

tree.on('append', function(tree, node){ if(node.id == 'foo'){ // �q�里加入你的事�g�Q�如click�Q�侦听器�Q�addListener()�Q? } });

b.针对某个节点的单��M��?

tree.on('click', function(node){ if(node.id == 'foo'){ // do something } });

c.针对某个区域�Q�集合）的事�?

// fires any time the selection in the tree changes tree.getSelectionModel().on('selectionchange', function(sm, node){ if(node && node.id == 'foo'){ // do something } });

4.如何获取JSON中的自定义字�D�（或称作参�?parameters�Q?br>A:JSON对象已经被构建函�?construction传递到TreeNode中，作�ؓnode.attributes 出现�Q�所以调用属性node.attributes 便可获取。详见：http://www.yui-ext.com/forum/viewtopic.php?t=2253

tree.on('click', function(node){ if(!node.isLeaf()){ node.toggle(); } });

菠萝 2007-08-07 20:19 发表评论

学习EXT�W�六�?-关于�?w��i)TreePanel(Part 2异步获取节点)

菠萝 — Tue, 07 Aug 2007 08:44:00 GMT

下面��介�l�如何异步取一��|��(w��i)的所有节点，具体做法与官方同步取节点有很大不同，��其在json的id属性上�Q�下面是我一些摸索，可能不是最��x��案，有待大家一��L(f��ng)��I��?/p>
异步取节点的思�\是这��L(f��ng)��Q?br>1、先定义一个初始化节点�Q�也可以不定义，看个人需求）
2、yui-ext�Ҏ(gu��)��该节点id��h��服务器，获得子节点各属�?br>3、��@�?br>
特点�Q�可以在上一�U�目录中�Q�在服务器端预先��该节点是否有子节点��d��Q�json中的isLeaf属性）�Q�虽然但数据库将多承担一些压力，但用个count(*)不会造成太大负担�Q�除非查询条件异常复杂）�Q�也可以不读�Q�即把所有isLeaf讄��为false�?br>

问题�Q?/strong>
1、目前还无法�q�行reload�Q�即每次打开节点都重新读取一��?br>2、样式还有些问题�Q�无法通过node. childNodes[i]讄��子节点的style�Q�所以无法改变最后一�U�元素的style�Q�也许是通过别的途径改变style的？�Q?/p>

�C�Z��Q?/strong>
先给��Z��D�js代码�Q�可以结合官方的demo�Q?a target=_blank>http://yui-ext.com/playpen/yui-ext.0.40/examples/tree/reorder.html�Q�看看：

//定义根id的变�? var rootId = 1; var TreeTest = function(){ // shorthand var Tree = YAHOO.ext.tree; return { init : function(userName){ var tree = new Tree.TreePanel('detailTree', { animate:true, //�q�个dataUrl是初始化�?w��i)所用的url�Q�你也可以不写或定义一个静态json文�g�Q�还可以什么都不写全部依赖于第二个url自动产生�Q�视具体需求而定 loader: new Tree.TreeLoader({dataUrl:'calendarDetail.do?method=getDayDetailJSON&parentId='+rootId}), enableDD:true, containerScroll: true }); // set the root node var root = new Tree.AsyncTreeNode({ text: 'yui-ext', draggable:false, id:rootId }); tree.setRootNode(root); //�Ҏ(gu��)��当前节点id�Q�动态拼��求服务器的�\�? //每��生一个节点，指向一个事件的引用�Q�将新徏loader.dataUrl�Q�具体事件的机制�q�需要再研究�Q? //注意调用函数是beforeload tree.on('beforeload', function(node){ tree.loader.dataUrl = 'calendarDetail.do?method=getDayDetailJSON&parentId='+node.id; }); //�q�里演示一个自定义json的用�?description��定义json的key) //以及如何定义某节点的style(node.ui.textNode.style.title) //具体可以看ui�q�个�c? tree.on('beforeexpand', function(node){ node.ui.textNode.style.title = ‘red’; alert(node.attributes.description); }); // render the tree tree.render(); // false for not recursive (the default), false to disable animation root.expand(); } }; }();

同时再分析一个json�Q?br>[{"text":"衣服�c?,
"id":"5",     //注意�Q�这里是该节点的id�Q�拼�q�接时要用到�Q�与官方的json有所不同
"leaf":true,
"cls":"file",
"description":"�q�里是��服类"}]   //自定义只需要这样就可以�?

�l�出java产生json的代码逻辑片断�Q?

…… //list为由传入的id所求的category集合 List list= findBy("parentId", new Long(parentId.toString())); StringBuffer JSONStr = new StringBuffer(); //声明json JSONStr.append("["); for(CostCategory i : list){ boolean isLeaf = isLeaf(i.getId()); //isLeaf()为判断是否有以该id为parentId的节点，具体没有�l�出 String icon = isLeaf?"file":"folder"; String description = i.getCategoryDescription()==null?"":i.getCategoryDescription(); //{"text":"treedata.jsp","id":"treedata.jsp","leaf":true,"cls":"file"}, JSONStr.append("{\"text\":\""+ i.getCategoryName()+"\",\"id\":\""+ i.getId()+"\",\"leaf\":"+ isLeaf+",\"cls\":\""+ icon+"\",\"description\":\""+ description+"\"},"); } JSONStr.deleteCharAt(JSONStr.lastIndexOf(",")); JSONStr.append("]"); System.out.println(JSONStr); out.print(JSONStr); //输出json ……

菠萝 2007-08-07 16:44 发表评论

学习EXT�W�七�?-关于View&JSONView

菠萝 — Tue, 07 Aug 2007 06:29:00 GMT

展现一条一条的二维关系的数据，我们可以使用GIRD�l��g�?但有些场合，如��品展�C�，��d��Q�我们可以��用View�l��g�Q�来展示“矩阵”式的数据�?View的数据源来自DataModel对象�Q�即包含XMLDataModel和JSONDataModel。尽��View支持JSON,但如果不是用于DataModel�Q�View的子�c�JSONView更适用�Q�因为它提供更多的事件和�Ҏ(gu��)��。一般来��_��View用于XML数据源；JSONView用于JSON数据源�?/p>
View如何工作�Q?/p>
记得以前如何输出一个记录吗�Q�以�|�上商店��Z��子；以前是这栯��Z��个商品的�Q?

<%
  .....
  //下列服务端代码�ؓASP using JScript�Q�依然是JS�Q�I'm a big JS Fan^^�Q?br>  var str ="";
  str+="
";
  str+=rs("title")+"<\/div>";
  str+="";
  str+="<\/td>"
  Resposne.Write(str);
  .....
%>
很明显，我们最�l�目的还是要输出HTML,为浏览器渲染(Render)服务。View工作原理也一��P��只不�q�把以前Sever做的事情搬到Cilent来，依靠View来处理（实质上是Domhelper的模版）�Q�让��览器最�l�渲染输出�?/p>
需要你的帮忙：Domhelper

如上�q�ͼ�View的工作离不开DomHelpr。DomHelpr在这里提�?模版Template",�q�将其编译。见下面代码�Q?

//新徏一个Template对象
var tpl = new YAHOO.ext.Template(    '
' +        '{title}' +       '
{date} by {author} | {comments} Comments
{description}' +    '
');
tpl.compile(); //compile()的方法，可带来DOM性能的增�?br>var moreView = new YAHOO.ext.JsonView('entry-list', tpl, {
   jsonRoot: 'posts'
});
//又或者隐式创建Template对象
var view = new YAHOO.ext.View('my-element',
           '
{2} - {1}
', // auto create template
           dataModel, {
              singleSelect: true,
              selectedClass: 'ydataview-selected'
           });

加蝲数据

VIEW加蝲数据的方式与JSONView的有所不同�Q�VIEW采用DataModel的load(),JSONView采用UpateManager的load()。下面重点说说JSONView的load()�Ҏ(gu��)��Q?

view.load({ url: 'your-url.php', params: {param1: 'foo', param2: 'bar'}, // 可以是URL encoded字符 callback: yourFunction, scope: yourObject, //(optional scope) discardUrl: false, nocache: false, text: 'Loading...',//loading之提�C�文�?timeout: 30,//��时 scripts: false });
只有url参数是不可缺省的�Q�其它如 nocache, text and scripts都是可选的�?text和scripts是与UpdateManger实例兌��的参�?

params : String/Object
(optional) The parameters to pass as either a url encoded string "param1=1¶m2=2" or an object {param1: 1, param2: 2}
callback : Function
(optional) Callback when transaction is complete - called with signature (oElement, bSuccess)
discardUrl : Boolean
(optional) By default when you execute an update the defaultUrl is changed to the last used url. If true, it will not store the url.
JSONView使用�Ҏ(gu��)��

a.有一个gird和JSONView,两者如何同时调用一个数据源�Q?br>1.改变jsonData属�? 2.Call refresh(); �?a >http://www.yui-ext.com/forum/viewtopic.php?t=1968

b.分页
分页视乎�q�没有什么好的方案，JACK只提供下面的思�\�Q?br>JsonView extends View. View supports using a JSONDataModel. It won't render a paging toolbar for you, but it will loadPage() and standard DataModel functionality. The view will automatically update when you load new data. If you want named template parameters (like JsonView), you will need to remap the indexes (DataModel style) to named parameters. See the YAHOO.ext.View docs for more info on that.
http://www.yui-ext.com/forum/viewtopic.php?t=2340

c.如何JSONView的获取整个DataModel而不是字�D�？我每�ơ用alert(mainView.jsonData); �l�果�?#8220;undefined”
如果是获取DataModel�Q�那应该用View对象。出现undefined的原因是load()是异步的�Q�你必须先等待数据load完。如�Q?/p>
mainView.el.getUpdateManager().on('update', function(){
     alert(mainView.jsonData);
});
详见http://www.yui-ext.com/forum/viewtopic.php?t=1209

d.学习例子。范例Image Chooser本��n��是一个好的学习例�?/p>
JSON Format
�(zh��n)�可能认为服务输��L(f��ng)��JSON�Q?/p>
{"user": {"username": "Bob", "birthday": "1976-11-08", "join_date": "2006-08-01", "last_login": "2006-12-03"}}
是正��无误的。但不对�Q�它是不能被处理的。正��的格式应该是：

{"user": [{"username": "Bob", "birthday": "1976-11-08", "join_date": "2006-08-01", "last_login": "2006-12-03"}]}
注意�Ҏ(gu��)��号内声明的是数组�c�d��Q�View渲染方式实际是与DataModel一致的

菠萝 2007-08-07 14:29 发表评论

学习EXT�W�七日B-View&JSONView 一个画室网站的案例

菠萝 — Tue, 07 Aug 2007 06:27:00 GMT

之前在Part 1��单介�l�了Veiw和JSONView。今天这里小弟�ؓ大家说说应用的案例，原本Jack的Image Chooser是一个非常好的案例，当中包含Jack大量的技巧，不过正因��P��q�于深奥�Q�小弟我亦不能一时全盘吃透，只挑�?#8220;�_�֦�”之处�Q�与君共勉之�Q?br>本文包含四大知识点：1.在LayoutDialog中加入Tabs�Q?.View的��用方式；3.JSONView的��用方�?4.获取XML/JSON的fields��g��分页

演示地址

【View之定义�?br> A View is generally used to build a quick template-based display of datamodel, rather than building a more complex grid. I thnk there's a blog post that illustrates doing this with JSON data. Templates can be used for any repetitious html creation, not necessarily tied to a datamodel.
主要的意思是View用于展示DataModel的数据，Part 1已经说过。这里是来自fourm某君的补充�?/p>
代码点评�Q?/p>
1.先看一�D늮�单的

Title//用yui.ext做翻转按�? super easy(��工最�??^^)
showBtn = getEl('showIntro');
showBtn.on('click', this.showDialog, this, true);
showBtn.applyStyles("cursor:pointer");
showBtn.on('mouseover', function(){showBtn.dom.src='images/over_10.gif'}, this, true);
showBtn.on('mouseout', function(){showBtn.dom.src='images/btn_10.gif'}, this, true);

Title//左边动画效果,createDelegate()负责轮换效果
var luo=getEl("left_pic");
luo.move('right', 250, true, .1, function(){
   luo.dom.src='images/'+who+".gif";
   luo.move('left', 250, true, .15, null, YAHOO.util.Easing.easeOutStrong);
}.createDelegate(this));

2.在LayoutDialog中加入Tabs

LayoutDialong分两个区域：west & center。而center之中我们要加入tabs�Q��ƈ逐一附加active的事�?/p>


Title
var center = layout.getRegion('center');
var tab1 = new YAHOO.ext.ContentPanel('luo', {title: '�|�老师作品'});
center.add(tab1);
center.add(new YAHOO.ext.ContentPanel('chen', {title: '陈老师作品'}));

//center.on('panelactivated',function(){
// alert(center.titleTextEl);
//}, this, true);
//center.showPanel('center');
/*two ways to activate the tabs.and tabs= many CPs
如果在BasicDialog中，只需要dialog本��n��可以获取getTabs,因�ؓDialog本��n��是
唯一的一个Region;
但在LayoutDialog中，Region是多个的�Q�所有要指明哪个一个Region才行
*/

// stoe a refeence to the tabs 获取TABS集合
var tabs = layout.getRegion('center').getTabs();//逐一加入事�g
tabs.getTab('center').on('activate', function(){this.show_thumb('student')}, this, true);
tabs.getTab('luo').on('activate', function(){this.show_thumb('luo')}, this, true);
tabs.getTab('chen').on('activate',function(){this.show_thumb('chen')}, this, true);
//center.showPanel('chen'); //用Region�Ȁ�z�M��可以
/*Tips:不能立即�Ȁ�z�M��Ӟ��会点延时�Q�经�q�多行代码的延时便ok �Q�用addbufferlistener理论上也可以*/
layout.getRegion('center').getTabs().activate('center'); 3.View的��用方�?

//XML:index方式讉K��字段�Q�JSON�Q�直接��用字�D�名
var tpl = new YAHOO.ext.Template(
'
'+
'
' src=userfiles/image/lite_'+who+'/{0}>
' +
'
文�g大小: {1}
'+
'
'
);
tpl.compile(); //“�~�译DOM”加�?/p>
var schema = {
tagName: 'row',//Item��?br> id: 'id',//ID如不需要时�Q�设�|�空白字�W�串�Q�不能取消！
Fields: ['filename','filesize','width','height']//��d��的字�D?br>};
var dm = new YAHOO.ext.grid.XMLDataModel(schema);
var mainView = new YAHOO.ext.View('pic_'+who,
tpl,
dm, {
singleSelect: true,//If JSON,�q�需指定一个config:jsonRoot
emptyText : '
没有匚w��的内容！
'
});
dm.on('load',function(){}, this, true);
mainView.on('click', function(vw, index, node, e){
//alert('Node "' + node[] + '" at index: ' + index + ' was clicked.')
},this, true);
mainView.prepareData = function(data){
// prepare,用于自定义格�?br> //如JSON方式直接属性名讉K��Q�e.g data.sizeString = formatSize(data.size);
data[1] = formatSize(data[1]);
return data;
};
//用DataModel加蝲文�g�Q�如果是JSONView�Q�这个服务由JSONView本��n�Q�UpdateManager�Q�提�?br>dm.load('xml.asp?who='+who);

4.JSONView的��用方�?

Title
var dh = YAHOO.ext.DomHelper;
dh.append(document.body, {tag: 'div', id: 'editUserDialog-user'});
//XML:index方式讉K��字段�Q�JSON�Q�直接��用字�D�名
var tpl = new YAHOO.ext.Template('Username: {username}' +
'Birthday: {birthday}' +
'Member Since: {join_date}' +
'Last Login: {last_login}');
tpl.compile();
var mainView = new YAHOO.ext.JsonView('pic',
tpl, {
   singleSelect: true,
   jsonRoot: 'user',
   emptyText : 'No images match the specified filter'
});
mainView.load("test.asp", "id=2");
//JSONView�Ҏ(gu��)��的异�怺��?br>mainView.on('loadexception', function(){onLoadException()}, this, true);

var onLoadException= function(v,o){
   alert('Error');
};

5.获取XML/JSON的fields��g��分页

�q�两个问题放在一赯��论的原因是至今我�q�不能实现。如果按照jack的办法：

TitlemainView.on('click', function(vw, index, node, e){
alert('Node "' + node.id + '" at index: ' + index + ' was clicked.');
});

可得到index但node.id无法获取。我只好用较丑陋的方式实玎ͼ�

Title//在Domhelper�?#8220;��?#8221;输出click事�g
var tpl = new YAHOO.ext.Template( '
'+ '
' + '
文�g大小: {1}
'+ '
');

分页�Q?br>View的分��视乎应该通过DataModel。但我没成功�q�。如知道�~�由的朋友恳请告之�?br>

菠萝 2007-08-07 14:27 发表评论

菠萝 — Tue, 07 Aug 2007 06:16:00 GMT

Summary: 本文是区域管理器�Q�region manager�Q�的教程的第一��，为�?zh��n)�介绍如何创徏区域�Q�如何增加版面到�q�些区域�?

Author:Dave Fenwick
Published: May 01, 2007
Translater: Frank Cheung

Ext的layout布局对于建立WEB�E�序��ؓ有用。关于布局引擎�Q�layout engine�Q�，区域��理器（region manager�Q�的教程��分为几部分�Q�本文是�W�一��，为�?zh��n)�介绍如何创徏区域�Q�如何增加版面到�q�些区域�?/p>
布局引擎(layout engine)�q�一功能早已在EXT前个ALPHA实现了�?Jack Slocum对于怎样环绕某一区域�Q�给与指定区域管理的�{�略�Q�和建立界面的问题，在他的第一、第二篇关于跨浏览器的WEB2.0布局功能的博客中�Q�进行过讨论。定义一个DOM元素的边界（edge�Q�，使之一个布局的边框（border�Q�－�Q�这�U�做法��得创�?#8220;加厚�?thick�Q�like)”客户端UI的开发更�q�一大步�?/p>
布局��理�?layout manager)负责��理�q�些区域。布局��理的主要的用户�l��g是BorderLayout�c�R��该�c�MؓEXT开发富界面的程序提供了一个切入点。Layout的含意是划分好一些预定的区域。可用的区域分别有south, east, west, north,和center。每一个BorderLayout对象都提供这些区域但只有center要求必须使用的。如果你在单独一个区域中包含多个面板�Q�你可通过NestedLayoutPanel �c�d��嵌到BorderLayout 实例中�?/p>
注意事项�Q�本教程的每个文仉��?html�?js格式的。教�E�每一步都有演�C?你也可以下蝲�q�些文�g在编辑器�Q�zip格式提供在这里）中看看发生什么事�?/p>
面板�Q�Pane�Q�是区域��理�Q�region management�Q�的另外一个组件。面板提供了�q�么一个地方，可�ؓ�(zh��n)�的EXT器�g�Q�widget�Q�、加载的HTML,嵌入的IFrames、或者是你日常在HTML��面上摆攄��随便一样东�ѝ��NestedLayoutPanel也是一个面板，只不�q�用于链接多个BorderLayout的区域，其它的面板包括内定w��?ContentPanel,GRID面板 GridPanel,和树(w��i)犉��?TreePanel�?/p>
��单的例子
下面的layout包含 north, south, east, west,和center的区域，而且每个区域包含一个ContentPanel�Q�各区域之间使用得了分隔条分割开�?/p>

Titlevar mainLayout = new Ext.BorderLayout(document.body,
{
    north: {
        split: true, initialSize: 50
    },
    south: {
        split: true, initialSize: 50
    },
    east: {
        split: true, initialSize: 100
    },
    west: {
        split: true, initialSize: 100
    },
    center: {
    }
});

�q�是一个非常基本的layout,只是分配了东南西北中间的区域、分隔条、设�|�一下初始尺寸，�q�最�q�定义中间区域。本例中�Q�BorderLayout被绑定到"document.body"�q�个DOM元素�Q�其实BorderLayout�q�可以绑定到��M��一个封闭的DOM元素。定义好BorderLayout之后�Q�我们加入ContentPanel对象�Q�基于本例）�?

TitlemainLayout.beginUpdate();
mainLayout.add('north', new Ext.ContentPanel('north-div', {
    fitToFrame: true, closable: false
}));
mainLayout.add('south', new Ext.ContentPanel('south-div', {
    fitToFrame: true, closable: false
}));
mainLayout.add('east', new Ext.ContentPanel('east-div', {
    fitToFrame: true, closable: false
}));
mainLayout.add('west', new Ext.ContentPanel('west-div', {
    fitToFrame: true, closable: false
}));
mainLayout.add('center', new Ext.ContentPanel('center-div', {
    fitToFrame: true
}));
mainLayout.endUpdate();

当前的例子是��ContentPanel加入到所有区域中。由调用mainLayout.beginUpdate()开始。beginUpdate()告诉BorderLayout对象在执行endUpate()�Ҏ(gu��)��之前�Q�先不要对加入的对象排版布局。这��L(f��ng)��好处是避免了ContentPanel有对象加入时�Q�导致UI的刷斎ͼ�改进了整体的用户体验。执行beginUpdate()之后�Q�加入五个ContentPanel对象到区域。所有的ContentPanel对象�Q�除中间的那个外�Q�，都设�|�是可关闭的�Q�closbale�Q�。所有的ContentPanel对象也都讄��动适配它们的父元素。最后执行endUpdate()渲染layout�?

InternetExploer注意事项�Q�BorderLayout所容纳的元素必��L��一个SIZE以便正确渲染。典型地你无��Mؓdocument.body 指明size�Q�因为document.body通常是有size的了�Q�大多数情况�Q�－如果你在��览器上什么也看不刎ͼ�。但是如果你��layout�q�同容器攑ֈ�现有的web��面上（‘可能是DIV�Q?那么DIV的size应该先指明以便正��渲染。如下列昄��正常�Q?/p>
好，让我们趁热打铁，看看完整的layout是怎样的。假设ext是一子目录叫做ext-1.0�Q�父目录下面的代码�?/p>
simple.html:

Title










simple.js:

TitleSimple = function() {
    return {
        init : function() {
            var mainLayout = new Ext.BorderLayout(document.body, {
                north: {
                    split: true, initialSize: 50
                },
                south: {
                    split: true, initialSize: 50
                },
                east: {
                    split: true, initialSize: 100
                },
                west: {
                    split: true, initialSize: 100
                },
                center: {
                }
            });
            mainLayout.beginUpdate();
            mainLayout.add('north', new Ext.ContentPanel('north-div', {
                fitToFrame: true, closable: false
            }));
            mainLayout.add('south', new Ext.ContentPanel('south-div', {
                fitToFrame: true, closable: false
            }));
            mainLayout.add('east', new Ext.ContentPanel('east-div', {
                fitToFrame: true, closable: false
            }));
            mainLayout.add('west', new Ext.ContentPanel('west-div', {
                fitToFrame: true, closable: false
            }));
            mainLayout.add('center', new Ext.ContentPanel('center-div', {
                fitToFrame: true
            }));
            mainLayout.endUpdate();
        }
    };
}();
Ext.EventManager.onDocumentReady(Simple.init, Simple, true);

加入内容
上面的例子做的layout,除了可移动分割栏外，功能�q�不强大。需要加入些内容。有几种的办法加入内宏V��如果�?zh��n)�直接加入内容到DIV中（ContentPanel�l�定的那个）�Q�ContentPanel对象会对div里面的内容进行渲染。尽��试试！我们会更改html内容加入 center-div中�?

simple2.html

Title









This is some content that will display in a panel when a ContentPanel object is attached to the div.

除此之外�Q�还可以利用ContentPanel对象带有的function加蝲数据。可用的�Ҏ(gu��)��有几�U�，�q�里我们使用其中两种�Q�setContent() �?setUrl()。setContent()允许�(zh��n)�直接从JavaScipt�E�序中插入HTML。setUrl()�Q�允许�?zh��n)�从服务端得到数据加入ContentPanel中�?/p>
我们原来的例子中�Q�ContentPanel对象创徏的时候是匿名的（anonymous�Q�。这没问题，但要引用它们�Q�你需要遍历区域管理器所分配的对象以获得引用的对象。这不是最好的办法�Q�所有我的做法是分配一个变量给ContentPanel然后便可直接引用�?/p>
simple3.js

TitleSimple = function() {
    var northPanel, southPanel, eastPanel, westPanel, centerPanel;
    return {
        init : function() {
            var mainLayout = new Ext.BorderLayout(document.body, {
                north: {
                    split: true, initialSize: 50
                },
                south: {
                    split: true, initialSize: 50
                },
                east: {
                    split: true, initialSize: 100
                },
                west: {
                    split: true, initialSize: 100
                },
                center: {
                }
            });
            mainLayout.beginUpdate();
            mainLayout.add('north', northPanel = new Ext.ContentPanel('north-div', {
                fitToFrame: true, closable: false
            }));
            mainLayout.add('south', southPanel = new Ext.ContentPanel('south-div', {
                fitToFrame: true, closable: false
            }));
            mainLayout.add('east', eastPanel = new Ext.ContentPanel('east-div', {
                fitToFrame: true, closable: false
            }));
            mainLayout.add('west', westPanel = new Ext.ContentPanel('west-div', {
                fitToFrame: true, closable: false
            }));
            mainLayout.add('center', centerPanel = new Ext.ContentPanel('center-div', {
                fitToFrame: true
            }));
            mainLayout.endUpdate();
            northPanel.setContent('This panel will be used for a header');
            westPanel.setContent('');
            centerPanel.setUrl('index.html');
            centerPanel.refresh();
        }
    };
}();
Ext.EventManager.onDocumentReady(Simple.init, Simple, true);

我们现在从现有的��面动态加载内宏V��但是这里有个问题。若果内定w��面积�q�大而撑破页面的话将没有意义了。我们提供了一些配�|�属性以解决�q�类问题。当fitToFrame为true�Ӟ��p��动配�|�a(ch��n)utoScroll。内容一旦溢出就会出现滚动条。另外一个涉及InternetExploer的问�?是中间的内容的样式没有生效，原因是一些浏览器支持动态样式而一些不直接�Q�要较好地解决上�q�问题，推荐使用Iframe标签�?

用IFRAME标签做布局可灵�z�d��处理�Q�我们准备在DOM中直接操�U�IFRAME.�q�里IFRAME成�ؓ面板的容器，以填入中间区域的内容

讄��一�?IFRAME的滚动条�q�放��C��间的��面�?

simple4.html

Title










simple4.js

TitleSimple = function() {
    var northPanel, southPanel, eastPanel, westPanel, centerPanel;
    return {
        init : function() {
            var mainLayout = new Ext.BorderLayout(document.body, {
                north: {
                    split: true, initialSize: 50
                },
                south: {
                    split: true, initialSize: 50
                },
                east: {
                    split: true, initialSize: 100
                },
                west: {
                    split: true, initialSize: 100
                },
                center: {
                }
            });
            mainLayout.beginUpdate();
            mainLayout.add('north', northPanel = new Ext.ContentPanel('north-div', {
                fitToFrame: true, closable: false
            }));
            mainLayout.add('south', southPanel = new Ext.ContentPanel('south-div', {
                fitToFrame: true, closable: false
            }));
            mainLayout.add('east', eastPanel = new Ext.ContentPanel('east-div', {
                fitToFrame: true, closable: false
            }));
            mainLayout.add('west', westPanel = new Ext.ContentPanel('west-div', {
                fitToFrame: true, closable: false
            }));
            mainLayout.add('center', centerPanel = new Ext.ContentPanel('center-div', {
                fitToFrame: true, autoScroll: true, resizeEl: 'center-iframe'
            }));
            mainLayout.endUpdate();
            northPanel.setContent('This panel will be used for a header');
            Ext.get('center-iframe').dom.src = 'index.html';
        }
    };
}();
Ext.EventManager.onDocumentReady(Simple.init, Simple, true);

当前的进展不错。大多数情况滚动条工作�v来是很好的，但留意一��L(f��ng)��东西�Q?Internet Explorer 7之前的版本，如果文��完整指明DTD的DOCTYPE标签�Q�IE很可能出现垂直滚动条的同时也昄��水��^滚动条。这个IE布局的一个BUG�?/p>
现在�q�是个基本的LAYOUT和几个ContentPanel对象。接着我们加入一条工��h��Q�toolbar�Q�到中间的ContentPanel对象。创��E�非常简单。由于主题的关系�Q�我�q�不准备在这里详�l�介�l�如何创建toolbat。这是简单的创徏toolbar的过�E�：

var simpleToolbar = new Ext.Toolbar('simple-tb');
simpleToolbar.addButton({ text: 'Scroll Bottom', cls: 'x-btn-text-icon scroll-bottom'});
simpleToolbar.addButton({ text: 'Scroll Top', cls: 'x-btn-text-icon scroll-bottom'});要加入toolbar,需要先加入HTML的容器，我们需要加入一些代码以创徏toolbar�Q�然后绑定到中间的区域。toolbar有两个按钮： Scroll Bottom和Scroll Top。这些按钮会滚动IFRAME内容到底部或是顶部。�ؓ了尽可能兼容多浏览器�Q�我们的加入一个function来控制IFRAME文��?/p>
simple5.html

Title
















simple5.js

Title
function getIframeDocument(el) {
    var oIframe = Ext.get('center-iframe').dom;
    var oDoc = oIframe.contentWindow || oIframe.contentDocument;
    if(oDoc.document) {
        oDoc = oDoc.document;
    }
    return oDoc;
}

Simple = function() {
    var northPanel, southPanel, eastPanel, westPanel, centerPanel;
    return {
        init : function() {
           var simpleToolbar = new Ext.Toolbar('center-tb');
           simpleToolbar.addButton({
               text: 'Scroll Bottom', cls: 'x-btn-text-icon scroll-bottom', handler: function(o, e) {
                   var iframeDoc = getIframeDocument('center-iframe');
                   iframeDoc.body.scrollTop = iframeDoc.body.scrollHeight;
               }
           });
           simpleToolbar.addButton({
               text: 'Scroll Top', cls: 'x-btn-text-icon scroll-top', handler: function(o, e) {
                   var iframeDoc = getIframeDocument('center-iframe');
                   iframeDoc.body.scrollTop = 0;
               }
           });
           var mainLayout = new Ext.BorderLayout(document.body, {
                north: {
                    split: true, initialSize: 50
                },
                south: {
                    split: true, initialSize: 50
                },
                east: {
                    split: true, initialSize: 100
                },
                west: {
                    split: true, initialSize: 100
                },
                center: { }
            });
            mainLayout.beginUpdate();
            mainLayout.add('north', northPanel = new Ext.ContentPanel('north-div', {
                fitToFrame: true, closable: false
            }));
            mainLayout.add('south', southPanel = new Ext.ContentPanel('south-div', {
                fitToFrame: true, closable: false
            }));
            mainLayout.add('east', eastPanel = new Ext.ContentPanel('east-div', {
                fitToFrame: true, closable: false
            }));
            mainLayout.add('west', westPanel = new Ext.ContentPanel('west-div', {
                fitToFrame: true, closable: false
            }));
            mainLayout.add('center', centerPanel = new Ext.ContentPanel('center-div', {
                fitToFrame: true, autoScroll: true, resizeEl: 'center-iframe', toolbar: simpleToolbar
            }));
            mainLayout.endUpdate();
            northPanel.setContent('This panel will be used for a header');
            Ext.get('center-iframe').dom.src = 'index.html';
        }
    };
}();
Ext.EventManager.onDocumentReady(Simple.init, Simple, true);

一个标准的layout已经差不多了。区域可讄��标题�Q�这样可以把几个区域区分开来，创徏该区域面板的时候指定属性即可�?

所有的区域都可以收�~�和展开。要使一个区域可收羃�Q�你应在区域配置��中指定collapsible属性。属性collapsedTitle是用于区域收�~�之后显�C�的文字�Q�collapsedTitle属性只用于north和south区域�?/p>
simple6.js
function getIframeDocument(el) {
    var oIframe = Ext.get('center-iframe').dom;
    var oDoc = oIframe.contentWindow || oIframe.contentDocument;
    if(oDoc.document) {
        oDoc = oDoc.document;
    }
    return oDoc;
}

Simple = function() {
    var northPanel, southPanel, eastPanel, westPanel, centerPanel;
    return {
        init : function() {
           var simpleToolbar = new Ext.Toolbar('center-tb');
           simpleToolbar.addButton({
               text: 'Scroll Bottom', cls: 'x-btn-text-icon scroll-bottom', handler: function(o, e) {
                   var iframeDoc = getIframeDocument('center-iframe');
                   iframeDoc.body.scrollTop = iframeDoc.body.scrollHeight;
               }
           });
           simpleToolbar.addButton({
               text: 'Scroll Top', cls: 'x-btn-text-icon scroll-top', handler: function(o, e) {
                   var iframeDoc = getIframeDocument('center-iframe');
                   iframeDoc.body.scrollTop = 0;
               }
           });
           var mainLayout = new Ext.BorderLayout(document.body, {
                north: {
                    split: true, initialSize: 50
                },
                south: {
                    split: true, initialSize: 125, titlebar: true,
                    collapsedTitle: 'Status', collapsible: true
                },
                east: {
                    split: true, initialSize: 100
                },
                west: {
                    split: true, initialSize: 100, titlebar: true, collapsible: true
                },
                center: { titlebar: true}
            });
            mainLayout.beginUpdate();
            mainLayout.add('north', northPanel = new Ext.ContentPanel('north-div', {
                fitToFrame: true, closable: false
            }));
            mainLayout.add('south', southPanel = new Ext.ContentPanel('south-div', {
                fitToFrame: true, closable: false, title: 'Status'
            }));
            mainLayout.add('east', eastPanel = new Ext.ContentPanel('east-div', {
                fitToFrame: true, closable: false
            }));
            mainLayout.add('west', westPanel = new Ext.ContentPanel('west-div', {
                fitToFrame: true, closable: false, title: 'Navigation'
            }));
            mainLayout.add('center', centerPanel = new Ext.ContentPanel('center-div', {
                fitToFrame: true, autoScroll: true, resizeEl: 'center-iframe',
                toolbar: simpleToolbar, title: 'Content'
            }));
            mainLayout.endUpdate();
            northPanel.setContent('This panel will be used for a header');
            Ext.get('center-iframe').dom.src = 'index.html';
        }
    };
}();
Ext.EventManager.onDocumentReady(Simple.init, Simple, true);

注意我们收藏起west区域�Ӟ��是没有title的。当前的HTML没有提供对一个元素的90度的旋�{。我们只好用一张透明的图片来实现�Q�上面的文字�?Navigation',�?8p,�?50p,然后90度旋转�?/p>
��Z��昄��囄��Q�我们需要增大EXT原先的widget样式�Q�只��d��HTML头样式表中加入下列样式便可得到适合的样式效果。如simple7.html�C��?/p>

.x-layout-collapsed-west {
    background-image: url(navigation.gif);
    background-repeat: no-repeat;
    background-position: center;
}

教程的第二部分我们将会接触layout manager的一些高�U�细节内容，包括内嵌layouts�Q�可�~�程的展开、收�~�区域，创徏tab layout和其它一些创建EXTellent�E�序的有效方法�?br>

菠萝 2007-08-07 14:16 发表评论

学习EXT�W�九(ji��)日：表单入门

菠萝 — Tue, 07 Aug 2007 06:05:00 GMT

摘要�Q?本教�E�教你如何入手去创徏一个基本的表单�?
Author: Shea Frederick
Translater:Hegz
Published: May 05, 2007
Translated:May 14,2007
出处�Q?a >http://www.fleaphp.org.cn/bbs/viewthread.php?tid=906&page=1&extra=page%3D1#pid4736

我徏议下载用于这个例子的一�D늨�序，�q�样可能对你有一些帮助。你也可以找一个有效的例子�?/p>
表单�?br>首先要做的第一件事��是创徏一个表单体�Q�这相当于在HTML中书写一�?
标识�?

var form_employee = new Ext.form.Form({
labelAlign: 'right',
labelWidth: 175,
buttonAlign: 'right'
});
创徏表单字段
表单�C�Z��由name、title、hire_date和active四个表单字段构成。开头的两个表单字段name和title�Q�只是简单的文本字段�Q�我们会用TextField�Ҏ(gu��)��来创建它们�?/p>
重要的配�|�选项是name�Q�定义该选项与HTML中定义一个表单字�D�名几乎一栗��?/p>

var employee_name = new Ext.form.TextField({
fieldLabel: 'Name',
name: 'name',
width:190
});

var employee_title = new Ext.form.TextField({
fieldLabel: 'Title',
name: 'title',
width:190
});
跟着的hire_date字段是一个日期字�D�，我们会用DateField�Ҏ(gu��)��来创建，它会为我们弹��Z��个别致的日期选择器来让我们选择日期�?/p>
format配置选项被用来�ؓPHP指定日期格式标准�Q�PHP的日期格式）。日期格式字�W�串的调整须与你所用的日期格式相匹配�?/p>

var employee_hire_date = new Ext.form.DateField({
fieldLabel: 'Hire Date',
name: 'hire_date',
width:90,
allowBlank:false,
format:'m-d-Y'
});
最后一个表单元素active是一个布?y��u)��(d��ng)��|��我们使用Checkbox�Ҏ(gu��)��来创建�?/p>

var employee_active = new Ext.form.Checkbox({
fieldLabel: 'Active',
name: 'active'
});
完成表单
现在�Q�我们把表单里的所有表单字�D�加入到fieldset中去。当然了�Q�如果你惛_��fieldset的外面进行，可以选择使用add�Ҏ(gu��)��?

form_employee.fieldset(
{legend:'Employee Edit'},
employee_name,
employee_title,
employee_hire_date,
employee_active
)
最后，最不能��的��是submit按钮�Q�它与一��段的错误检��代码块一赯��addButton�Ҏ(gu��)��加进来。当该按钮被点击�Q�就会调用render�Ҏ(gu��)��Q�传入div标识�?#8220;id”�Q�然后在�|�页的div里把表单昄��出来�?/p>

form_employee.addButton('Save', function(){
if (form_employee.isValid()) {
  Ext.MessageBox.alert('Success', 'You have filled out the form correctly.');
}else{
  Ext.MessageBox.alert('Errors', 'Please fix the errors noted.');
}
}, form_employee);

form_employee.render('employee-form');
下一�?/p>
虽然本教�E�让你懂得了如何��d��Z��个表单，但创建出来的表单什么事情也�q�不了。就像一部没有引擎的��汽车——它看�v来可能很漂亮�Q�但不能让你走得更远�?br>

菠萝 2007-08-07 14:05 发表评论

学习EXT�W�九(ji��)日（B):��Z��个表单填充或提交数据

菠萝 — Tue, 07 Aug 2007 06:04:00 GMT

摘要�Q�这个教�E�将指导你如何获取数据到你的表单�q�将�q�些数据提交�?
Author: Shea Frederick
Translater: pplboy
Published: May 22, 2007
Translater Date:May 30.2007

�q�个教程使用了在getting started tutorial教程中��用过�?雇员信息�~�辑表单。如果你仍然不熟�(zh��n)�如何创��Z��个表单，你可以首先看一下这个例子。我��下蝲用于�q�个例子的一�D늨�序，�q�样可能对你有一些帮助。你也可以找一个有效的例子�?/p>
我们��经历��用表单的整个�q�程�Q�从最初的从服务器获取数据填入表单�Q�到��数据返回给服务器。在后端我��用PHP和MySQL, 然而这个例子对于PHP和MySQL来说�q�不是特�D�的�Q�而是只要求你能够从你的服务器��d��和输出JSON数据�?/p>
让我们开始吧
首先我们必须讄��表单的url, �q�是一个能获得POST数据�q�将其写�q�我们的数据库的PHP脚本.

var form_employee = new Ext.form.Form({
...
url:'forms-submit-process.php',
...
});
我们的数据包�?个字�D�：id, name, title, hire_date和active,�q�些字段可以被取回�ƈ攄��C��个数据存储对象（Store�Q�中�?/p>
以下的程序构造了一个数据存储对象，在这个时候没有数据被取回�Q�我们的数据代理�Q�Proxy�Q�对象提交到一个PHP脚本�Q�用来取回数据库id�?4的行 �q�将它�{换成一个JSON字符丌Ӏ?/p>

employee_data = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: 'forms-submit-getdata.php?id=14'}),
reader: new Ext.data.JsonReader({},[ 'id', 'name', 'title', 'hire_date', 'active']),
remoteSort: false
});

接下来要做的是设定我们的事�g监听者来监察什么时候数据被载入�Q?�q�个��保证我们不会在数据被蝲入之前填入表单�?/p>

employee_data.on('load', function() {

// data loaded, do something with it here...

});
当数据被载入后，我们可以取回数据�q�用setValue�Ҏ(gu��)��其填入表单。这里我们用getAt(0) 从我们的数据存储对象里重新取回第一行数据（行zero�Q��?/p>

注意�Q�这里��用的表单和表单字�D�在getting started tutorial中有定义和解释�?/p>

employee_name.setValue(employee_data.getAt(0).data.name);
employee_title.setValue(employee_data.getAt(0).data.title);
employee_hire_date.setValue(employee_data.getAt(0).data.hire_date);
employee_active.setValue(Ext.util.Format.boolean(employee_data.getAt(0).data.active));
我们��要创徏提交按钮�q�添加到表单�Q�记得给来源于表单字�D늚�POST数据讑֮�扩展参数。你��会发现通过行确定字�D�（id�Q�对于让php脚本扑ֈ�需要更新的行非常有用，同时��Z��更好的判断，�q�需要一个action判定�?/p>

我还使用isValid参数来保证表单在提交前符合每一个字�D늚�要求�?/p>

form_employee.addButton('Save', function(){
if (form_employee.isValid()) {
  form_employee.submit({
   params:{
    action:'submit',
    id:employee_data.getAt(0).data.id
   },
   waitMsg:'Saving...'
  });
}else{
  Ext.MessageBox.alert('Errors', 'Please fix the errors noted.');
}
}, form_employee);

form_employee.render('employee-form');
��d��我们的数�?br>现在我们来读取数�?/p>

employee_data.load();
�q�样真的能够惊�h��单的创徏一个可用的表单�Q�与成对的服务器�D�脚本接合，��p��够将数据从数据库获取�q�写入修改后的数据。这些服务端脚本可以��单到只需几行而已�?/p>
接下来是什么？

通常来说�Q�API文�g和例子对于学习怎么样将表单攚w��成你所需要的形式来说是很不错的途径�?br>

菠萝 2007-08-07 14:04 发表评论

菠萝 — Tue, 07 Aug 2007 06:01:00 GMT

�W�一�?�(zh��n)�的HTML模板
�W�一个步骤没有�Q何特别，�q�里的HTML可以说是用来格式化你的数据。花括号里面的关键字��是你数据中的{id},{url} 和{text}的容器（placeholder�Q?。或者用�U�数字{0},{1},{2}来表�C?但是关键字的命名方式会��你的代码更可诅R�?/p>
现在我们加蝲html模板�Q�创��Z��个模板对象（�W�五行）�Q�然后进行编译（�W�六行）。尽��编译模板不是必��ȝ��Q�但是一般情况下总能改善性能的�?/p>

var html = '{text}
';
var tpl =

    new Ext.Template(html);
tpl.compile();
�W�二步，��数据加入到模板�?br>�q�里我们��用append�Ҏ(gu��)��加入两行的数据。正如你所见，元素�?#8220;id”�?#8220;url”�?#8220;text”相对应于上述模板的容器�?/p>

tpl.append('blog-roll', {
     id: 'link1',
     url: 'http://www.jackslocum.com/',
     text: "Jack's Site"
});
tpl.append('blog-roll', {
     id: 'link2',
     url: 'http://www.extjs.com/',
     text: "Jack's New Site"
});

�q�就是模板的基本知识点，对于你来�q�说非常��单吧�Q?/p>
下一�?br>如果你想换换口味�Q�文档区便是一个绝佳的好地斏V��看看范例Feed Viewer�Q�里面就大量使用了模�ѝ�?

菠萝 2007-08-07 14:01 发表评论

菠萝 — Tue, 07 Aug 2007 05:53:00 GMT

Summary摘要�Q�如何利用模板（Templates�Q�的格式化功能和加入�(zh��n)�自定义格式的函�?br>Author: Aaron Conran
Translater:Frank Cheung
Published: May 16, 2007

本教�E�基于Ext的模板引擎展开详述�Q�亦是对 Shea Frederick“模板入门”教程一文的补充。假设读者已�l�初步接触过模板�Q�Templates�Q?和格式化函数的基本语法�ؓ“{VARIABLE:[(可选的参数)]}”�?

正式开�?br>假设我们打算从一变量中，打印出内容，但当中的内容有可能会占用�q�多的空间。对于这�U�情况，通过的办法是对该内容截取�Q�限制在50个英文字�W�内�Q�然后做成连接让用户点击后观察全文。函�?ellipsis" 的功能正是这��P��可限制在��L��字符数内。另外，在截取字�W�串的后面，该函数还会加�?#8220;...“�Q�以�C�实际的内容�q�有更多�?

一个模板如下示�Q?/p>

var myTpl = new Ext.Template('
{content:ellipsis(50)}
Read More
');
通过处理�Q�其中有47个字�W�是属于内容本��n的，另外三个字符�?#8221;...“,一�?0个字�W��?/p>
�q�是一份格式化函数的列表，可用于模板：
ellipsis(length) - 对大于指定长度部分的字符�Ԍ��q�行裁剪�Q�增加省略号�Q?#8220;...”�Q�的昄��。适用于只昄��前N位的字符�Q�然后提供详�l�页面的场合�?
undef -��查一个值是否�ؓunderfined�Q�如果是的�{换�ؓ�I��?
htmlEncode - 转换(&, <, >, and ') 字符
trim - 对一�D�|��本的前后多余的空��D��?
substr(start, length) - �q�回一个从指定位置开始的指定长度的子字符丌Ӏ?
lowercase - �q�回一个字�W�串�Q�该字符串中的字母被转换为小写字母�?
uppercase - �q�回一个字�W�串�Q�该字符串中的字母被转换为大写字母�?
capitalize - �q�回一个字�W�串�Q�该字符串中的第一个字母�{化�ؓ大写字母�Q�剩余的为小写�?
usMoney - 格式化数字到��元货币。如�Q?10.97
date[(format)] - ��一个日期解析成��Z��个特定格式模式的日期。如日期字符串不输入�Q�默认�ؓ“�?�?�q?#8221;
stripTags - 剥去变量的所有HTML标签

�(zh��n)�亦可以创徏自定义的格式化函敎ͼ�具体做法是，在模板的实例上加入新的方法，�l�而在模板上调用，格式化的函数应该像这��L(f��ng)��Q?{VARIABLE:this.}"

�q�是一个简单是实例�Q�对模板实例加入一�?yesNoFormat "的新函数。yesNoFormat 与ColdFusion转换”truthy“函数相类�?�Q�如果是真的输出"Yes",假的输出”No“�?/p>

var testCustomTpl = new Ext.Template('
User: {username} IsRevoked: {revoked:this.yesNoFormat}
');
testCustomTpl.yesNoFormat = function(value) {
return value ? 'Yes' : 'No';
};
testCustomTpl.append(document.body, {username: 'aconran', revoked: 1});
  下一�?br>关于怎么学好EXT�q�个框架我的看法是，在�?zh��n)�熟�(zh��n)�的IDE中打开源码�q�行阅读。保证阁下一定会收获不少技巧和写代码的好习惯，而且极有可能发现新的大陆�Q�还是没有归��的。熟�(zh��n)�模板Templates的简单用法和格式化功能后�Q�就可进入下一步的学习�Q�MasterTemplates。MasterTemplates提供了处�?#8221;子模�?#8220;的功能，以方便从数据库��@环数据，同时亦包含模板（Templates�Q�的所有功能�?/p>

菠萝 2007-08-07 13:53 发表评论

亚洲国产精品一区二区第四页,亚洲天堂一区在线,亚洲国产乱码最新视频

EXT手册�Q�Manual:Core:Working with JSON (Chinese) (�?

中文化问�?�?

一个用ext做的��d����面

下蝲Ext

开始！

响应事�g

学习EXT�W�三�?EXT:Menu�l��g

开始！

创徏���易的菜单

Menu的分配方式：

动态添加菜单按钮到Toolbar

下一步是

学习EXT�W�二�?EXT���介（二）

使用Widgets

MessageBox

Gird

�q�有更多�?.

使用Ajax

教程�Q�Grid�l��g的简易分��?/h2> 概述: 本例���会带你�q�入Grid分页的世�?/p> 原文作者：Shea Frederick 出处 参考图�Q?br> 读者应先下载本例涉及的�C����代码。这里是一个已�l�完成好�?a target=_blank>例子�?/p>

Gird数据

怎么做一个分��늚�Grid

分页栏Toolbar

学习EXT�W�四�?-开始��用Grid

步骤一 定义数据(Data Definition)

单行的XML��h��数据

列模型样�?/strong>

�q�行渲染�Q?/strong>

学习EXT�W�六�?-关于�?w��i)TreePanel(Part 1)

学习EXT�W�六�?-关于�?w��i)TreePanel(Part 2异步获取节点)

学习EXT�W�七�?-关于View&JSONView

{date} by {author} | {comments} Comments

学习EXT�W�七日B-View&JSONView 一个画室网站的案例

学习EXT�W�九(ji��)日：表单入门

学习EXT�W�九(ji��)日（B):��Z��个表单填充或提交数据

一个用ext做的��d��面

创徏��易的菜单

学习EXT�W�二�?EXT��介（二）

教程�Q�Grid�l��g的简易分��?/h2>
概述: 本例��会带你�q�入Grid分页的世�?/p>
原文作者：Shea Frederick 出处

参考图�Q?br>

读者应先下载本例涉及的�C��代码。这里是一个已�l�完成好�?a target=_blank>例子�?/p>

步骤一定义数据(Data Definition)