【View之定义】
  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某君的补充。

代码点评：

1.先看一段简单的

//用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);

//左边动画效果,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，并逐一附加active的事件

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本身就可以获取getTabs,因为Dialog本身就是
唯一的一个Region;
但在LayoutDialog中，Region是多个的，所有要指明哪个一个Region才行
*/


// stoe a refeence to the tabs 获取TABS集合
var tabs = layout.getRegion('center').getTabs();//逐一加入事件
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激活也可以
/*Tips:不能立即激活事件，会点延时，经过多行代码的延时便ok ！用addbufferlistener理论上也可以*/
layout.getRegion('center').getTabs().activate('center'); 

3.View的使用方式

//XML:index方式访问字段；JSON：直接使用字段名
var tpl = new YAHOO.ext.Template(
'<div class="thumb">'+
'<div><img onclick=popupDialog("userfiles/image/'+who+'/{0}",{2},{3}) '+
' src=userfiles/image/lite_'+who+'/{0}></div>' +
'<div>文件大小: {1}</div>'+
'</div>'
);
tpl.compile(); //“编译DOM”加速
var schema = {
tagName: 'row',//Item项
id: 'id',//ID如不需要时，设置空白字符串，不能取消！
fields: ['filename','filesize','width','height']//读取的字段
};
var dm = new YAHOO.ext.grid.XMLDataModel(schema);
var mainView = new YAHOO.ext.View('pic_'+who,
tpl,
dm, {
singleSelect: true,//If JSON,还需指定一个config:jsonRoot
emptyText : '<div style="padding:10px;">没有匹配的内容！</div>'
});
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,用于自定义格式
//如JSON方式直接属性名访问，e.g data.sizeString = formatSize(data.size);
data[1] = formatSize(data[1]);
return data;
};
//用DataModel加载文件，如果是JSONView，这个服务由JSONView本身（UpdateManager）提供
dm.load('xml.asp?who='+who);

4.JSONView的使用方式

var dh = YAHOO.ext.DomHelper;
dh.append(document.body, {tag: 'div', id: 'editUserDialog-user'});
//XML:index方式访问字段；JSON：直接使用字段名
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特有的异常事件
mainView.on('loadexception', function(){onLoadException()}, this, true);
var onLoadException= function(v,o){
alert('Error');
};

5.获取XML/JSON的fields值与分页

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

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

//在Domhelper中“硬”输出click事件
var tpl = new YAHOO.ext.Template( 

'<div class="thumb">'+

'<div><img onclick=popupDialog("userfiles/image/'+who+'/{0}",{2},{3}) '+

' src=userfiles/image/lite_'+who+'/{0}></div>' + 

'<div>文件大小: {1}</div>'+

'</div>'

);

分页：
View的分页视乎应该通过DataModel。

View如何工作？

记得以前如何输出一个记录吗？以网上商店为例子；以前是这样输出一个商品的：

<%
.....
//下列服务端代码为ASP using JScript（依然是JS，I'm a big JS Fan^^）
var str ="";
str+="<td><div id='title'>";
str+=rs("title")+"<\/div>";
str+="<img src="+rs("thumb_image")+">";
str+="<\/td>"
Resposne.Write(str);
.....
%>

很明显，我们最终目的还是要输出HTML,为浏览器渲染(Render)服务。View工作原理也一样，只不过把以前Sever做的事情搬到Cilent来，依靠View来处理（实质上是Domhelper的模版），让浏览器最终渲染输出。

需要你的帮忙：Domhelper

如上述，View的工作离不开DomHelpr。DomHelpr在这里提供"模版Template",并将其编译。见下面代码：

//新建一个Template对象
var tpl = new YAHOO.ext.Template(

'<div class="entry">' + 

'<a class="entry-title" href="{link}">{title}</a>' +

'<h4>{date} by {author} | {comments} Comments</h4>{description}' +

'</div><hr />'

);
tpl.compile(); //compile()的方法，可带来DOM性能的增益
var moreView = new YAHOO.ext.JsonView('entry-list', tpl, {
jsonRoot: 'posts'
});
//又或者隐式创建Template对象
var view = new YAHOO.ext.View('my-element',
'<div id="{0}">{2} - {1}</div>', // auto create template
dataModel, {
singleSelect: true,
selectedClass: 'ydataview-selected'
});

加载数据

VIEW加载数据的方式与JSONView的有所不同：VIEW采用DataModel的load(),JSONView采用UpateManager的load()。下面重点说说JSONView的load()方法：

 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之提示文字

