ExtJS中创建Store的方法

最新推荐文章于 2016-09-06 17:08:29 发布

原创最新推荐文章于 2016-09-06 17:08:29 发布 · 1.4w 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #autoload #function #stylesheet #json #xml

学习-->JS + ExtJS 专栏收录该内容

2 篇文章

订阅专栏

第一次弄EXTJS的时候就在远程加载XML数据的时候给卡住了。做了N多个例子，百度N回都弄不出来，当时就停下来了。因为后来一直没有时间去学,所以之后对EXTJS一直有一种恐惧感!!!!!!!

现在看着别人用EXTJS做的东西确实好。而自己也觉得如果真的能够不需要美工的帮忙就能够完成一套界面漂亮的东西，那也是很让人兴奋的事情。于是自己又开始从头再来，继续学习ExtJS。不过还是在远程加载数据的时候出问题了（JSON，XML都不好使）。后来又去百度，以前看过的内容又给搜索出来了。这次把Y梨老师的blog里面的一些笔记好好的看了一下。对Ext.data.Store有了更多的了解，自己动手又去练习了一下，结果出来了完全正确。确实很兴奋！！！没完呢，自己马上又到百度里面去找相关东西来看，这次好像什么都能够看懂了似的，看一下子就明白了，而且自己上手去做，做一次结果就能够出来。后来发现之前第一次学的时候只要自己坚持一下，在那个store.load()上面多花点心思，完全可以把问题解决，害得自己浪费这么多的时间.菜鸟确实只能够是菜鸟，可我真的不想当菜鸟（废话）

下面就把相关的创建Ext.data.Store的方法贴出来，以备哪天忘记了，再来看看。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>ExtJS-Window.html</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css"
   href="../Ext/resources/css/ext-all.css"></link>

