如何“检查”列表中的所有复选框以“选中”单个复选框?

时间:2012-05-09 07:43:18

标签: android sencha-touch-2 checkbox

我陷入困境,我必须通过“检查”位于工具栏中的复选框来“检查”列表中的所有复选框。

以下是创建复选框列表的代码: -

itemTpl: '<input type="checkbox" name="box" enabled="enabled" value="open" 
name="comment_status" id="status" <tpl if="active">checked="checked"</tpl> />
{groupName}{#}',

这是我的复选框代码: -

var checkBox = {
            xtype: 'checkboxfield',
              name : 'all',
            //  label: 'All',
              itemId: 'all',
              value: 'all',
              lableWidth: "0",
              width: 1,
              padding: '0 0 15 30',
              checked: false,
              listeners: {
                  check:function() {
                     // alert("check");

                      item = Ext.get("status");
                      console.log("item:-"+Ext.JSON.encode(item));

                      chkBox = item.down('input').dom;

                      var checkboxes = Ext.getStore('group');
                      console.log(checkboxes.getCount());

                      for(var i=0;i<checkboxes.getCount();i++){
                       chkBox.checked = true;
                      }

                  },
                  uncheck:function(){
                     // alert("uncheck");
                  }
              }
        };

在上面的复选框检查中,我希望检查“itemTpl”中定义的所有复选框,反之亦然。我知道我在check中的代码:function(){}没有那么好解决我的问题(两者都是不同观点中的代码。)

所以,请告诉我一些解决这个问题的方法。

提前完成。

1 个答案:

答案 0 :(得分:2)

好的,我更新了your senchafiddle以使其正常运行。 实质上,这是我在您的代码中添加的内容:

将2个功能添加到列表控制器中,以管理工具栏中复选框上的操作:

checkAll:function(){
    this.getCheckboxList().getStore().each(function(record){record.set('active', true);});
},
uncheckAll:function(){
    this.getCheckboxList().getStore().each(function(record){record.set('active', false);});
}

添加带有复选框的工具栏,以便在列表上方统一所有(XD):

   {
       xtype : 'toolbar',
       docked: 'top',
       title: 'Check !',
       items:[{
           xtype: 'checkboxfield',
           name : 'all',
           value: 'checkAll',
           listeners:{
               check:function(){
                   MyApp.app.getController('MainViewController').checkAll();
               },
               uncheck:function(){
                   MyApp.app.getController('MainViewController').uncheckAll();
               }
           }
       }]
   }

这需要你的一些css来使ckeckbox变得更好,但行为就在这里。