`
qinya06
  • 浏览: 595252 次
  • 性别: 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`是ExtJS框架中用于管理数据的核心组件之一。它主要负责数据的存储、加载、更新等操作,并且提供了多种方法来方便地处理这些数据。...

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

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

    Ext.data.Store 读取XML属性值

    这篇博客文章《Ext.data.Store 读取XML属性值》可能深入探讨了如何利用`Ext.data.reader.Xml`来解析XML并填充数据存储。 XML是一种结构化数据格式,广泛用于数据交换,尤其是Web服务和API。`Ext.data.reader.Xml`是...

    Ext.data专题

    ### Ext.data专题详解 #### 一、Ext.data概述 **Ext.data** 是一个重要的JavaScript库组件,用于处理数据传输和管理。它定义了一系列的核心概念,包括 **Store**、**Reader** 和 **Proxy**,这些都是Ext.data的...

    ext漂亮的桌面系统2.0

    4. **EXT Data Package**:数据管理模块,包括数据存储(Store)、模型(Model)、代理(Proxy)和读者/写者(Reader/Writer),用于与服务器进行数据交换。 5. **EXT AJAX**:异步通信组件,用于与服务器进行JSON、...

    ext 3.3.1 api 不可缺少的学习资料

    4. **EXT Data Package**:数据包提供了模型(Model)、存储(Store)、代理(Proxy)等组件,用于处理数据的加载、存储和显示。这使得EXT可以与服务器端进行高效的数据交换。 5. **EXT AJAX**:EXT的AJAX模块提供...

    ext json struts 完整无错源码

    3. **EXT Data Package**: 用于处理数据模型和数据存储,包括 Store 和 Proxy,它们负责数据的加载、过滤、排序和分页等操作。 Struts 框架的主要部分包括: 1. **Action**: 处理用户请求,执行业务逻辑。 2. **...

    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核心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 ...

    ext 基本知识-store-proxy-reader-ext-connection-实例

    总结起来,本篇内容涵盖了ExtJS中的核心数据组件,包括Ext.data.Connection的使用、Ext.data.Record的创建与操作、Ext.data.Store的配置以及数据交互的Proxy和Reader机制。这些知识是构建基于ExtJS的异步数据驱动...

    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,...

    extJs3.0 Jar

    4. **Ext Data Package**:包含数据模型、存储、代理和数据绑定机制,支持与服务器的数据交互。 5. **Ext Grid**:强大的数据网格组件,用于显示和编辑大量数据。 6. **Ext Form**:包含各种表单字段和表单布局,...

    ext相关资料-ext3.1

    6. **文件系统挂载选项**:EXT3允许用户在挂载时选择不同的选项,如是否启用日志记录(data=journal, data=ordered, 或 data=writeback),是否启用延迟分配等,以平衡性能和安全性。 7. **磁盘检查和修复**:EXT3...

    ext树 无限级 json 数据格式 动态加载

    为了实现动态加载,EXT树使用了`Ext.data.TreeStore`,它是一个专门用来处理树形数据的存储类。TreeStore可以通过配置`proxy`来指定数据源,通常使用Ajax或ScriptTagProxy来实现异步加载。以下是一个基本配置示例: ...

    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); }}

    Ext4.0 动态修改ComboBox选择项(本地模式)

    调用`loadData`或`refresh`方法: ```javascript comboBox.getStore().load(); // 或 comboBox.refresh(); ``` 4. **监听事件**: 为了响应用户的选择变化,可以监听ComboBox的`select`事件: ```javascript...

    ext_教程 (ext 相 关)

    同时,EXT的Data Package提供了强大的数据管理功能,与服务器进行双向数据同步,实现数据驱动的界面更新。 精通EXT不仅需要理论知识,更重要的是实践。通过不断的编码和调试,你会逐渐熟悉EXT的API,掌握组件间的...

    EXT中文开发手册

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

Global site tag (gtag.js) - Google Analytics