EXTJS 4.2 資料 控制項之checkboxgroup的用法（待用資料）

標籤：

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);

 

EXTJS 4.2 資料 控制項之checkboxgroup的用法（待用資料）