timeout: 30,//超时

scripts: false

});

只有url参数是不可缺省的，其它如 nocache, text and scripts都是可选的。 text和scripts是与UpdateManger实例关联的参数

• params : String/Object
  (optional) The parameters to pass as either a url encoded string "param1=1&param2=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使用点滴

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

b.分页
分页视乎还没有什么好的方案，JACK只提供下面的思路：
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而不是字段？我每次用alert(mainView.jsonData); 结果是“undefined”
如果是获取DataModel，那应该用View对象。出现undefined的原因是load()是异步的，你必须先等待数据load完。如：

mainView.el.getUpdateManager().on('update', function(){
alert(mainView.jsonData);
});

详见http://www.yui-ext.com/forum/viewtopic.php?t=1209

d.学习例子。范例Image Chooser本身就是一个好的学习例子

JSON Format

您可能认为服务输出这样的JSON：

{"user": {"username": "Bob", "birthday": "1976-11-08", "join_date": "2006-08-01", "last_login": "2006-12-03"}}

是正确无误的。但不对，它是不能被处理的。正确的格式应该是：

{"user": [{"username": "Bob", "birthday": "1976-11-08", "join_date": "2006-08-01", "last_login": "2006-12-03"}]}

注意方括号内声明的是数组类型，View渲染方式实际是与DataModel一致的

异步取节点的思路是这样的：
1、先定义一个初始化节点（也可以不定义，看个人需求）
2、yui-ext根据该节点id请求服务器，获得子节点各属性
3、循环

特点：可以在上一级目录中，在服务器端预先将该节点是否有子节点读好（json中的isLeaf属性），虽然但数据库将多承担一些压力，但用个count(*)不会造成太大负担（除非查询条件异常复杂），也可以不读，即把所有isLeaf设置为false。


问题：
1、目前还无法进行reload，即每次打开节点都重新读取一次
2、样式还有些问题，无法通过node. childNodes[i]设置子节点的style，所以无法改变最后一级元素的style（也许是通过别的途径改变style的？）

示例：
先给出一段js代码，可以结合官方的demo（http://yui-ext.com/playpen/yui-ext.0.40/examples/tree/reorder.html）看看：

//定义根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,
//这个dataUrl是初始化树所用的url，你也可以不写或定义一个静态json文件，还可以什么都不写全部依赖于第二个url自动产生，视具体需求而定
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);
//根据当前节点id，动态拼出请求服务器的路径
//每产生一个节点，指向一个事件的引用，将新建loader.dataUrl（具体事件的机制还需要再研究）
//注意调用函数是beforeload
tree.on('beforeload', function(node){
tree.loader.dataUrl = 'calendarDetail.do?method=getDayDetailJSON&parentId='+node.id;
});
//这里演示一个自定义json的用法(description为自定义json的key)
//以及如何定义某节点的style(node.ui.textNode.style.title)
//具体可以看ui这个类
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：
[{"text":"衣服类", 
"id":"5",     //注意：这里是该节点的id，拼连接时要用到，与官方的json有所不同
"leaf":true,
"cls":"file",
"description":"这里是衣服类"}]   //自定义只需要这样就可以了

给出java产生json的代码逻辑片断：

……
//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的节点，具体没有给出
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
……
本文转自:http://www.ajaxjs.com/yuicn/article.asp?id=20070241

一、加载一个同步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

});



// 设置根节点

