EXTJS 4.2 资料控件之checkboxgroup的用法（静态数据）

浏览数：67 / 时间：2015年06月09日

技术分享

1.页面

1.1点击‘横幅’，需要动态显示隐藏文本框

 {
                 xtype: ‘fieldset‘, title: ‘指定附加图&横幅设置‘, collapsible: true,
                 items: [
                        {
                            xtype: ‘container‘,
                            layout: ‘hbox‘,
                            flex: 1,
                            items: [{
                                xtype: ‘checkboxgroup‘,
                                fieldLabel: ‘指定附加图‘,
                                width: 100, flex: 1,
                                columns: 1,
                                vertical: true,
                                id: ‘picType‘,
                                items: [
                                   { boxLabel: ‘略图‘, name: ‘thumbed‘, inputValue: ‘thumb‘, checked: true },
                                   { boxLabel: ‘图标‘, name: ‘iconed‘, inputValue: ‘icon‘, },
                                   {
                                       boxLabel: ‘横幅‘, name: ‘bannered‘, inputValue: ‘banner‘, listeners: {
                                           change: function (cb, nv, ov) {
                                               if (cb.getValue() == true) {
                                                   Ext.getCmp(‘banner‘).show();
                                               }
                                               else {
                                                   Ext.getCmp(‘banner‘).hide();
                                               }
                                           }
                                       }
                                   }
                                ]
                            }
                            ]
                        }, {
                            xtype: ‘container‘,
                            id: ‘banner‘,
                            hidden: true,
                            flex: 1,
                            layout: ‘anchor‘,
                            defaultType: ‘textfield‘,
                            items: [{
                                fieldLabel: ‘宽‘,
                                afterLabelTextTpl: required,
                                allowBlank: false,
                                name: ‘BannerWidth‘,
                                anchor: ‘50%‘
                            }, {
                                fieldLabel: ‘高‘,
                                afterLabelTextTpl: required,
                                allowBlank: false,
                                name: ‘BannerHeight‘,
                                anchor: ‘50%‘
                            }]
                        }

                 ]
             },

2.取值

            //----------------获取选中是否true、false 开始-----------------
            var thumbed = dataViewPanel_Right.form.findField(‘thumbed‘).getValue();//获取选中是否true、false
            var iconed = dataViewPanel_Right.form.findField(‘iconed‘).getValue();//获取选中是否true、false
            var bannered = dataViewPanel_Right.form.findField(‘bannered‘).getValue();//获取选中是否true、false
            //----------------获取选中是否true、false 结束-----------------

            //----------------获取选中的checkbox值 开始-----------------
            var chkLableValue = Ext.getCmp(‘picType‘).getChecked();
            var lblValue = [];
            Ext.Array.each(chkLableValue, function (item) {
                lblValue.push(item.inputValue);
            });
            //----------------获取选中的checkbox值 结束-----------------
            alert(lblValue);