在学习了之前的几个主题后,现在学个更酷的。
在这次,我们将学习Ext中如何使用自定义的模版来展示数据,学会用 Ajax去后台读取并操作返回的数据,学会如何设置和读取 cookies.
首先还是先看一段代码
var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap" id="{ItemName}">',
'<div class="thumb"><a href="Purchase/ItemDetail.aspx?ItemID={ItemID}"><img src="{PicturePath}" title="{ItemName}"></a></div>',
'<span class="x-editable">{ItemName}</span> ',
'<span class="x-editable">{UnitPrice}.00元</span> ',
'<span class="x-editable">{CategoryID}</span> ',
'<a itemname="{ItemName}" itemid="{ItemID}" picturepath="{PicturePath}" unitprice="{UnitPrice}" href="Purchase/ShoppingCart.aspx?ItemID={ItemID}" onclick="document.additem(this);" target="_blank">购买<a/>',
' <a href="#">加入收藏夹<a/>', '</div>', '</tpl>',
'<div class="x-clear"></div>');
这里,我们定义了一个XTemplate,大家可以看到,这是纯html啊,呵呵 这样,我们就可以在这随意的写,想怎么写，就怎么写.只要使用{}就可以读出这个xTemplate所在的dataview的store里的数据域了。爽吧?这里有个小技巧.如果想在onclick等事件里写一些参数传进去,可能需要一些转义字符,如果你懒,也可以象我一样:看到那个<a>了没有,我是这样写的document.additem(this),这样写一个方法,然后在<a>中定义一些你需要的属性, 比如 itemname ={itemname},然后就可以在自定义的方法里引用了。我这里的方法定义如下:
document.additem = function(obj) 
{
Common.intoCart(obj.getAttribute('itemid'), 1, obj
.getAttribute('itemname'), obj
.getAttribute('picturepath'), obj
.getAttribute('unitprice'))
if ((Ext.state.Manager.get("customerid") != "00000000-0000-0000-0000-000000000000")
&& (Ext.state.Manager.get("customerid") != undefined)) {
// 已登陆，则要把该用户的购物车存入数据库
Ext.Ajax.request({
url : '../Handler/AddCartItemHandler.ashx?ItemID='
+ getAttribute('itemid') + '&ShoppingCartID='
+ Ext.state.Manager.get("customerid"),
success : function(response) {
alert("添加入购物车成功！")
}
})
}
};
这里的document是为了避免找不到这个方法,因为之前出现additem未定义这样的错误,到现在也不知道为什么.加了document.的引用就好了。有知道的可要告诉我啊 ~~~~thanks!~ getAttribute(itemname)是<a>的方法, 它可以引用到<a>中自定义的属性,似乎是比较简单的html,我之前却不懂,这很有用噢,呵呵 Common.intoCart是码农同志写的，把一个商品加入购物车了。Ext.state.Manager.get(customerid)是取一个cookie的值,因为这个值是guid的，所以就那么判断了.....
然后通过Ext.Ajax.request传回后台处理,把这个item加入到该用户的购物车里(因为用户已经登陆,所以要存入数据库了).
顺便说一句Ext.state.Manager.set方法有两个参数,一个是cookie名,一个是值,set(name,value)就可以了。
最后,使用panel引用这个xtemplate,代码如下
var item1panel = new Ext.Panel({
id : 'images-view',
frame : true,
autoHeight : true,
collapsible : true,
layout : 'column',
title : '最新汽车产品',
items : new Ext.DataView({
store : store,
tpl : tpl,
autoHeight : true,
multiSelect : true,
overClass : 'x-view-over',
itemSelector : 'div.thumb-wrap',
emptyText : 'No images to display'
})
});
tpl就是之前定义的那个XTemplate,
store的定义如下:
var store = new Ext.data.Store({
url : 'Handler/Handler.ashx',
reader : new Ext.data.JsonReader({
id : 'ItemID',
fields : [{
name : 'ItemID'
}, {
name : 'UnitPrice'
}, {
name : 'ItemName'
}, {
name : 'CategoryID'
}, {
name : 'PicturePath'
}]
})
});
简单的例子就完了，现在还有个问题,就是在
'<a itemname="{ItemName}" itemid="{ItemID}" picturepath="{PicturePath}" unitprice="{UnitPrice}" href="Purchase/ShoppingCart.aspx?ItemID={ItemID}" onclick="document.additem(this);" target="_blank">购买<a/>'这里,我怎么点也链接不到我想去的那个页面,只能通过右键-->打开来打开页面,太痛苦了。大家知道为什么吗 告诉我,我快哭了。