zoukankan      html  css  js  c++  java
  • extjs radiogroup 互斥

    extjs 中的 radiogroup 中的 radio,在选中一个后,之前被选中的,不能自动设置为false

    通过下面的代码,可以实现。但这个是因为在通过程序设置某radio的状态后,radiogoup会

    两次触发change事件,然后通过比较变化前后的值来判断,不是太好。应该有其它方法可以实现的。

     1 {
     2                     xtype: 'radiogroup',
     3                     height: 96,
     4                      365,
     5                     fieldLabel: 'Label',
     6                     items: [
     7                         {
     8                             xtype: 'radiofield',
     9                             boxLabel: 'Box Label',                        
    10                             name : 'rd0'
    11                         },
    12                         {
    13                             xtype: 'radiofield',
    14                             boxLabel: 'Box Label',
    15                             name : 'rd1'
    16                         },
    17                         {
    18                             xtype: 'radiofield',
    19                             boxLabel: 'Box Label',
    20                                 checked:true,
    21                             name: 'rd2'
    22                         },
    23                         {
    24                             xtype: 'radiofield',
    25                             boxLabel: 'Box Label',
    26                             name : 'rd3'
    27                         },
    28                         {
    29                             xtype: 'radiofield',
    30                             boxLabel: 'Box Label',
    31                             name: 'rd4'
    32                         }
    33                     ],
    34                     listeners:{
    35                         'change':function(view,newrd,oldrd){  
    36                             var cur = -1;
    37                             
    38                             //Radiogroup的选中,先将上一个选中的按钮设置为false,会触发下一次change事件
    39                             for(var i=0;i<view.items.items.length;i++)
    40                             {
    41                                 if(newrd['rd'+i] == 'on' && oldrd['rd'+i] == 'on')
    42                                 {                                  
    43                                     view.items.items[i].setValue( false);
    44                                     return;
    45                                 }
    46                             }                            
    47                             
    48                             //第二次触发,将真正被选中的按钮设置为true
    49                             for(var i=0;i<view.items.items.length;i++)
    50                             {
    51                                 if(newrd['rd'+i] == null && oldrd['rd'+i] == 'on')
    52                                 {                                  
    53                                     view.items.items[i].setValue( true);
    54                                     return;
    55                                 }
    56                             }
    57                         }
    58                       
    59                     }
    60                 }

    上面的实现是错误的,正确的方法是将radiogroup中所有的radio的name属性都设置为一样的,这样就可以实现互斥了。

     1 {
     2                     xtype: 'radiogroup',
     3                     height: 96,
     4                      365,
     5                     fieldLabel: 'Label',
     6                     items: [
     7                         {
     8                             xtype: 'radiofield',
     9                             boxLabel: 'Box Label',                        
    10                             name : 'rd0'
    11                         },
    12                         {
    13                             xtype: 'radiofield',
    14                             boxLabel: 'Box Label',
    15                             name : 'rd0'
    16                         },
    17                         {
    18                             xtype: 'radiofield',
    19                             boxLabel: 'Box Label',
    20                                 checked:true,
    21                             name: 'rd0'
    22                         },
    23                         {
    24                             xtype: 'radiofield',
    25                             boxLabel: 'Box Label',
    26                             name : 'rd0'
    27                         },
    28                         {
    29                             xtype: 'radiofield',
    30                             boxLabel: 'Box Label',
    31                             name: 'rd0'
    32                         }
    33                     ]
    34                 }
  • 相关阅读:
    堆排序
    剑指 Offer 59
    面试题:happen-before原则和as-if-serial语义
    面试题:Redis的持久化机制是什么?各自的优缺点?
    面试题:单线程redis还这么快
    面试题:微服务理论
    wait和notify
    线程八锁
    面试题:在静态方法和非静态方法上加 Synchronized的区别
    面试题:3种线程阻塞唤醒的对比
  • 原文地址:https://www.cnblogs.com/baishahe/p/2512969.html
Copyright © 2011-2022 走看看