var root = new Tree.AsyncTreeNode({

text: 'Frank的作品',  //根节点文字

draggable:false, //根节点是否可拖放

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调用这个get_nodes.asp文件，假设服务器返回这样一个JSON(有关JSON的介绍:http://www.json.org/json-zh.html)：

[{
"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"
} ]

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;

解释：
“text”-->显示的文本
"id"-->id值
“leaf”-->Boolean值，如果“叶子”是真的话，则不能包含子节点Children nodes
"cls"-->选用的样式，通常在这里选定图标
”href“-->指定的url，还有一个”hrefTarget“的属性
另外，除了以上的属性，您还可以在JSON加入任何的属性，作为节点的属性，见Jack原话：
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会继续解释这个问题。
FQA常见问题：

1.Tree支持XML数据交换吗？
A:暂不支持，据FOURM上的话，以后会提供支持，见：
can I use xml instead of json for sending nodes hirerachy ？
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.我想用单击代替双击展开子节点，可以吗？
A:可以，见：

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

3.事件处理的几种情形：
A: a.当加入某个节点时，为其增加事件

tree.on('append', function(tree, node){
if(node.id == 'foo'){
// 这里加入你的事件（如click）侦听器（addListener()）
}
});

b.针对某个节点的单击事件

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

c.针对某个区域（集合）的事件

// 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中的自定义字段（或称作参数 parameters）
A:JSON对象已经被构建函数 construction传递到TreeNode中，作为node.attributes 出现，所以调用属性node.attributes 便可获取。详见：http://www.yui-ext.com/forum/viewtopic.php?t=2253

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

 本文转自:http://www.ajaxjs.com/yuicn/article.asp?id=20070206

本例中的服务端语言是PHP,数据库是MySQL，用来导出一些随机的数据。下列脚本的作用是，获取我们想要的数据，同时这些数据是已分好页的数据。分页的参数是由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).'})';

由于每个后台开发的环境都不尽相同，所以这里的服务端代码就不细究了。

怎么做一个分页的Grid

本例采用的是ScriptTagProxy，原因是 范例代码 和 服务端代码 不是在同一个服务器上（译注：即“跨域”），而大多数的情况是，在同一个服务器上得到数据，直接用HttpProxy就可以了。

使用DataStore与平时唯一不同的地方，便是需要设置totalProerty属性。本例中，我们从服务端的脚本计算出“total”这个值，告诉DataStore总共有多少个记录，这里指的是所有的记录数。

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

这里加入一个分页栏到Grid的面板中，--差不多完成喽。

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"
});

最后传入start和limit参数以初始化数据。

ds.load({params:{start:0, limit:25}});

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

本文转自:http://www.ajaxjs.com/yuicn/article.asp?id=20076012

本文涉及的范例代码，可以在这里下载。一个完成好的例子可在这里找到。

步骤一 定义数据(Data Definition)

首先要让Grid知道XML文档定义了每一行是什么数据。正如所见，我们命名了"item"在下面的XML样本中。

单行的XML样本数据

<Item>
<ASIN>0446613657</ASIN>
<DetailPageURL>http://www.amazon[*SNIP*]JVQEG2</DetailPageURL>
<ItemAttributes>
<Author>Sidney Sheldon</Author>
<Manufacturer>Warner Books</Manufacturer>
<ProductGroup>Book</ProductGroup>
<Title>Are You Afraid of the Dark?</Title>
</ItemAttributes>
</Item>

接着需要定义某一列为“统一标识（Unique Identifier）”,即ID,根据“id"所设置的那个节点来读取值（样本代码第九行）。本例中的样本数据是”ASIN"列。

数据定义的最后部分就是指定你需要显示的字段(Fields),把这些字段放到一个数组之中，并保证这些字段与你的XML数据中元素名称是一致的，而且还要注意先后顺序，这里的顺序不需要和XML文件中顺序一致。

    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）

下一步便是定义Column Model 列模型。简单地说，就是通过一些属性的设置，决定每一列怎么控制或怎么显示，这是一个由每列的配置参数组成的数组。注意，出现的顺序应该与刚才定义“字段”的数组一致。较常见的参数通常是header和width，所以你会觉得这两项是必须要设置的，然而宽度（width）其实不总是需要的，因为稍后我们将使用autoWidth/Height来代替。

列模型样本

	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，渲染结果，然后加载来自DataStore的数据，这些就是你让Grid工作起来的所有因素！

进行渲染！

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

本文转自:http://www.ajaxjs.com/yuicn/article.asp?id=20075866

这篇教程中，我们将学习使用Ext的菜单器件（Menu Widgets)。假设读者已经阅读过Ext简介一文，并懂得一些Ext的基本相关知识。菜单器件是Ext库中较迟实现的器件。它由几个类联合构成，使得创建一个菜单只需若干代码块（Block of code）。

开始！

第一步要做的是，下载本教程的示例文件。Zip文件包括三个文件：ExtMenu.html,、ExtMenu.js、ExtMenu.css、和list-items.gif。解包这四个文件到Ext的安装目录中（例如，Ext是在“C:\code\Ext\v1.0”中，那应该在"v1.0"里面新建目录“menututorial”。双击ExtMenu.htm，接着你的浏览器打开启动页面，应该会有一条消息告诉你配置已完毕。如果是一个Javascript错误，请按照页面上的指引操作。

在你常用的IDE中或文本编辑器中，打开ExtMenu.js看看：

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

