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>  
  • 相关阅读:
    类型检查-类型表达式:类型系统是一种逻辑系统
    计算机程序是建立在计算机硬件和一系列规则、协议、规范、算法基础之上的；
    类型的基石：数据类型、函数类型
    类型安全
    类型检查-类型系统
    动态类型－类型绑定
    类型安全与类型检查是什么？
    怎样写一个新编程语言
    同名的cookie会不会存在多个
    php array_map与array_walk使用对比
  • 原文地址：https://www.cnblogs.com/CoffeeHome/p/3580243.html
Copyright © 2011-2022 走看看