Ext.data-Store

Ext.data.Store
[转载]Ext.data-GroupingStore/JsonStore/SimpleStore
Ext.data.GroupingStore
继承自Ext.data.Store,为Store增加了分组功能.其它用法与Store一致,惟一需要注意的是使用GroupingStore时必须指定sortInfo信息
增加了配置属性
groupField : String//用于分组的字段
groupOnSort : Boolean//如果为真,将依排序字段重新分组,默认为假
remoteGroup : Boolean//远程排序
当然也会多一个group方法
groupBy( String field, [Boolean forceRegroup] ) : void
顾名思义都是重新排序用的
下面是个简单的示例
 
var arr=[ [1, '本', '拉登'], [2, '笨', '拉登'],[3, '笨', '拉灯'] ];
    var reader = new Ext.data.ArrayReader(
   ...{id: 0},
   [
    ...{name: 'name', mapping: 1},       
    ...{name: 'occupation', mapping: 2}  
    ]);
  
    var store=new Ext.data.GroupingStore(...{
      reader:reader,
      groupField:'name',
      groupOnSort:true,
      sortInfo:...{field: 'occupation', direction: "ASC"} //使用GroupingStore时必须指定sortInfo信息
   });
   store.loadData(arr);
 
   //GridPanel以后会讨论,这儿使用它是为了直观的表现GroupingStore
   var grid = new Ext.grid.GridPanel(...{
    ds: store,
    columns: [
        ...{header: "name", width: 20, sortable: true,dataIndex: 'name'},
        ...{header: "occupation", width: 20,sortable: true, dataIndex: 'occupation'}
    ],
    view: new Ext.grid.GroupingView(...{
        forceFit:true,
        groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
    }),
    frame:true,
    width: 700,
    height: 450,
    collapsible: true,
    animCollapse: false,
    title: 'Grouping Example',
    renderTo: 'Div_GridPanel'
    });

Ext.data.JsonStore
也是Store子类,目标是更方便的使用json对象做数据源
构造中多了fields,root,用法如下例所示
/**//*
这是使用远程对象,返回内容与下面本地对象的data一致
var store=new Ext.data.JsonStore({
        url:'jsoncallback.js',
        root:'rows',
        fields:['id','name','occupation']
    });
    store.load();
*/
    var store=new Ext.data.JsonStore(...{
        data:...{ 'results': 2, 'rows': [
        ...{ 'id': 1, 'name': 'Bill', occupation: 'Gardener' },
        ...{ 'id': 2, 'name': 'Ben', occupation: 'Horticulturalist' }
        ]},
    autoLoad:true,
    root:'rows',
    fields:['id','name','occupation']
    })

    //目前请先略过gridpanel,以后再说
    var grid = new Ext.grid.GridPanel(...{
    ds: store,
    columns: [
        ...{header: "id", width: 200, sortable: true,dataIndex: 'id'},
        ...{header: "name", width: 200, sortable: true,dataIndex: 'name'},
        ...{header: "occupation", width: 200,sortable: true, dataIndex: 'occupation'}
    ],height:350,
      width:620,
      title:'Array Grid',
      renderTo: 'Div_GridPanel'
    });