在Ext的介绍中，我们讨论过使用Ext的原因和Ext.onReady()函数的功能。

创建简易的菜单

先看看怎么做一个基本的菜单，然后再讨论代码中的各个组件和知识点。加入下列代码到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');
}

各种Item的类型

属性“items”可能是最重要的属性当中的一个。留意一下语法其实我们是将一个数组作为值（value)传到属性中去。数组里的数据就是我们想要在菜单中出现的每一项。每本例中我们放了六个菜单项，但何解每项的语法（Syntax）都不尽相同呢？第一项是一串Object Literal，包含一组我们可配置的name/value。Ext的底层库会为这串Object Literal按其配置默认地创建item对象。接着第二项是Item对象本身，后面跟着分隔符，最后两个是单选框项。整个过程演示了Ext Widget如何动态的运行。下例各项可填入到数组中：

{text: 'Foo'}                       // Ext 转换这个配置对象到menu item
'Straight Text'                     //文本或原始html (纯文字)
'-'                                 // 创建分隔符
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')) //允许你加入任何元素

Item属性

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

text: 'An item',
handler: clickHandler

第一个是Item的文本。第二个是当用户单击一单击Item所触发的事件处理函数（event handler function）。本例中我们将函数clickHandler()和checkHandler()定义在代码的最后。作为演示用途，这仅仅是用alert()通知你有一个单击的消息。
其它有用的属性是：

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

完整的item属性列表在Menu Item文档中。

在UI中摆放菜单

So,创建好的Menu对象已经有两个基本的item了，然而我们怎么把它们摆放到页面中呢?在UI中一个menu可以分配到多个位置（同一个对象，不同位置多次使用），这正是Ext如此强大的原因：每一个器件（widget）切成“一块一快”的类，来构建整个面向对象的动态结构（Structure）。这意味着menu可用于不同的场合。我们可将menu放到有按钮的toolbar中，或用页面中的一个按钮来展开menu，甚至可在Ext的其它器件中（widgets）使用menu作为上下文菜单（Context Menu）。

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

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

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

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

Menu的分配方式：

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

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);
}

注意：留意几种不同的方法加入子菜单！还有even handing函数和Coloritem、DataMenu匿名函数之间的区别。

上文提及menu可摆放在UI的任何位置，这里将为你演示menu如何与Toolbars、MeneuButtons、Context Menus's配合工作，包括一些有用的方法和动态添加的功能。

new Ext.MenuButton('menubutton', {text:'Menu Button 1', menu: dateMenu});

动态添加菜单按钮到Toolbar

这条Toolbar有两个按钮。一个分隔符，和一个纯图标的按钮（附Quicktips）。你可尝试这样做，把zip文件中.gif加入

Ext.QuickTips.init();
tb.add('-', {
icon: 'list-items.gif', //图标可单行显示
cls: 'x-btn-icon',      // 纯图标
tooltip: 'Quick Tips

提示文字'
});

更方便的是

一些代码片段，有助你提高效率，留意注释！

// 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访问
menu.items.get('disableMe').disable();

本文转自:http://www.ajaxjs.com/yuicn/article.asp?id=20075196

除了我们已经讨论过的核心JavaScript库，现在的Ext亦包括了一系列的最前端的JavaScirptUI组件库。文本以一个最常用的widget为例子，作简单的介绍。

MessageBox

比起略为沉闷的“HelloWolrd”消息窗口，我们做少许变化，前面我们写的代码是，单击某个段落便会高亮显示，现在是单击段落，在消息窗口中显示段落内容出来。
在上面的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
});

这里有些新的概念讨论一下。在第一行中我们创建了一个局部变量（Local Variable）来保存某个元素的引用，即被单击的那个DOM节点（本例中，我们总是段落paragrah,事因我们已经定义该事件与<p>标签发生关联的了）。为什么要这样做呢？嗯...观察上面的代码，我们需要引用同一元素来高亮显示，在MessageBox中也是引用同一元素作为参数使用。
一般来说，多次重复使用同一值（Value）或对象，是一个不好的方式，所以，作为一个好的OOP开发者，应该是将其分配到一个局部变量中，反复使用这变量！

