單選框和複選框組

    //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
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章