Ext.data.SimpleStore
从数组对象更方便的创建Store对象,
例
var store=new Ext.data.JsonStore(...{
        data:[
           [1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist']
            ],
        autoLoad:true,
        fields:[...{name: 'name', mapping: 1},...{name:'occupation',mapping:2}]
    })
    var grid = new Ext.grid.GridPanel(...{
    ds: store,
    columns: [
        ...{header: "name", width: 200, sortable: true,dataIndex: 'name'},
        ...{header: "occupation", width: 200,sortable: true, dataIndex: 'occupation'}
    ],height:350,
      width:620,
      renderTo: 'Div_GridPanel'
    });

--------------------------------------------------------
Ext.data.Store
store是一个为Ext器件提供record对象的存储容器,行为和属性都很象数据表

方法:不列举继承来的方法
Store( Object config )
构造,config定义为{
autoLoad : Boolean/Object,    //自动载入
baseParams : Object,    //只有使用httpproxy时才有意义
data : Array,        //数据
proxy : Ext.data.DataProxy,//数据代理
pruneModifiedRecords : boolean,//清除修改信息
reader : Ext.data.Reader,    //数据读取器
remoteSort : boolean,    //远程排序?
sortInfo : Object,    //{field: "fieldName", direction: "ASC|DESC"}这样的排序对象
url : String,        //利用url构造HttpProxy
}

add( Ext.data.Record[] records ) : void
增加记录records 到store

addSorted( Ext.data.Record record ) : void
增加record到store并排序(仅本地排序时有用)

clearFilter( Boolean suppressEvent ) : void
清除过滤器

collect( String dataIndex, [Boolean allowNull], [Boolean bypassFilter] ) : Array
收集由dataIndex指定字段的惟一值

commitChanges() : void
提交Store所有的变更,会引发Update事件


filter( String field, String/RegExp value, [Boolean anyMatch], [Boolean caseSensitive] ) : void
设定过滤器
field:String    //字段名
value:String    //RegExp 如果是字符器,检查field是否以value开始,如果是正则,检查是否匹配
anyMatch:Boolean //匹配任何部分而不仅令是开始
caseSensitive:Boolean //大小写敏感?

filterBy( Function fn, [Object scope] ) : void
更强悍的过滤方法.fn接收两个参数record和id

find( String property, String/RegExp value, [Number startIndex], [Boolean anyMatch], [Boolean caseSensitive] ) : Number
找到符合条件的第一条记录,参数同filter

findBy( Function fn, [Object scope], [Number startIndex] ) : Number
参见filterBy

getAt( Number index ) : Ext.data.Record
getById( String id ) : Ext.data.Record
依充号/id得到record对象

getCount() : void
得到记录数

getModifiedRecords() : Ext.data.Record[]
得到修改过的记录集

getRange( [Number startIndex], [Number endIndex] ) : Ext.data.Record[]
得到指定范围的记录集合

getSortState() : void
得到排序状态:显然不是void而是返回一个排序对象,同sortInfo一样的结构{field: "fieldName", direction: "ASC|DESC"}

getTotalCount() : void
这个对于翻页信息还是很有用的

indexOf( Ext.data.Record record ) : Number
indexOfId( String id ) : Number
由记录或id得到序号

insert( Number index, Ext.data.Record[] records ) : void
在指定的位置插入记录,并引发add事件

isFiltered() : Boolean
当前设置了过滤器则返回真

load( Object options ) : void
由指定的Proxy使用指定的reader读取远程数据
options定义为
{
    params :Object,    //请求url需要附加的参数
    callback :Function//回叫方法,接收三个参数
      //r : Ext.data.Record[] //返回的record数组
      //options: Options load方法传入的options
      //success: Boolean //成功
    scope :Object, //范围.默认是store本身
    add :Boolean 追加还是更新
}


loadData( Object data, [Boolean append] ) : void
用法比load简单一点,目的是一样的,只是这次数据由本地读取

query( String field, String/RegExp value, [Boolean anyMatch], [Boolean caseSensitive] ) : MixedCollection
queryBy( Function fn, [Object scope] ) : MixedCollection
查询,参数和find类似,但返回所有符合条件的record,而不是第一个符合条件记录的序号

rejectChanges() : void
放弃所有的变更

reload( [Object options] ) : void
重新载入,相当于 load(options,false),如果连options都没有传入,则取最后一次load时使用的参数

remove( Ext.data.Record record ) : void
移除指定记录

removeAll() : void
移除所有记录

setDefaultSort( String fieldName, [String dir] ) : void
设置默认排序规则

sort( String fieldName, [String dir] ) : void
排序

sum( String property, Number start, Number end ) : Number
对property字段由start开始到end求和

事件列表
add : ( Store this, Ext.data.Record[] records, Number index )
beforeload : ( Store this, Object options )
clear : ( Store this )
datachanged : ( Store this )
load : ( Store this, Ext.data.Record[] records, Object options )
loadexception : ()
metachange : ( Store this, Object meta. )
remove : ( Store this, Ext.data.Record record, Number index )
update : ( Store this, Ext.data.Record record, String operation )
看名字都很简单,参数也不复杂,略过

用例
//得到远程json对象
//其中jsoncallback.js内容为
//{ 'results': 2, 'rows': [
//    { 'id': 1, 'name': 'Bill', occupation: 'Gardener' },
//    { 'id': 2, 'name': 'Ben', occupation: 'Horticulturalist' } ]
//}
//定义proxy
      var proxy=new Ext.data.HttpProxy(...{url:'jsoncallback.js'});
//定义reader
      var reader=new Ext.data.JsonReader(
        ...{
        totalProperty: "results",//totalRecords属性由json.results得到
        root: "rows",            //构造元数据的数组由json.rows得到
        id: "id"                //id由json.id得到
        },[
        ...{name: 'name', mapping: 'name'},
        ...{name: 'occupation'}            //如果name与mapping同名,可以省略mapping
        ]
    )
//构建Store  
    var store=new Ext.data.Store(...{
      proxy:proxy,
      reader:reader
   });
//载入
store.load();


示例2
//得到远程xml文件
//其中xml文件内容为

<?xml version="1.0" encoding="utf-8" ?>
<dataset>
  <results>2</results>
  <row>
    <id>1</id>
    <name>Bill</name>
    <occupation>Gardener</occupation>
  </row>
  <row>
    <id>2</id>
    <name>Ben</name>
    <occupation>Horticulturalist</occupation>
  </row>
</dataset>

var proxy=new Ext.data.HttpProxy(...{url:'datasource.xml'});
  
    var reader = new Ext.data.XmlReader(...{
       totalRecords: "results",
       record: "row",       
       id: "id"               
    }, [
       ...{name: 'name', mapping: 'name'},
       ...{name: 'occupation'}          
    ]);
   var store=new Ext.data.Store(...{
      proxy:proxy,
      reader:reader
   });
store.load();


示例3
//从本地数组得到
var arr=[ [1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist'] ];
var reader = new Ext.data.ArrayReader(
   ...{id: 0},
   [
    ...{name: 'name', mapping: 1},       
    ...{name: 'occupation', mapping: 2}  
    ]);
  
    var store=new Ext.data.Store(...{
      reader:reader
   });
   store.loadData(arr);