Extjs-实用工具混合型集合 Ext.util.MixedCollection

来源：互联网发布：matlab 遗传算法袋鼠编辑：程序博客网时间：2024/05/16 02:47

混合集合类,可以支持用数字型索引获取和保存数据,也可以执行key:value对的形式获取和保存数据,MixedCollection不但提供了集合相关的功能函数,还提供了对事件的支持

1.MixedCollection添加数据

<script type="text/javascript" defer>     Ext.onReady(function() {var c = new Ext.util.MixedCollection();    //增加一条数据    c.add(1);    //可以使用addAll增加一个数组或者一个JSON对象    c.addAll([2,3]);    c.addAll({json:4});    //insert函数,允许用户添加数据的位置    c.insert(0,100);    var result = [];    for (var i = 0; i < c.getCount(); i++) {        result.push(c.get(i));    }    alert(result);});</script>

2.MixedCollection删除数据

<script type="text/javascript" defer>     Ext.onReady(function() {var c = new Ext.util.MixedCollection();    c.add(1);    c.add(2);    c.add(3);    //删除索引0    c.removeAt(0);    var result = [];    for (var i = 0; i < c.getCount(); i++) {        result.push(c.get(i));    }    alert(result);});</script>

3.MixedCollection修改数据(更新有问题)

<script type="text/javascript" defer>     Ext.onReady(function() {var c = new Ext.util.MixedCollection();    c.add(1);    c.add(2);    c.add(3);    //更新    c.replace(0,200)    var result = [];    for (var i = 0; i < c.getCount(); i++) {        result.push(c.get(i));    }    alert(result);});</script>

4.MixedCollection读取数据

<script type="text/javascript" defer>     Ext.onReady(function() {var c = new Ext.util.MixedCollection();    c.addAll([1,2,3,4,5,6]);    var lwc = Ext.getDom('lwc');    lwc.innerHTML += '集合第一条数据: '+c.first()+'<br>';    lwc.innerHTML += '集合最后条数据: '+c.last()+'<br>';    lwc.innerHTML += '集合数据的数量: '+c.getCount()+'<br>';    lwc.innerHTML += '集合索引1的位置的数据为: '+c.get(1)+'<br>';    lwc.innerHTML += '集合值为2的索引为: '+c.indexOf(2)+'<br>';});</script>  </head>  <body>  <div id='lwc'></div>  </body></html>

5.MixedCollection执行复杂查询操作

<script type="text/javascript" defer>     Ext.onReady(function() {var c = new Ext.util.MixedCollection();    c.addAll(    {name:'tom'},    {name:'cat'},    {name:'jack'}    );    var lwc = Ext.getDom('lwc');    /*    find支持使用回调函数判断集合中的对象是否满足查询的要求,如果存在就返回一个满足的对象    如果改成 o.name = 'tom1' 打印为null    */    lwc.innerHTML += c.find(function(o){    return o.name == 'tom';    })+'<br>';    /*    对集合中的对象某个属性进行匹配,并且返回一个满足条件的索引值    如果改成 'name':'tom1',将打印-1    */    lwc.innerHTML += c.findIndex('name','tom1')+'<br>';    //返回满足对象的索引    lwc.innerHTML += c.findIndexBy(function(o){    return o.name == 'tom';    });});</script>

6.MixedCollection复制数据

<script type="text/javascript" defer>     Ext.onReady(function() {var c = new Ext.util.MixedCollection();    c.addAll(    {name:'11'},    {name:'22'},    {name:'33'},    {name:'aa'},    {name:'bb'}    );    //全部复制    var c2 = c.clone();    //复制属性name符合后面数字的数据    var c3 = c.filter('name',/^\d+$);    //只保留集合中name值不是数字的值    var c4 = c.filterBy(function(o){    return /^\D+$/.test(o.name);    });});</script>

7.使用key:value的方式操作MixedCollection

<script type='text/javascript' defer>     Ext.onReady(function() {    var c = new Ext.util.MixedCollection();    //为每条记录设置对象的Key值    c.add('key1', 1);    c.add('key2', 2);    c.add('key3', 3);    var result = [];    for (var i = 0; i < c.getCount(); i++) {        result.push(c.get(i));    }    alert(result);//打印1,2,3        //索引1增加key值为key10值为100    c.insert(1, 'key10', 100);    var result = [];    for (var i = 0; i < c.getCount(); i++) {        result.push(c.get(i));    }    alert(result);//打印1,100,2,3   });</script>

8. MixedCollection的事件

MixedCollection继承了Observable,因此可以设置监听函数,MixedCollection内部定义了add,clear,remove,replace等4个事件

<script type="text/javascript" defer>     Ext.onReady(function() {    var c = new Ext.util.MixedCollection();    c.on('add', function(index, o, key) {        alert('在' + index + '添加了数据' + o + ',key为' + key);    });    c.on('clear', function() {        alert('集合数据被清空');    });    c.on('remove', function(o, key) {        alert('删除了数据' + o + ',key为' + key);    });    c.on('replace', function(key, oldObject, newObject) {        alert('修改了key为' + key + '的数据' + newObject + ',修改前的值为' + oldObject);    });    Ext.get('add').on('click', function() {        c.add(new Date().getTime());    });    Ext.get('clear').on('click', function() {        c.clear();    });    Ext.get('remove').on('click', function() {        c.removeAt(0);    });    Ext.get('replace').on('click', function() {        c.replace(0, new Date().toLocaleString());    });});</script>  </head>  <body>    <button id='add'>add</button>    <button id='clear'>clear</button>    <button id='remove'>remove</button>    <button id='replace'>replace</button>    <div id='result'></div>  </body></html>

Extjs-实用工具 混合型集合 Ext.util.MixedCollection

Extjs-实用工具混合型集合 Ext.util.MixedCollection