ExtJS 技巧笔记

Js代码　　　

//XTemplate的使用示例（读取store加载的数据来渲染）　
{"root":[{"date":"2009-09-07T15:52:45","sender":"廖瀚卿","text":"你好asdf"},{"date":"2009-09-07T15:52:51","sender":"asdf","text":"你好廖瀚卿"},{"date":"2009-09-07T15:52:59","sender":"asdf","text":"我这个是测试的，你那里能看到吗？"},{"date":"2009-09-07T15:53:09","sender":"廖瀚卿","text":"能看到，很不错哦：）"},{"date":"2009-09-07T15:53:23","sender":"asdf","text":"鸭版斑斑啦"},{"date":"2009-09-07T15:53:31","sender":"廖瀚卿","text":"呵呵，你真搞笑"},{"date":"2009-09-07T15:53:45","sender":"廖瀚卿","text":"对了。你好吗？\n"},{"date":"2009-09-07T15:53:52","sender":"asdf","text":"我很好，真的：）"},{"date":"2009-09-07T15:54:00","sender":"asdf","text":"你好不好，告诉我啊"},{"date":"2009-09-07T15:54:06","sender":"廖瀚卿","text":"我也很好：0"}],"success":true,"totalProperty":10}　
//以上是store加载时火狐检测的json字符串，我们可以监听store的load事件来做XTemplate的渲染　
　
var　tpl　=　new　Ext.XTemplate(　
　　'<tpl　for=".">',　
　　'<font　color="{[xindex　%　2　===　0　?　"green"　:　"red"]}"><p>{data:this.parseSender()}:　{data:this.parseDate}　</p></font>',　
　　'<p　style="padding:1　1　10　5">{data:this.parseText}</p>',　'</tpl></p>',　
　　{　
　　　　compiled:　true,　
　　　　parseSender:　function　(json)　{　
　　　　　　return　json.sender;　
　　　　},　
　　　　parseDate:　function　(json)　{　
　　　　　　return　Ext.util.Format.date(json.date,　'Y-m-d　H:i:s');　
　　　　},　
　　　　parseText:　function　(json)　{　
　　　　　　return　json.text　
　　　　}　
　　}　
);　
　
var　store　=　new　Ext.data.Store({　
　　url:　'findChatHistory.action',　
　　reader:　new　Ext.data.JsonReader({　
　　　　totalProperty:　'totalProperty',　
　　　　root:　'root'　
　　},　
　　['mid',　'id',　'sender',　'text',　{　
　　　　name:　'date',　
　　　　dateFormat:　"Y-m-dTH:i:s",　
　　　　//struts2的json-plugin处理日期默认格式化为这种方式，要想在extjs中正确处理日期格式，这里很重　
　　　　type:　'date'　
　　}]),　
　　listeners:　{　
　　　　'load':　function　(sd,　records,　options)　{　
　　　　　　/*console.log(records);//其实records是一个对象数组，输出内容和格式如下,从格式可以得知真正的数据在data=Object里面　
　[Object　phantom=true　id=ext-record-26　data=Object,　Object　phantom=true　id=ext-record-27　data=Object,　Object　phantom=true　id=ext-record-28　data=Object,　Object　phantom=true　id=ext-record-29　data=Object,　Object　phantom=true　id=ext-record-30　data=Object,　Object　phantom=true　id=ext-record-31　data=Object,　Object　phantom=true　id=ext-record-32　data=Object,　Object　phantom=true　id=ext-record-33　data=Object,　Object　phantom=true　id=ext-record-34　data=Object,　Object　phantom=true　id=ext-record-35　data=Object]*/　
　　　　　　tpl.overwrite(Ext.fly('history'),　records);　//records为服务器返回的所有记录　
　　　　}　
　　}　
});