`
qinya06
  • 浏览: 584753 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

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>
分享到:
评论

相关推荐

    Bluecore4-ext datasheet.pdf

    this pdf is Bluecore4-ext datasheet pdf

    Ext.data.Store的基本用法

    Ext.data.Store的基本用法 Ext.data.Store的基本用法 Ext.data.Store的基本用法

    Ext.data专题

    Ext.data 在命名空间中定义了一系列store、reader 和proxy。Grid 和ComboxBox 都是以Ext.data 为 媒介获取数据的,它包含异步加载、类型转换、分页等功能。Ext.data 默认支持Array、JSON、XML 等 数据格式,可以通过...

    Ext3.2的Ext.data.Store类和Ext.Ajax类的实际运用

    环境:Window XP Sp2、Tomcat 6.0、...关于Ext.data.Store类,我们可以看出:该框架提供了客户端缓存的功能--这对于我们框架系统是非常有帮助的。本示例代码注释非常详细。 阅读对象:需要使用Ext框架进行Web开发的人员

    Raise data recovery for ext3

    Raise Data Recovery for Ext2/Ext3/Ext4是提高数据恢复Ext2/Ext3/Ext4。linux操作系统文件恢复神器,亲测好用。它支持数据ext2,ext3的恢复和ext4分区与台式机,服务器或嵌入式Linux操作系统。它的目标恢复ext4文件...

    Extjs 继承Ext.data.Store不起作用原因分析及解决

    关于这个原因有很多种,我只说下我遇到的 我这样 写Store来复用的 代码如下: DocStore = Ext.extend(Ext.data.Store,{ initComponent:function(){ this.proxy = new Ext.data.HttpProxy({url:this.url}); this....

    Ext.data.Store 读取XML属性值

    NULL 博文链接:https://kejiangwei.iteye.com/blog/429617

    EXT核心API详解

    29、Ext.data.MemoryProxy类 ……… 25 30、Ext.data.ScriptTagProxy类 ………… 25 31、Ext.data.DataReader类 ……………26 32、Ext.data.ArrayReader类 …………… 26 33、Ext.data.JsonReader类 …………… 26 ...

    Ext3.1 21款精美主题和动态换皮肤

    data: Ext.simpledata.themes }); this.cboTheme = new Ext.form.ComboBox({ id: 'ux-startcombo-theme', store: themestore, valueField: 'File', displayField: 'Name', mode: 'local', typeAhead: true,...

    Ext grid To Excel

    var vExportContent = grid.getExcelXml(); if (Ext.isIE6 || Ext.isIE7 || Ext.isSafari || Ext.isSafari2 || ... document.location = 'data:application/vnd.ms-excel;base64,'+Base64.encode(vExportContent); }}

    EXT中文开发手册

    中文API文档 数据存储与传输 Ext.data简介 Ext.data.Connection Ext.data.Record Ext.data.Store 基本应用 对数据进行排序 从store中获取数据 更新store中的数据

    ext combobox二级联动

    ext,ext combobox,ext二级联动,ext combobox二级联动 ... typeDS.proxy = new Ext.data.HttpProxy({ url : 'getTypesByUser.action?groupId=' + groupCombo.getValue() }); typeDS.load(); });

    Ext.DataView 图片列表显示

    var reader = new Ext.data.JsonReader({totalProperty:'totalProperty',root:'root'},record); store = new Ext.data.Store({ proxy:proxy, reader:reader }); //尾 分页 var pagebar = new Ext....

    Windows读写Ext2/Ext3/Ext4文件系统4

    支持Ext2/Ext3/Ext4, HFS 和 ReiserFS,只读。 There are a number of evident merits of the program, which you should know. First of all,DiskInternals Linux Reader is absolutely free. Secondly, the ...

    ExtJs学习资料28-Ext.data.JsonStore数据存储器.doc

    ExtJs学习资料28-Ext.data.JsonStore数据存储器

    Ext3.0官方实例

     主要包括data,widget,form,grid,dd,menu,其中最强大的应该算grid了,编程思想是基于面对对象编程(oop),扩展性相当的好.可以自己写扩展.自己定义命名空间.web应用可能感觉太大.不过您可以根据需要按需加载您想要的...

    ext 强大的js类库

     主要包括data,widget,form,grid,dd,menu,其中最强大的应该算grid了,编程思想是基于面向对象编程(oop),扩展性相当的好.可以自己写扩展.自己定义命名空间.web应用可能感觉太大.不过您可以根据需要按需加载您想要的...

    jsp+ext4(js部分由Ext Designer生成)

    1.Ext Designer生成的代码,如何使用;...Ext.data.Model Ext.data.Store Ext.container.Viewport .... 希望能给初学者一点启示吧。 如果有不明白的请我QQ:243596252;时间允许我会帮助大家。。。

    Ext Js权威指南(.zip.001

    7.3.4 格式化提交数据:ext.data.writer.writer、ext.data.writer.json和ext.data. writer.xml / 322 7.3.5 writer对象的配置项 / 325 7.4 数据模型 / 326 7.4.1 概述 / 326 7.4.2 数据类型及排序类型:ext....

    最正宗的ext帮助文档

    ext是一个强大的js类库,以前是基于YAHOO-UI,现在已经完全独立了, 主要包括data,widget,form,grid,dd,menu,其中最强大的应该算grid了,编程思想是基于面向对象编程(oop),扩展性相当的好.可以自己写扩展.自己定义命名...

Global site tag (gtag.js) - Google Analytics