Ext.Net 1.2.0_Ext.Net.CheckboxGroup 勾选、全选、反选和限制勾选

本文内容

• 演示 CheckboxGroup 勾选、全选、反选和限制勾选
• 运行结果
• 说明
• 修改记录

演示 CheckboxGroup 勾选、全选、反选和限制勾选

脚本

<script type="text/javascript" defer="defer">
    ConstraintChkedNum = 3; // 自定义限制勾选的数量
    chkedId = [];
    var checkWeek = {
        SelectedAll: function(chkGrp) {
            var idx;
            var cbAll = Ext.getCmp(chkGrp.items.items[chkGrp.items.length - 2].id);
            for (idx = 0; idx < chkGrp.items.length - 1; idx++) {
                var cb = Ext.getCmp(chkGrp.items.items[idx].id);
                cb.setValue(cbAll.checked);
            }
        },
        Unselected: function(chkGrp) {
            var idx;
            for (idx = 0; idx < chkGrp.items.length - 2; idx++) {
                var cb = Ext.getCmp(chkGrp.items.items[idx].id);
                cb.setValue(!cb.checked);
            }
        },
        SelectedConstraint: function(chk) {
            if (chkedId.length >= ConstraintChkedNum) {
                if (chkedId.join(',').match(chk.id) && !chk.checked) {
                    chkedId.remove(chk.id)
                }
                else {
                    alert('最多勾选 ' + ConstraintChkedNum + ' 项.');
                    chk.suspendEvents();
                    chk.setValue(false);
                    chk.resumeEvents();
                }
            }
            else {
                if (chk.checked) chkedId.push(chk.id);
                else chkedId.remove(chk.id);
            }
        }
    }
</script>

HTML文档

<h1>
      勾选全选反选</h1>
  <ext:CheckboxGroup ID="Weeks" runat="server" Width="500" Height="50">
      <Items>
          <ext:Checkbox ID="Checkbox1" runat="server" Name="Checkbox1" BoxLabel="周一" />
          <ext:Checkbox ID="Checkbox2" runat="server" Name="Checkbox1" BoxLabel="周二" />
          <ext:Checkbox ID="Checkbox3" runat="server" Name="Checkbox1" BoxLabel="周三" />
          <ext:Checkbox ID="Checkbox4" runat="server" Name="Checkbox1" BoxLabel="周四" />
          <ext:Checkbox ID="Checkbox5" runat="server" Name="Checkbox1" BoxLabel="周五" />
          <ext:Checkbox ID="Checkbox6" runat="server" Name="Checkbox1" BoxLabel="周六" />
          <ext:Checkbox ID="Checkbox7" runat="server" Name="Checkbox1" BoxLabel="周日" />
          <ext:Checkbox ID="Checkbox8" runat="server" Name="Checkbox1" BoxLabel="全选">
              <Listeners>
                  <Check Handler="checkWeek.SelectedAll(#{Weeks})" />
              </Listeners>
          </ext:Checkbox>
          <ext:Checkbox ID="Checkbox9" runat="server" Name="Checkbox1" BoxLabel="反选">
              <Listeners>
                  <Check Handler="checkWeek.Unselected(#{Weeks})" />
              </Listeners>
          </ext:Checkbox>
      </Items>
  </ext:CheckboxGroup>
  <h1>
      限制勾选</h1>
  <ext:CheckboxGroup ID="WeeksConstr" runat="server" Width="500" Height="200">
      <Items>
          <ext:Checkbox ID="Checkbox10" runat="server" Name="Checkbox1" BoxLabel="周一">
              <Listeners>
                  <Check Fn="checkWeek.SelectedConstraint" />
              </Listeners>
          </ext:Checkbox>
          <ext:Checkbox ID="Checkbox11" runat="server" Name="Checkbox1" BoxLabel="周二">
              <Listeners>
                  <Check Fn="checkWeek.SelectedConstraint" />
              </Listeners>
          </ext:Checkbox>
          <ext:Checkbox ID="Checkbox12" runat="server" Name="Checkbox1" BoxLabel="周三">
              <Listeners>
                  <Check Fn="checkWeek.SelectedConstraint" />
              </Listeners>
          </ext:Checkbox>
          <ext:Checkbox ID="Checkbox13" runat="server" Name="Checkbox1" BoxLabel="周四">
              <Listeners>
                  <Check Fn="checkWeek.SelectedConstraint" />
              </Listeners>
          </ext:Checkbox>
          <ext:Checkbox ID="Checkbox14" runat="server" Name="Checkbox1" BoxLabel="周五">
              <Listeners>
                  <Check Fn="checkWeek.SelectedConstraint" />
              </Listeners>
          </ext:Checkbox>
          <ext:Checkbox ID="Checkbox15" runat="server" Name="Checkbox1" BoxLabel="周六">
              <Listeners>
                  <Check Fn="checkWeek.SelectedConstraint" />
              </Listeners>
          </ext:Checkbox>
          <ext:Checkbox ID="Checkbox16" runat="server" Name="Checkbox1" BoxLabel="周日">
              <Listeners>
                  <Check Fn="checkWeek.SelectedConstraint" />
              </Listeners>
          </ext:Checkbox>
      </Items>
  </ext:CheckboxGroup>

运行结果

说明

代码本身不难，无非是对控件对象的属性和方法的操作。值得注意的是，chk.suspendEvents() 和 chk.resumeEvents() 是挂起和恢复 checkbox 控件的事件。

在用 IE 8 调试时，如果不知道某个控件都有哪些属性和方法，可以故意把 JavaScript 写错，比如 alert(aaaaaaaa)，让 IE 报错，你就能看到他们的属性和方法。只是，与面向对象不同，尤其是 JavaScript 方法，参数的含义实在是太简单，这是 JavaScript 的特点决定的，慢慢积累吧。

修改记录

• 第一次 2011-12-21 [BUG] 限制勾选

下载 Demo