• EXTJS 4.2 资料 控件之checkboxgroup的用法(静态数据)


    1.页面

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

     {
                     xtype: 'fieldset', title: '指定附加图&横幅设置', collapsible: true,
                     items: [
                            {
                                xtype: 'container',
                                layout: 'hbox',
                                flex: 1,
                                items: [{
                                    xtype: 'checkboxgroup',
                                    fieldLabel: '指定附加图',
                                     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);
  • 相关阅读:
    e:可以解包多种存档花样的小工具
    Envy-便当的显卡驱动装置脚本
    用 Timer Applet 做 GTD 经管
    Sabayon:治理 GNOME 用户的设置
    网管的心得体会
    WinAPI: WindowFromPoint 获取指定点所在窗口的句柄
    WinAPI: SetLayeredWindowAttributes 设置窗口的透明
    谈谈 Delphi 的类型与指针[1]
    全局探色器
    说到"计算器", 建议大家用它进行"进制转换"
  • 原文地址:https://www.cnblogs.com/foreverfendou/p/4283478.html
Copyright © 2020-2023  润新知