学习YUI.Ext第七日-View&JSONView Part Two-一个画室网站的案例_YUI.Ext相关

之前在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(
	'<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.');
});

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

//在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。但我没成功过。如知道缘由的朋友恳请告之。
http://www.ajaxjs.com/yuicn/article.asp?id=20070239

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索Part
,以便于您获取更多的相关知识。

时间: 2024-10-27 10:28:53

学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例_YUI.Ext相关的相关文章

学习YUI.Ext 第七天--关于View&amp;amp;JSONView_YUI.Ext相关

展现一条一条的二维关系的数据,我们可以使用GIRD组件. 但有些场合,如产品展示,画册,我们可以使用View组件,来展示"矩阵"式的数据. View的数据源来自DataModel对象,即包含XMLDataModel和JSONDataModel.尽管View支持JSON,但如果不是用于DataModel,View的子类JSONView更适用,因为它提供更多的事件和方法.一般来说,View用于XML数据源:JSONView用于JSON数据源. View如何工作? 记得以前如何输出一个记录吗

学习YUI.Ext 第六天--关于树TreePanel(Part 1)_YUI.Ext相关

学习YUI.Ext 第五天--关于树TreePanel(Part 1)  效果演示:http://www.ajaxjs.com/yuicn/demos/order_tree.asp     树组件是YUI.Ext 0.40 新增的组件.虽然YUI已经自带有TREE VIEW的组件,但JACK还是决定重新开发.具体原因在http://www.ajaxjs.com/yuicn/article.asp?id=20070245(翻译文章)或http://www.jackslocum.com/blog/2

学习YUI.Ext基础第一天_YUI.Ext相关

导言 翻了翻以前的旧贴子,有值得回味的地方共分享: Post1: ................. 我们现在的大量应用依赖于浏览器(主要是 IE)的脚本处理能力,在有些老机器上跑的时候确实会略显缓慢,但是目前的主流机型处理起来已经没有任何问题了.我们设计了一整套的 Web 开发框架,这套框架将随着应用的锤炼而越来越稳定.JavaScript 用的不好容易造成 IE 的崩溃,我们是靠提高代码的重用度来解决这个问题的,因为重用度越高的代码往往越稳定. 有些眼高手低的人往往凭第一眼印象就把 Java

Gird事件机制初级读本_YUI.Ext相关

原文地址 文章日期:2006/09/25/  新版.32 的YUI-EXT包含了GIRD事件机制的重要升级.许多新事件现在可以用了,监听事件的机制也改变了(尽管它仍然向后兼容). 侦听事件的方法 鉴于 YAHOO.util.CustomEvent只提供简单的访问,Grid和相关的对象扩展了新的方法来侦听事件,这些事件你应该是熟悉的.它们是: addListener(eventName, fn, scope, override) - "eventName" should be one o

Javascript的一种模块模式_YUI.Ext相关

Douglas Crockford已经传授了一个有用的单例模式(singleton pattern)实现此规则,我认为他的模式有益于你基于YUI的那些应用.Douglas叫它模块模式(module pattern).它是如下工作的: 创建一个命名空间对象:如果你使用YUI,可以用YAHOO.namespace()方法: YAHOO.namespace("myProject");这分配了一个空的myProject对象,是YAHOO的一个成员(如 果myProject已存在的话,则不会被覆

android-Android:如何在通过一个View发送数据给另一个View,然后更新另一个view的界面

问题描述 Android:如何在通过一个View发送数据给另一个View,然后更新另一个view的界面 如图!K线图是一个继承了View的子类,成交量也是一个继承了View的子类,两个子类都有一个同样的成员变量--K线个数,在屏幕上放大或缩小K线图的K线个数,如何把K线图中的K线个数传递给成交量,让成交量也显示同样的K线数呢? 解决方案 http://www.cnblogs.com/xiaoluo501395377/p/3417048.html 解决方案二: View 为什么要传递数据 ? Vi

使用EXT实现无刷新动态调用股票信息_YUI.Ext相关

说句老实话,我目前还对Ext技术不是很熟,所以写的代码自己也觉得怪怪的,有什么不对的地方,还望赐教.使用的Ext版本是ext-2.2,下载地址为:http://www.extjs.com/products/extjs/download.php下载Ext JS 2.2 SDK,解压后拷贝resources文件夹至工作目录. 在resources文件夹下新建jscript文件夹,并拷贝ext根目录下ext-all.js文件及adapter\ext\ext-base.js文件至jscript文件夹下,

Ext面向对象开发实践代码第1/2页_YUI.Ext相关

示例程序简述: 这个Demo为了演示如将使用GridPanel显示数据,并为GridPanel添加工具条按钮,提供弹出式窗体新增数据. 使用到的Ext组件 这个Demo涉及到Ext中的GridPanel,FormPanel和Window三个组件.效果图现在开始讲解代码,首先看一下创建GridPanel的代码片段 复制代码 代码如下: //定义数据列表面板类 PersonListGridPanel = Ext.extend(Ext.grid.GridPanel, { insertWin: null

ext读取两种结构的xml的代码_YUI.Ext相关

<?xml version="1.0" encoding="utf-8" ?> <list> <software> <name>软件1</name> <icon>1.gif</icon> </software> <software> <name>控件2</name> <icon>2.gif</icon> <