现在，观察MessageBox的调用，准备作为阐述新概念的演示用。乍一看，这像一连串的参数传入到方法中，但仔细看，这是一个非常特别的语法。实际上，传入到MessageBox.show的只有一个参数：一个Object literal,包含一组属性和属性值。在Javascript中，Object Literal是动态的，你可在任何时候用{和}创建一个典型的对象(object)。其中的字符由一系列的name/value组成的属性，属性的格式是[property name]:[property value]。在整个Ext中，你将会经常遇到这种模式的语法，因此你应该消耗掉这知识！
使用Object Literal的原因是什么呢？主要的原因是“韧性（flexibility）"，随时可新增、删除属性，亦可不管顺序地插入。而方法不需要改变。这也是多个参数的情况下，为最终开发者带来不少的方便（本例中的MessageBox.show())。例如，我们说这儿的foo.action方法，有四个参数，而只有一个是你必须传入的。本例中，你想像中的代码可能会是这样的foo.action(null, null, null, 'hello').,若果那方法用Object Literal来写，却是这样， foo.action({ param4: 'hello' })，这更易用和易读。

Gird

Gird是Ext中人们最想先睹为快的Widgets之一，也是最流行之一。好，让我们看看怎么轻松地创建一个Gird并运行。用下列代码替换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();
});

这看上去很复杂，但实际上加起来，只有七行代码。第一行创建数组并作为数据源。实际案例中，你很可能从数据库、或者WebService那里得到动态的数据。接着，我们创建并加载data store， data store将会告诉Ext的底层库接手处理和格式化这些数据。接着，我们定义一个column模型，用来轻松地调配Gird的每一列参数。最后我们生成这个Gird,传入data store和column模型两个对象，进行渲染并选好第一行。不是太困难吧？

当然，你可能对这段代码的某些细节，并不完全掌握其中的含义（像MemoryProxy究竟是什么？）但先不要紧，这个例子的目的是告诉你，用少量的代码，创建一个富界面的多功能的UI组件而已——这是完全可能的，更多细节的内容，留给读者你自己学习吧。这儿有许多学习Grid的资源。Ext Grid教程、交叉Gird演示和Gird API文档。

还有更多的..

这只是冰山一角。还有一打的UI Widgets可以供调用，如 layouts, tabs, menus, toolbars, dialogs, tree view等等。请参阅API文档中范例演示。

使用Ajax

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

<div id="msg" style="visibility: hidden"></div>
Name: <input type="text" id="name" /><br />
<input type="button" id="oKButton" value="OK" />

接着，我们加入这些处理交换数据的JavaScript代码到文件ExtStart.js中(用下面的代码覆盖)：

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();
});
});

这种模式看起来已经比较熟悉了吧！先获取按钮元素，加入单击事件的监听。在事件处理器中（event handler），我们使用一个负责处理Ajax请求、接受响应（Response）和更新另一个元素的Ext内建类，称作UpdateManager。UpdateManager可以直接使用，或者和我们现在的做法一样，通过Element的load方法来访问（本例中该元素是“msg“的div）。当使用Element.load方法，请求（request)会被加工处理后发送，等待服务器的响应（Response），来自动替换元素的innerHTML。简单传入服务器url地址，加上字符串参数，便可以处理这个请求（本例中，参数值来自“name”元素的value),而text值就是请求发送时提示的文本，完毕后显示那个msg的div（因为开始时默认隐藏）。当然，和大多数Ext组件一样，UpdateManager有许多的参数可选，不同的Ajax请求有不同的方案。而这里仅演示最简单的那种。

<? if(isset($_GET['name'])) {

echo 'From Server: '.$_GET['name'];

}

?>

protected void Page_Load(object sender, EventArgs e)

{

if (Request["name"] != null)

{

Response.Write("From Server: " + Request["name"]);

Response.End();

}

}

<cfif StructKeyExists(url, "name")>

<cfoutput>From Server: #url.name#</cfoutput>

</cfif>

最后一个关于Ajax的谜题就是，服务器实际处理请求和返回（Resposne）的具体过程。这个过程会是一个服务端页面，一个Servlet，一个Http处理器，一个WebService,甚至是Perl或CGI脚本，即任何一个服务器都可以处理http请求。无法预料的是，服务器返回什么是服务器的事情，无法给一个标准的例子来覆盖所有的可能性。(这段代码输出刚才我们传入'name'的那个值到客户端，即发送什么，返回什么）。

使用Ajax的真正挑战，是需经过适当处理过的手工代码，并相应格式化为服务端可用接受的数据结构。有几种格式供人们选择（最常用为JSON/XML)。正因Ext是一种与服务器中立的语言，使得其它特定语言的库亦可用于Ext处理Ajax服务。只要页面接受到结果是合适的数据格式，Ext绝不会过问服务器的事情！要全面讨论这个问题，已超出本文的范围。

