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

最新推荐文章于 2020-09-11 10:23:43 发布

itlwc

最新推荐文章于 2020-09-11 10:23:43 发布

阅读量5.2k

点赞数 1

分类专栏： Extjs 文章标签：工具

本文链接：https://blog.csdn.net/itlwc/article/details/7887510

版权

Extjs 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

混合集合类,可以支持用数字型索引获取和保存数据,也可以执行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>