js+extjs学习总结

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日星期一