zoukankan      html  css  js  c++  java

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

    [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>  
  • 相关阅读:
    spring cloud 和 阿里微服务spring cloud Alibaba
    为WPF中的ContentControl设置背景色
    java RSA 解密
    java OA系统 自定义表单 流程审批 电子印章 手写文字识别 电子签名 即时通讯
    Hystrix 配置参数全解析
    spring cloud 2020 gateway 报错503
    Spring Boot 配置 Quartz 定时任务
    Mybatis 整合 ehcache缓存
    Springboot 整合阿里数据库连接池 druid
    java OA系统 自定义表单 流程审批 电子印章 手写文字识别 电子签名 即时通讯
  • 原文地址：https://www.cnblogs.com/CoffeeHome/p/3580243.html
Copyright © 2011-2022 走看看