extjs学习笔记--混合型集合 Ext.util.MixedCollection

2022-01-16 14:22:53

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

1.MixedCollection添加数据

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

2.MixedCollection删除数据

[javascript] view plaincopy
 
  1. <script type="text/javascript" defer>    
  2.     Ext.onReady(function() {  
  3.         var c = new Ext.util.MixedCollection();  
  4.         c.add(1);  
  5.         c.add(2);  
  6.         c.add(3);  
  7.         //删除索引0  
  8.         c.removeAt(0);  
  9.         var result = [];  
  10.         for (var i = 0; i < c.getCount(); i++) {  
  11.             result.push(c.get(i));  
  12.         }  
  13.         alert(result);  
  14.     });  
  15. </script>  

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

[javascript] view plaincopy
 
  1. <script type="text/javascript" defer>    
  2.     Ext.onReady(function() {  
  3.         var c = new Ext.util.MixedCollection();  
  4.         c.add(1);  
  5.         c.add(2);  
  6.         c.add(3);  
  7.         //更新  
  8.         c.replace(0,200)  
  9.         var result = [];  
  10.         for (var i = 0; i < c.getCount(); i++) {  
  11.             result.push(c.get(i));  
  12.         }  
  13.         alert(result);  
  14.     });  
  15. </script>  

4.MixedCollection读取数据

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

5.MixedCollection执行复杂查询操作

[javascript] view plaincopy
 
  1. <script type="text/javascript" defer>    
  2.     Ext.onReady(function() {  
  3.         var c = new Ext.util.MixedCollection();  
  4.         c.addAll(  
  5.             {name:‘tom‘},  
  6.             {name:‘cat‘},  
  7.             {name:‘jack‘}  
  8.         );  
  9.         var lwc = Ext.getDom(‘lwc‘);  
  10.         /* 
  11.             find支持使用回调函数判断集合中的对象是否满足查询的要求,如果存在就返回一个满足的对象 
  12.             如果改成 o.name = ‘tom1‘ 打印为null 
  13.         */  
  14.         lwc.innerHTML += c.find(function(o){  
  15.             return o.name == ‘tom‘;  
  16.         })+‘<br>‘;  
  17.         /* 
  18.             对集合中的对象某个属性进行匹配,并且返回一个满足条件的索引值 
  19.             如果改成 ‘name‘:‘tom1‘,将打印-1 
  20.         */  
  21.         lwc.innerHTML += c.findIndex(‘name‘,‘tom1‘)+‘<br>‘;  
  22.         //返回满足对象的索引  
  23.         lwc.innerHTML += c.findIndexBy(function(o){  
  24.             return o.name == ‘tom‘;  
  25.         });  
  26.     });  
  27. </script>  

6.MixedCollection复制数据

[javascript] view plaincopy
 
  1. <script type="text/javascript" defer>    
  2.     Ext.onReady(function() {  
  3.         var c = new Ext.util.MixedCollection();  
  4.         c.addAll(  
  5.             {name:‘11‘},  
  6.             {name:‘22‘},  
  7.             {name:‘33‘},  
  8.             {name:‘aa‘},  
  9.             {name:‘bb‘}  
  10.         );  
  11.         //全部复制  
  12.         var c2 = c.clone();  
  13.         //复制属性name符合后面数字的数据  
  14.         var c3 = c.filter(‘name‘,/^\d+$);  
  15.         //只保留集合中name值不是数字的值  
  16.         var c4 = c.filterBy(function(o){  
  17.             return /^\D+$/.test(o.name);  
  18.         });  
  19.     });  
  20. </script>  

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

[javascript] view plaincopy
 
  1. <script type=‘text/javascript‘ defer>    
  2.     Ext.onReady(function() {  
  3.         var c = new Ext.util.MixedCollection();  
  4.         //为每条记录设置对象的Key值  
  5.         c.add(‘key1‘, 1);  
  6.         c.add(‘key2‘, 2);  
  7.         c.add(‘key3‘, 3);  
  8.         var result = [];  
  9.         for (var i = 0; i < c.getCount(); i++) {  
  10.             result.push(c.get(i));  
  11.         }  
  12.         alert(result);//打印1,2,3  
  13.           
  14.         //索引1增加key值为key10值为100  
  15.         c.insert(1, ‘key10‘, 100);  
  16.         var result = [];  
  17.         for (var i = 0; i < c.getCount(); i++) {  
  18.             result.push(c.get(i));  
  19.         }  
  20.         alert(result);//打印1,100,2,3  
  21.          
  22.     });  
  23. </script>  

8. MixedCollection的事件

[plain] view plaincopy
 
  1. MixedCollection继承了Observable,因此可以设置监听函数,  
  2. MixedCollection内部定义了add,clear,remove,replace等4个事件  
[javascript] view plaincopy
 
    1. <script type="text/javascript" defer>    
    2.     Ext.onReady(function() {  
    3.         var c = new Ext.util.MixedCollection();  
    4.         c.on(‘add‘, function(index, o, key) {  
    5.             alert(‘在‘ + index + ‘添加了数据‘ + o + ‘,key为‘ + key);  
    6.         });  
    7.         c.on(‘clear‘, function() {  
    8.             alert(‘集合数据被清空‘);  
    9.         });  
    10.         c.on(‘remove‘, function(o, key) {  
    11.             alert(‘删除了数据‘ + o + ‘,key为‘ + key);  
    12.         });  
    13.         c.on(‘replace‘, function(key, oldObject, newObject) {  
    14.             alert(‘修改了key为‘ + key + ‘的数据‘ + newObject + ‘,修改前的值为‘ + oldObject);  
    15.         });  
    16.       
    17.         Ext.get(‘add‘).on(‘click‘, function() {  
    18.             c.add(new Date().getTime());  
    19.         });  
    20.         Ext.get(‘clear‘).on(‘click‘, function() {  
    21.             c.clear();  
    22.         });  
    23.         Ext.get(‘remove‘).on(‘click‘, function() {  
    24.             c.removeAt(0);  
    25.         });  
    26.         Ext.get(‘replace‘).on(‘click‘, function() {  
    27.             c.replace(0, new Date().toLocaleString());  
    28.         });  
    29.       
    30.     });  
    31. </script>  
    32.   </head>  
    33.   <body>  
    34.     <button id=‘add‘>add</button>  
    35.     <button id=‘clear‘>clear</button>  
    36.     <button id=‘remove‘>remove</button>  
    37.     <button id=‘replace‘>replace</button>  
    38.     <div id=‘result‘></div>  
    39.   </body>  
    40. </html>  

extjs学习笔记--混合型集合 Ext.util.MixedCollection,布布扣,bubuko.com

extjs学习笔记--混合型集合 Ext.util.MixedCollection

上一篇：MVC验证03-自定义验证规则、禁止输入某些值


下一篇：Python 发送邮件