之前在part 1简单介绍了veiw和jsonview。今天这里小弟为大家说说应用的案例，原本jack的image chooser是一个非常好的案例，当中包含jack大量的奇技淫巧，不过正因为这样，过于深奥，小弟我亦不能全盘吃透，只挑其“勃大茎深”之处，与君共勉之！
本文包含四大知识点：1.在layoutdialog中加入tabs；2.view的使用方式；3.jsonview的使用方式;4.获取xml/json的fields值与分页
演示地址
【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( ''+ '
' + '文件大小: {1}
'+ '
'); 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 : '没有匹配的内容！
'}); 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.');});
可得到index但node.id无法获取。我只好用较丑陋的方式实现： //在domhelper中“硬”输出click事件var tpl = new yahoo.ext.template(
''+
' ' src=userfiles/image/lite_'+who+'/{0}>
' +
'文件大小: {1}
'+
'
'
);
分页：
view的分页视乎应该通过datamodel。但我没成功过。如知道缘由的朋友恳请告之。
http://www.ajaxjs.com/yuicn/article.asp?id=20070239