本文转自:http://www.ajaxjs.com/yuicn/article.asp?id=20072736

下载Ext

如果你未曾下载过，那应从这里下载最新版本的Ext http://www.extjs.com/downloads。

针对你的下载需求，有几个不同的弹性选项。通常地，最稳定的版本，是较多人的选择。下载解包后，那个example文件夹便是一个探索Ext的好地方！

开始！

我们将使用Ext，来完成一些JavaScript任务。

第一步要做的是，下载本教程的示例文件。Zip文件包括三个文件：ExtStart.html, ExtStart.js和ExtStart.css。解包这三个文件到Ext的安装目录中（例如，Ext是在“C:\code\Ext\v1.0”中，那应该在"v1.0"里面新建目录“tutorial”。双击ExtStart.htm，接着你的浏览器打开启动页面，应该会有一条消息告诉你配置已完毕。如果是一个Javascript错误，请按照页面上的指引操作。

在你常用的IDE中或文本编辑器中，打开ExtStart.js看看：

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

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

Element：Ext的核心

大多数的JavaScript操作都需要获取页面上的某个元素（reference）,好让你来做有趣的事情。传统的JavaScript方法，是通过ID获取Dom节点的：

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

这毫无问题，不过这样单单返回一个对象（DOM节点），用起来并不是太强大和好用。为了要用那节点干点事情，你将会要写不少自定义的代码；另外，对于不同类型浏览器之间的差异，要你处理起来可真头大了。

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

由ID获取一个Ext Element如下（首页ExtStart.htm包含一个div，ID名字为“myDiv”，然后，在ExtStart.js中加入下列语句）：

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

再回头看看Element对象，发现什么有趣的东东呢？

• Element包含了常见的DOM方法和属性，提供一个快捷的、统一的、跨浏览器的接口（若使用Element.dom的话，就可以直接访问底层DOM的节点。）；
• Element.get()方法内置缓存处理（Cache)，多次访问同一对象效率上有极大优势；
• 内置常用的DOM节点的动作，并且是跨浏览器的定位的位置、大小、动画、拖放等等（add/remove CSS classes, add/remove event handlers, positioning, sizing, animation, drag/drop）。

这意味着你可用最小的代码来做各种各样的事情，这里仅仅是一个简单的例子（完整的列表在ElementAPI中）。

继续在ExtStart.js中，在刚才我们获取好myDiv的位置中加入：

myDiv.highlight();      //黄色高亮显示然后渐退
myDiv.addClass('red');  // 添加自定义CSS类 (在ExtStart.css定义)
myDiv.center();         //在视图中将元素居中
myDiv.setOpacity(.25);  // 使元素半透明

获取多个DOM的节点

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

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

标签），没有一个是有ID的，而你想轻松地通过一次操作马上获取每一段，全体执行它们的动作，可以这样做：

// 每段高亮显示
Ext.select('p').highlight();

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

响应事件

到这范例为止，我们所写的代码都是放在onReady中，即当页面加载后总会立即执行，功能较单一——这样的话，你便知道，如何响应某个动作或事件来执行你希望做的事情，做法是，先分配一个function，再定义一个event handler事件处理器来响应。我们由这个简单的范例开始，打开ExtStart.htm，编辑下列的代码：

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

加载好页面，代码依然会执行，不过区别是，包含alert()的function是已定义好的，但它不会立即地被执行，是分配到按钮的单击事件中。用浅显的文字解释，就是：获取ID为'myDottom'元素的引用，监听任何发生元素被单击的情况，并分配一个function,以准备任何单击元素的情况。

正路来说，Element.select也能做同样的事情，即作用在获取一组元素上。下一例中，演示了页面中的某一段落被单击后，便有弹出窗口：

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

这两个例子中，事件处理的function均是简单几句，没有函数的名称，这种类型函数称为“匿名函数（anonymous function）”，即是没有名的的函数。你也可以分配一个有名字的event handler,这对于代码的重用或多个事件很有用。下一例等效于上一例：

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

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

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

注意指定的是DOM节点，所以我们首先将其恢复成为适当的元素，然后执行欲完成的事件，这个例子中，我们看见段落是高亮显示的。

本文转自:http://www.ajaxjs.com/yuicn/article.asp?id=20071683