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