<script type="text/javascript" src="../Ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../Ext/ext-all.js"></script>
<script>
  Ext.onReady(function(){
/*
第一种创建store的方法(用的是ArrayReader来实现的,SimpleStore其实就是对ArrayReader的封装)
   var data = [["01","thtwin","25"],["02","thtwinj2ee","23"]] ;
   var store = new Ext.data.SimpleStore({
    auteLoad:true, //此处设置为自动加载
    data:data,
    fields:["id","name","age"]
   }) ;

//   上面设置为自动加载，所以下面直接用没有问题，如果用store.load();或许下面就会出错
   alert(store.getCount()) ; //得到的结果为:2 (是正确的)
*/

/*
第二种为将相应的数据名称（相当于Record里面的字段）单独提取出来形成一个数组，然后直接用变量名去充当配置项:fields
   var data = [["01","thtwin","25"],["02","thtwinj2ee","23"]] ;
   var fields = ["id","name","age"] ;
   var store = new Ext.data.SimpleStore({
    auteLoad:true,
    data:data,
    fields:fields
   }) ;

   alert(store.getCount()) ;//得到的结果为:2
   alert(store.getAt(0).get("name")) ;//得到的结果为:thtwin
*/

/*
第三种创建store的方法,用到的常用的那种方法.Store中配置了proxy(数据来源属性),reader(数据解析方式属性)
   var data = [["01","thtwin","25"],["02","thtwinj2ee","23"]] ;
   var fields = ["id","name","age"] ;
   var record = Ext.data.Record.create([
    {name:"id"},
    {name:"name"},
    {name:"age"}
   ]) ;
   var store = new Ext.data.Store({
//    autoLoad:true,
//    data:data, //如果上面不用autoLoad:true,则此处用data:data就会报this.proxy为空的错误，而像下面那样子就不会出错.用了proxy
    proxy:new Ext.data.MemoryProxy(data),
    reader:new Ext.data.ArrayReader(
     {id:"id"},
     //{},       //此处为{}表示没有原数据信息
     fields
     //record    //此处一般用Recrod对象不过像上面那样子用一个一维数组也可以
    )
   }) ;
   store.load() ;
   alert(store.getCount()) ;

*/
/*
  var store = new Ext.data.Store({
   url:"http://localhost:8080/TestExtJS/Store/storejson.jsp",
   //proxy:new Ext.data.HttpProxy({url:"http://localhost:8080/TestExtJS/Store/storejson.jsp"}),
   autoLoad:true,
   reader:new Ext.data.JsonReader(
    {totalProperty:"results",root:"rows",id:"id"},
    Ext.data.Record.create([
     {name:"id"},
     {name:"name"},
     {name:"age"}
    ])
   )
  }) ;
//  store.load() ;
  alert(store.getCount()) ;
*/

/*
第四种创建通过指定store的proxy来指定数据来源（来源于服务器的数据）,通过reader来指定将要解析数据的格式形式(此处用的是json数据格式)
  var proxy = new Ext.data.HttpProxy({url:"http://localhost:8080/TestExtJS/Store/storejson.jsp"}) ;
  var record = Ext.data.Record.create([
    {name:"id"},
    {name:"name"},
    {name:"age"}
   ]) ;

  var reader = new Ext.data.JsonReader({
   root:"rows",
   tottalProperty:"results"
  },record) ;

  var store = new Ext.data.Store({
   proxy:proxy,
   reader:reader
   //autoLoad:true
  }) ;

  store.load({
   callback:function(records,options,success){
    if(success == true){
     alert(store.getCount()) ;
    }else{
     alert("返回失败") ;
    }
   }
  }) ;

   自己以后得注意：
   下面直接显示store里面记录的条数，这样子会出错，因为可能store还没有加载数据完成，程序就执行下面的语句了
   而得到的结果也表明是这么回事，得到的结果总是0 而通过单击下面的按钮结果就正确了为2
   json数据内容如下：
   {results:2,rows:[{id:'1',name:'test',age:'32'},{id:'2',name:'test',age:'32'}]}
   单击按钮得到的结果为:2
   如果将json的数据格式换成：
   {results:2,rows:[{id:'1',name:'test',age:'32'},{id:'1',name:'test',age:'32'}]}
   得到的结果为:1
   因为用id来唯一的标识一条记录，而现在id都一样，所以就只有一条了

  alert(store.getCount()) ;

  new Ext.Button({
   text:"查看store加载数据之后的结果",
   renderTo:Ext.getBody(),
   listeners:{
    "click":function(){
     alert(store.getCount()) ;
    }
   }
  }) ;
*/
// 第五种创建数据源来自己服务器的XML数据，而解析器为对应的XmlReader
  var record = Ext.data.Record.create([
   {name:"id"},
   {name:"name"},
   {name:"age"}
  ]) ;
  var proxy = new Ext.data.HttpProxy({url:"http://localhost:8080/TestExtJS/Store/data.xml"}) ;
  /*
   XML中的数据如下：
   <?xml version="1.0" encoding="UTF-8"?>
   <datasets>
    <rows>
     <id>1</id>
     <name>thtwin</name>
     <age>23</age>
    </rows>
    <rows>
     <id>2</id>
     <name>thtwinj2ee</name>
     <age>23</age>
    </rows>
   </datasets>
  */
  var reader = new Ext.data.XmlReader(
   {
    id:"id",
    record:"rows"
   },
   record
  ) ;
  var store = new Ext.data.Store({
//   autoLoad:true,
   proxy:proxy,
   reader:reader
  }) ;
  store.load() ;
  new Ext.Button({
   text:"查看加载数据之后的结果",
   renderTo:Ext.getBody(),
   listeners:{
    "click":function(){
     alert(store.getCount()) ;
     alert(store.getAt(0).get("name") + " " + store.getAt(1).get("name")) ;
    }
   }
  }) ;
}) ;

</script>
</head>

<body>
<div id="myPanel"></div>
</body>
</html>