ext data

ext.data store reader proxy

Ext.data.Record 就是一个设定了内部数据类型的对象，为store最基本组成部分，如果把store看为一张二维表，则record即为对应的一行
record 主要功能为保存数据，并且在内部数据发生改变的时记录修改的状态，它还可以保留修改之前的原始值
var PersonRecord=Ext.data.Record.create([
{name:'name',type:'string'},
{name:'sex',type:'int'}
]);
PersonRecord就为新定义的类型，包含name sex两个属性
然后使用“new”创建personRecord实例
var boy=new PersonRecord({
name:'boy',
sex:0
});
以下三种看、都可以获得name属性
alert(boy.data.name);
alert(boy.data['name']);
alert(boy.get('name'));

修改boy属性值应该使用set()函数
boy.set('name','body name');
set函数会判断属性值是否变化，如果改变，就当当前对象的dirty属性值设为true，并将修改之前的值放入 modify对象中，工其他函数使用，修改后执行
commit() 设置dirty为false 删除modify 对象中的值
reject()撤销 回复原来的值 ，，其他同上面
getChanges()获取修改的部分 返回类型为 {name:'body name'}
isModified()判断当前record中的值是否修改

ext.data.Store
它包含一个Record数组，最少需两个组件支持，为proxy reader proxy从某个途径获取数据 ，reader 将原始数据转换成record实例

var data=[['boy',0],['girl',1]];
var store=new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data);
reader:new Ext.data.ArrayReader({},PersonRecord)
});
srore.load();

对数据排序
var store=new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},PersonRecord),
sortInfo:{fiels:name,direction:'DESC'}
});
与排序相关参数有remoteSort，这个参数实现后台排序功能，
store.setDefaultSort('name','DESC');
获取排序信息：getSortState() 返回{field:"name",direction:"DESC"}json对象
还有RemoteSort，这个参数实现后台排序功能，当remoteSort:true store在向后台请求数据的时自动加入sort,dir两个参数，会每次导致执行sort()时，都要到后台重新加载数据，而不能对本地数据进行排序

从store中获取数据
store.getAt(0).get('name')

for(var i=0;i<store.getCount();i++){
var record=store.getAt(i);
alert(record.get('name');
}
或者
store.each(function(record){
alert(record.get('name');
}
也可以使用getRange()函数练习获取多个record,只需要制定开始于结束的索引值
var records=store.getRange(0,1);
for(var i=0;i<records.length;i++){
var record=records[i];
alert(record.get('name');
}

不知record id,也可以根据record
find(String property, String/RegExp value,[Number startIndex],[Boolean anyMatch],[Boolean caseSensitive]):Number
第一个 代表搜索的字段名。第二个value 匹配的字符串或正则表达式，第三个从第几行开始
第四个为TRUE时，不必从头开始匹配；第五个 为TRUE 是区分大小写.前两个必填
var index=store.find('name','g');
alert(store.getAt(index).get('name');

与find对应还有findBy
findBy(Function fn,[Object scope],[Nmber index])Number
index=store.findBy(function(record,id){
return record.get('name')=='girl'&&record.get('sex')==1;
});
alert(store.getAt(index).get('name'));

还可以通过query和queryBy对store查询，与find不同的是query queryBy返回一个MixCollection对象，里面包含所搜索到得数据
alert(store.query('name','boy'));
alert(store.queryBy(function(record){

return record.get('name')=='girl'&& record.get('sex')==1;
}));

更新store中的数据
add(Ext.data.Record[] records)向store末尾添加一条或多条record，参数可以是一个record实例
store.add(new PersonRecord({
name: 'other',
id: 0
}));
添加一个record数组，
store.add([new PersonRecord({
name:'other1',
sex:0
}),
new PersonRecord({
name:'other2',
sex: 0
})]);
使用add函数会破坏原有的排序
故使用addSorted(),会在添加新数据后，立即对store进行排序，可以保证store中的数据有序显示
store.addSorted(new PersonRecord({
name:'1111',
sex:1
}));
插入：store.insert(3,new PersonRecord({
name:'other',
sex:0
})); //数组同样适用
删除：store.remove(store.getAt(0));
store.removeAll();
store中没有专门提供修改某一行record的操作，需要先获取一个record，对这个record的内部数据的修改会直接反应到store上
store.getAt(0).set('name','XXXXX');
修改之后有2种选择：1.rejectChanges()撤销所有修改，恢复到最初额状态
2.commitChanges()提交修改
在撤销或提交之前，可getModifiedRecords()获取store中修改过的record数组
与修改数据相关的参数是pruneModifiedRecords,如果将它设为true,当每次执行完删除，，或reload操作后，都会清空所有数据。这样，，getModifiedRecords()返回一个空数组，否则，依然会是上次修改过的record记录

加载及显示数据
store.load({
params:{start:0,limit:20},//加载时发送附加参数
callback:function(records,options,success){
//records 获得的参数
//options 执行load()传递的参数
//success 是否加载成功

Ext.Msg.alert('info','加载完毕');

},
scope:store //回调函数执行时的作用域
add:true //为TRUE 添加在原来store数据末尾。否则将原数据清空，，
//再将得到的 数据放入store
});

通常 为了对store中的数据进行初始化，load()函数只需执行一次，如果用params参数指定了需要使用的参数，以后再次执行reload()重新加载数据时，
store会自动使用上次load()包含的params参数内容

过滤数据 filter 使用方法同find
store.filter('name','boy');
store.filter(function(record){
return record.get('name')=='girl'&& record.get('sex')==-1;
});

取消过滤，并显示所有数据，调用clearFilter()
store.clearFilter();
判断store是否设置了过滤器，通过isFiltered()判断
==================================================================================

 <script type="text/javascript" src="../../ext-all.js"></script>
 <script type="text/javascript">
Ext.onReady(function(){
     var cm = new Ext.grid.ColumnModel([
        {header:'编号',dataIndex:'id',width:35},
        {header:'名称',dataIndex:'name',width:80},
        {header:'描述',dataIndex:'descn',width:120}
    ]);

    var data = [
        ['1','name1','descn1'],
        ['2','name2','descn2'],
        ['3','name3','descn3'],
        ['4','name4','descn4'],
        ['5','name5','descn5']
    ];

    var store = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy(data),
        reader: new Ext.data.ArrayReader({}, [
            {name: 'id'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });
    store.load();
    var grid = new Ext.grid.GridPanel({
       autoHeight: true,
          renderTo: 'grid',
          store: store,
          cm: cm,
          viewConfig: {
            forceFit: true
         }


    });
   grid.on('mouseover',function(e){//添加mouseover事件
  var index = grid.getView().findRowIndex(e.getTarget());//根据mouse所在的target可以取到列的位置
  if(index!==false){//当取到了正确的列时，（因为如果传入的target列没有取到的时候会返回false）
   var record = store.getAt(index);//把这列的record取出来
   var str = Ext.encode(record.data);//组装一个字符串，这个需要你自己来完成，这儿我把他序列化
   var rowEl = Ext.get(e.getTarget());//把target转换成Ext.Element对象
   rowEl.set({
    'ext:qtip':str  //设置它的tip属性
   },false);

  }
   });

    var win = new Ext.Window({
     id:'window',
        el:'window-win',
        layout:'fit',
        width:500,
        height:270,
        closeAction:'hide',
        items: [grid]

    });
    win.show();
 Ext.QuickTips.init();//注意，提示初始化必须要有

});
        </script>