学习YUI.Ext第七日-View&JSONViewPartTwo-一个画室网站的案例

之前在Part1简单介绍了Veiw和JSONView。今天这里小弟为大家说说应用的案例，原本Jack的ImageChooser是一个非常好的案例，当中包含Jack大量的奇技淫巧，不过正因为这样，过于深奥，小弟我亦不能全盘吃透，只挑其“勃大茎深”之处，与君共勉之！
本文包含四大知识点：1.在LayoutDialog中加入Tabs；2.View的使用方式；3.JSONView的使用方式;4.获取XML/JSON的fields值与分页

演示地址

【View之定义】
  AViewisgenerallyusedtobuildaquicktemplate-baseddisplayofdatamodel,ratherthanbuildingamorecomplexgrid.Ithnkthere"sablogpostthatillustratesdoingthiswithJSONdata.Templatescanbeusedforanyrepetitioushtmlcreation,notnecessarilytiedtoadatamodel.
主要的意思是View用于展示DataModel的数据，Part1已经说过。这里是来自fourm某君的补充。

代码点评：

1.先看一段简单的

	
//用yui.ext做翻转按钮,supereasy(美工最爱!?^^)
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()负责轮换效果
varluo=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的事件

			
varcenter=layout.getRegion("center");
vartab1=newYAHOO.ext.ContentPanel("luo",{title:"罗老师作品"});
center.add(tab1);
center.add(newYAHOO.ext.ContentPanel("chen",{title:"陈老师作品"}));


//center.on("panelactivated",function(){
//alert(center.titleTextEl);
//},this,true);
//center.showPanel("center");
/*twowaystoactivatethetabs.andtabs=manyCPs
如果在BasicDialog中，只需要dialog本身就可以获取getTabs,因为Dialog本身就是
唯一的一个Region;
但在LayoutDialog中，Region是多个的，所有要指明哪个一个Region才行
*/


//stoearefeencetothetabs获取TABS集合
vartabs=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：直接使用字段名
vartpl=newYAHOO.ext.Template(
	"<divclass="thumb">"+
	"<div><imgonclick=popupDialog("userfiles/image/"+who+"/{0}",{2},{3})"+
	"src=userfiles/image/lite_"+who+"/{0}></div>"+
	"<div>文件大小:{1}</div>"+
	"</div>"
);
tpl.compile();//“编译DOM”加速

varschema={
	tagName:"row",//Item项
	id:"id",//ID如不需要时，设置空白字符串，不能取消！
	fields:["filename","filesize","width","height"]//读取的字段
};
vardm=newYAHOO.ext.grid.XMLDataModel(schema);
varmainView=newYAHOO.ext.View("pic_"+who,
tpl,
dm,{
	singleSelect:true,//IfJSON,还需指定一个config:jsonRoot
	emptyText:"<divstyle="padding:10px;">没有匹配的内容！</div>"
});
dm.on("load",function(){},this,true);
mainView.on("click",function(vw,index,node,e){
	//alert("Node""+node[]+""atindex:"+index+"wasclicked.")
},this,true);
mainView.prepareData=function(data){
	//prepare,用于自定义格式
	//如JSON方式直接属性名访问，e.gdata.sizeString=formatSize(data.size);
	data[1]=formatSize(data[1]);
	returndata;
};
//用DataModel加载文件，如果是JSONView，这个服务由JSONView本身（UpdateManager）提供
dm.load("xml.asp?who="+who);	

4.JSONView的使用方式

vardh=YAHOO.ext.DomHelper;
dh.append(document.body,{tag:"div",id:"editUserDialog-user"});
//XML:index方式访问字段；JSON：直接使用字段名
vartpl=newYAHOO.ext.Template("
Username:{username}
"+
"
Birthday:{birthday}
"+
"
MemberSince:{join_date}
"+
"
LastLogin:{last_login}
");
tpl.compile();
varmainView=newYAHOO.ext.JsonView("pic",
tpl,{
singleSelect:true,
jsonRoot:"user",
emptyText:"Noimagesmatchthespecifiedfilter