Ext框架学习(四) XTemplate和cookies

在学习了之前的几个主题后,现在学个更酷的。
在这次,我们将学习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>&nbsp;&nbsp;',
                    '<span class="x-editable">{UnitPrice}.00元</span>&nbsp;&nbsp;',
                    '<span class="x-editable">{CategoryID}</span>&nbsp;&nbsp;',
                    '<a itemname="{ItemName}" itemid="{ItemID}" picturepath="{PicturePath}" unitprice="{UnitPrice}" href="Purchase/ShoppingCart.aspx?ItemID={ItemID}" onclick="document.additem(this);" target="_blank">购买<a/>',
                    '&nbsp;&nbsp;<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/>'这里,我怎么点也链接不到我想去的那个页面,只能通过右键-->打开来打开页面,太痛苦了。大家知道为什么吗  告诉我,我快哭了。