`

Ext checkbox 获取boxLabel 的值

    博客分类:
  • ext
阅读更多
1.fieldset(checkbox) 获取值

复选框组件定义如下:
{
                xtype: 'fieldset',
                title: '兴趣',
                autoHeight: true,
                defaultType: 'checkbox',
                hideLabels: true,
                id: 'xq',
                layout: 'hbox',
                defaults: {
                    flex: 1
                },
                //vertical: false,
                items: [
                    { boxLabel: '游泳', name: 'xqn', inputValue: '4', checked: true },
                    { boxLabel: '玩儿', name: 'xqn', inputValue: '5' },
                    { boxLabel: '游戏', name: 'xqn', inputValue: '6' }
                ]
}


页面效果:


获取值代码:
       
 //获取通过fieldset定义的checkbox值 
                    var xqCheck = Ext.getCmp('xq').items;
                    var xq = '';
                    for(var i = 0; i < xqCheck.length; i++){
                        if(xqCheck.get(i).checked){
                            xq += '+' + xqCheck.get(i).boxLabel;
                        }
                    }
                    Ext.MessageBox.alert('提示', '您的兴趣是' + xq);

 //另一种写法:
                    var xqCheck = Ext.getCmp('xq').items.items;
                    var xq = '';
                    for (var index in xqCheck){
                        if(xqCheck[index].checked){
                           xq += '+' + xqCheck.get(i).boxLabel;
                        }
                    }
                    Ext.MessageBox.alert('提示', '您的兴趣是' + xq);




2.checkboxgroup 获取值

定义:
{
                xtype: 'checkboxgroup',
                fieldLabel: 'Hobby',
                id: 'hobby',
                columns: 2,
                vertical: true,
                items: [
                    { boxLabel: 'music', name: 'rb', inputValue: '1', checked: true },
                    { boxLabel: 'sport', name: 'rb', inputValue: '2' },
                    { boxLabel: 'draw', name: 'rb', inputValue: '3' }
                ]
}


页面效果:


获取值:
//获取通过checkboxgroup定义的checkbox值
                    var hobbyValue = Ext.getCmp('hobby').getChecked();
                    var hobby;
                    Ext.Array.each(hobbyValue, function(item){
                        hobby += '+' + item.boxLabel;
                    });
                    Ext.MessageBox.alert('提示', '您的兴趣是' + hobby);






-引自:http://www.cnblogs.com/lihuiyy/archive/2012/08/20/2647144.html


















-
  • 大小: 4 KB
  • 大小: 3.4 KB
分享到:
评论

相关推荐

    Ext checkBoxGroup的用法和取值

    在这个例子中,我们首先通过`getCmp()`或`down()`方法获取到`Panel`或`checkBoxGroup`的实例,然后调用`getValue()`获取选中的值。如果用户没有选择任何选项,`getValue()`会返回一个空数组。 此外,还可以监听`...

    Ext表单组件之checkbox

    var checkbox = Ext.create('Ext.form.field.Checkbox', { fieldLabel: '同意协议', name: 'agreement' }); ``` 3. **事件监听** Ext JS的复选框支持多种事件,如`change`(当值改变时触发)、`check`(当复...

    ExtJS实现动态读写Checkboxgroup

    动态读取CheckboxGroup的状态,可以通过访问其`getValue()`方法来获取选中的值。这将返回一个数组,包含所有选中Checkbox的inputValue: ```javascript var selectedValues = checkboxGroup.getValue(); console....

    Extjs3.0 checkboxGroup 动态添加item实现思路

    虽然它继承了Ext.form.Field,但是却类似于容器。 CheckboxGroup配置中的items处理生成一个对应的panel,该处理过程只有一次,所以很难对CheckboxGroup进行动态添加。如需要数据动态创建,试着创建整个CheckboxGroup...

    EXT 多选

    EXT 提供了丰富的组件库,包括表格、面板、窗口、表单等,而“多选”功能则主要体现在 EXT 的表单组件中,特别是多选框(CheckboxGroup)。 EXT 的多选功能通常通过 CheckboxGroup 组件来实现,这是一个可以包含多...

    extjs4如何自动生成掌握grid的列显示、隐蔽的checkbox_.docx

    2. **创建CheckboxGroup**:基于获取到的信息,创建一个CheckboxGroup,并为每一列添加一个Checkbox。 3. **监听Checkbox事件**:为每个Checkbox添加监听器,当Checkbox的状态发生改变时,更新GridPanel中对应列的...

    ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox

    4. 使用for循环遍历fields数组,为每一个字段创建一个checkboxfield,并设置其属性,包括boxLabel(显示的标签,即列的标题)、inputValue(唯一值,用于识别)、checked(是否默认选中)等。 5. 为每个...

    .archExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇).doc

    - `boxLabel`:设置复选框右侧显示的文本标签。 - `name`:每个复选框的name属性,用于识别和区分不同的复选框。 - `columnWidth`:定义在多列布局中占据的宽度比例。 - `checked`:默认是否选中,设置为`true`...

    extjs详细ppt

    - **复选框组 (`Ext.form.field.CheckboxGroup`)**:一组复选框。 - **单选按钮组 (`Ext.form.field.RadioGroup`)**:一组单选按钮。 - **下拉组合框 (`Ext.form.field.ComboBox`)**:结合列表和输入框的功能。 ...

Global site tag (gtag.js) - Google Analytics