tpl模板使用

最新推荐文章于 2024-07-26 08:01:12 发布

nankaisoftware

最新推荐文章于 2024-07-26 08:01:12 发布

阅读量2.2k

点赞数

文章标签： class function 数据库 div html layout

本文介绍如何在ExtJS中使用自定义模板展示数据，并通过Ajax从后台获取及操作数据。同时，还介绍了如何在点击事件中传递参数及设置和读取cookies的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在学习了之前的几个主题后,现在学个更酷的。在这次,我们将学习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/>'这里,我怎么点也链接不到我想去的那个页面,只能通过右键-->打开来打开页面,太痛苦了