单选框和复选框组

    //Ext.form.CheckboxGroup和Ext.form.RadioGroup
        /// <reference path="Extjs/ext-all-dev.js" /> 
        Ext.get(document.body).update("<div></div>")
        var f_Pannel = Ext.create('Ext.form.Panel', {
            renderTo: Ext.getBody(),
            frame: true,
            width: 250,
            height: 150,
            defaults: {
                labelSepator: ':',
                labelWidth: 28,
                labelAlign: 'left',//面板中有两个元素:label表单字段标签和表单字段,这里就是表单面板对象,所以可以在这里定义label位置
                width: 200,//定义表单字段的大小,这里是radiogroup和checkboxgroup的宽度。
                //boxLabelAlign: 'before'//单选or复选框内容标签的位置,默认为after。还可设定为before。应该放到radio和checkbox对象中
                //才会其作用
            },
            items: [


                {
                    xtype: 'radiogroup', fieldLabel: '性别', columns: 2,//radio和checkbox仍然数序Ext。form。field的范畴,所以可以
                    items: [                                //这里仍然是filedLabel定义标签内容。columns定义单选框的列数。
                      { boxLabel: '男', name: 'sex' },//boxLabel用以定义radio和checkbox的框内容,name用以定义组件是标识,在
                      { boxLabel: '女', name: 'sex' }//向后台传输数据时是其标识,即是其身份证。在radio使用name,name要定义为相同值
                    ]                              //这样才能实现radio只能选择一个的功能


                },
        {
            xtype: 'checkboxgroup', fieldLabel: '爱好', columns: 3,//columns可能影响到boxLabel的显示问题,其显示可能不能在一行完成
            items: [                          //labelBox值可能会在两行显示~很不美观。columns和width同时影响着boxLabel的显示问题。
              { boxLabel: '唱歌', name: 's' },
              { boxLabel: '远足', name: 'h' },
            { boxLabel: '钓鱼', name: 'f' },
            { boxLabel: 'read', name: 'r' },
            { boxLabel: 'mov', name: 'm' }
            ]
        }
            ]
        });


        //Ext。form。CheckGroup和Ext。form。RadioBox
posted @ 2014-10-24 21:41  lz3018  阅读(436)  评论(0编辑  收藏  举报