Ext —json（JsonStore）— ajax —chart
1、 配置
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
当然有的时候必须要添加自己的js和css文件以及images中的default文件夹
2、 调用json
a) Js 调用json文件，或者说读取json eg:
url:'common/json_text.json',//有后缀名，servlet没有后缀名
root:'jsontext',//json 文件的根名称
//fields:['ID','Table','Value','Value1' ]//这两种fields的书写方式都成，但是最好用下边这种；主要是这里的书写的顺序要和json文件中的顺序对应。
fields:[
{name: 'ID', type: 'int'},
{name: 'Table', type: 'string'},
{name: 'Value', type: 'string'},
{name: 'Value1', type: 'string'}
],
b) Ajax方式调用json(主要是来自后台查询自己组装的json) eg:
async:false, //使用同步请求，因为异步请求不能将返回值传给全局变量；
type:"post",
url:"ajax/AjaxServlet",//去找后台的servlet类
dataType:"json",//返回值是json类型，如果你将success中的返回值赋给了其他的变量，那么当你再次使用该数据时候必须要进行对象的转换：然后才能当做json对象来用
var mydata;//获取ajax的数据
success:function(data)
{
mydata= data;
},
mystore = eval(mydata);
contentType: "application/json; charset=utf-8",
3、 Chart
a) Char的显示
new Ext.Panel({
//这里是Panel的属性
items: {//多放置几个item就可以制作table切换效果
//这里是items的属性
chartStyle: {
//chart 的样式
dataTip: {//提示框的样式},
xAxis: {//x轴的样式},
yAxis: { //y轴的样式}
},
series: [ //曲线的条数主要有series的数目来控制
{//series1 的属性},
{//series2 的属性 },
{//series3 的属性}
]
}});
b) Chart图的再次加载
该属性位于Panel中改动的是Panel，而不是items或者是series
tbar: [{
text: 'reLoad new data set',
handler: setInterval(function(){
store.loadData(generateData());
//alert("reload the set");
},5000)//定时器执行数据更新
}],
c) Chart图的缺点
i. Ext现在的版本2013年8月26日星期一，提供的数据量的支持比较小，在200条记录中显示比较OK，但是500条以上显示就比较慢，当数据量达到2000条的时候浏览器崩溃。当然我觉得这个跟他们提供的chart.swf 文件有很大的关系。希望未来他可以得到改善。
ii. Chart图的动态更新，实时更新采用的机制是在人眼识别不到的时候进行数据的全部更换，每次加载的是所有的数据不是一条一条的增加。
4、 JsonStore
a) 对于jsonstore 的说法也是众说纷纭
i. 我对jsonstore 的理解是他可以作为json对象来处理；
ii. Jsonstore 数据的添加是写在listeners 中的，相当于把load写成函数
listeners : {
load: function() {
var rec = new this.recordType(
{ID:0, Table:'testtable', Value:'19', Value1:'18'});
rec.commit();
this.add(rec);
}
}
iii. 这种方式只可以添加静态的数据，动态的数据我不知道怎么添加（当然更多的时候我会选择reload-chart.js 里边的方法）
注释：以上的具体内容参见MyEcplise的Ajax_Pro 工程
2013年8月26日星期一