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);
时间: 2024-10-14 03:46:50

EXTJS 4.2 资料 控件之checkboxgroup的用法(静态数据)的相关文章

EXTJS 4.2 资料 控件之checkboxgroup的用法

代码判断 { xtype: 'panel', width: 750, border: false, flex: 1, items: [{ xtype: 'checkboxgroup', id: 'lblOperationBehavior', name: 'lblOperationBehavior', itemCls: 'x-check-group-alt', columns: 4, fieldLabel: '设定权限', labelWidth: 100, width: 750, align: '

EXTJS 4.2 资料 控件之radiogroup 的用法

最近在EXTJS4.2开发项目,radiogroup的用法,主要是和grid之间的编辑功能:看了好多资料都不对,特此在这里备注记录 代码如下, 1.这是一段Win窗体上的两个单选按钮,设置单选按钮都是选择“是” a. { xtype: 'fieldcontainer', layout: 'hbox', defaults: { flex: 1 }, items: [{ xtype: 'radiogroup', fieldLabel: '手机验证', width: 100, items: [ { b

EXTJS 3.0 资料 控件之 html 潜入label用法

这是在Extjs 中插入html 控件label! html: "<div><label id='howMany'>您共选中了</label><br/></div>"获取label值:document.getElementById('howMany').innerText赋值label值:document.getElementById('howMany').innerText = "这是赋值"; docum

EXTJS 3.0 资料 控件之 combo 用法

EXTJS combo 控件: 1.先定义store //年款 var comboData_ReleasYear = [ ['0', '2010'], ['1', '2011'], ['2', '2013'], ['3', '2014'] ]; 2.定义combo控件 { layout: 'form', labelWidth: 50, width: 260, items: [{ xtype: 'combo', name: 'ReleasYear', allowBlank: false, fiel

EXTJS 4.2 资料 控件之Grid 那些事

最近在学习Extjs4.2 ,积累文章,看得不错,再此留年: //表格数据最起码有列.数据.转换原始数据这3项 Ext.onReady(function(){ //定义列 var columns = [ {header:'编号',dataIndex:'id',width:50}, //sortable:true 可设置是否为该列进行排序 {header:'名称',dataIndex:'name',width:80}, {header:'描述',dataIndex:'descn',width:11

EXTJS 3.0 资料 控件之 Store 用法

最近工作,发现在Extjs中自定义Store的功能挺多,特意在此做笔记,几下来,具体代码如下: 1.定义Store //定义Store var ItemSelectorStore = new Ext.data.ArrayStore({ fields: [ { name: 'BaseInfoId' }, { name: 'Title' } ] }); 2.根据Grid的数据,循环往Store里面插 var rows = grid.getSelectionModel().getSelections(

EXTJS 4.2 资料 控件之Grid Columns 列renderer 绑定事件

columns: [ { header: '序号', xtype: 'rownumberer', align: 'center', width: 100 }, { header: 'CompanyId', dataIndex: 'CompanyId', width: 100, hidden: true }, { header: '商家名称', dataIndex: 'CompanyName', width: 200 }, { header: '商家英文名称', dataIndex: 'Compa

EXTJS 3.0 资料 控件之 itemselector 用法

1 var dsform = new Ext.data.ArrayStore({ 2 data: [[123, 'One Hundred Twenty Three'], 3 ['1', '今天星期一'], ['2', '2014.12.29'], ['3', '9.25'], ['4', '北京'], ['5', '肖村桥'], 4 ['6', '成换成'], ['7', '35号'], ['8', '4层'], ['9', '6666']], 5 fields: ['value', 'text

EXTJS 4.2 资料 控件之Window窗体相关属性的用法

最大化,最小化,是否显示关闭按钮 var win_CommonPicLibMultiple = Ext.create("Ext.window.Window", { title: "选择图片", //标题 draggable: false, border: false, icon: '/Resources/Images/16x16/blue16_005.gif', height: 800, //高度 width: 1200, //宽度 layout: "fi