EXT表單組件常見屬性介紹（三）

handanyou 2011-01-18

展開全文

本范例展示如何使用表單的各種組件。

下拉框組件展示了5種使用范例：普通下拉框、綁定HTML組件的下拉框、樹形下拉框、分頁下拉框、多選下拉框等。

Js代碼

Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = "/widgets/ext-2.2/resources/images/default/s.gif";
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = "qtip";
//component
var hiddenField = new Ext.form.Hidden({
name: "hiddenField",
value: "1"
});
var usernameField = new Ext.form.TextField({
name: "username",
fieldLabel: "用戶名",
allowBlank: true,
blankText: "請(qǐng)輸入用戶名！"
});
var pwdField = new Ext.form.TextField({
name: "password",
fieldLabel: "密碼",
allowBlank: true,
blankText: "請(qǐng)輸入密碼！",
inputType: "password"
});
var ageField = new Ext.form.NumberField({
name: "age",
allowBlank: true,
blankText: "請(qǐng)輸入年齡！",
fieldLabel: "年齡",
allowDecimals: false,
allowNegative: false,
minValue: 18,
minText: "年齡不能少于18",
maxValue: 100,
maxText: "年齡不能大于100"
});
var love1 = new Ext.form.Checkbox({
name: "love1",
boxLabel: "打球",
inputValue: "1"
});
var love2 = new Ext.form.Checkbox({
name: "love2",
boxLabel: "游泳",
inputValue: "2"
});
var love3 = new Ext.form.Checkbox({
name: "love3",
boxLabel: "登山",
inputValue: "3"
});
var loveGroup = new Ext.form.CheckboxGroup({
name: "love",
columns: [80, 80, 1.0],
fieldLabel: "愛好",
items: [love1, love2, love3]
});
var sex1 = new Ext.form.Radio({
name: "sex1",
boxLabel: "男",
inputValue: "1"
});
var sex2 = new Ext.form.Radio({
name: "sex1",
boxLabel: "女",
inputValue: "0"
});
var sexGroup = new Ext.form.RadioGroup({
name: "sex",
columns: [80, 1.0],
fieldLabel: "性別",
items: [sex1, sex2]
});
//本地?cái)?shù)據(jù)源的組合框
var store = new Ext.data.SimpleStore({
fields: ["code", "name"],
data: [
["1", "北京"],
["5", "上海"],
["4", "廣東"]
]
});
var cmbProvince = new Ext.form.ComboBox({
id: "cmbProvince",
hiddenName: "province.id",
fieldLabel: "省份",
resizable: true,
editable: false,
width: 100,
emptyText: "請(qǐng)選擇...",
store: store,
valueField: "code",
displayField: "name",
triggerAction: "all",
mode: "local"
});
//遠(yuǎn)程數(shù)據(jù)源的組合框
var store2 = new Ext.data.SimpleStore({
fields: ["name"],
proxy: new Ext.data.HttpProxy({
url: "../testForm!loadData.action"
})
});
var cmbManager = new Ext.form.ComboBox({
hiddenName: "manager",
fieldLabel: "經(jīng)理",
editable: false,
triggerAction: "all",
mode: "local",
maxHeight: 200,
store: new Ext.data.SimpleStore({fields:[],data:[[]]}),
onSelect: Ext.emptyFn,
tpl: "<tpl for='.'><div id='tree'></div></tpl>"
});
var root = new Ext.tree.TreeNode({
nodeId: 1,
text: "根節(jié)點(diǎn)",
expanded: true
});
root.appendChild(new Ext.tree.TreeNode({nodeId:2, text:"節(jié)點(diǎn)A", leaf:true}));
root.appendChild(new Ext.tree.TreeNode({nodeId:3, text:"節(jié)點(diǎn)B", leaf:true}));
var tree = new Ext.tree.TreePanel({
root: root,
border: false,
autoHeight: true,
autoScroll: true
});
tree.on("click", function(node){
if(!node.isLeaf()) return; //只能選擇葉節(jié)點(diǎn)
//下拉框的隱藏值
if(cmbManager.hiddenField){
cmbManager.hiddenField.value = node.attributes.nodeId;
}
cmbManager.setRawValue(node.text); //下拉框的顯示值
cmbManager.collapse(); //折疊下拉框
});
cmbManager.on("expand", function(){
tree.render("tree");
});
//分頁遠(yuǎn)程數(shù)據(jù)源的組合框
var store3 = new Ext.data.JsonStore({
url: "../testForm!loadData3.action",
totalProperty: "totalNum",
root: "books",
fields: ["id", "name"]
});
var cmbBook = new Ext.form.ComboBox({
hiddenName: "books",
fieldLabel: "書籍",
store: store3,
valueField: "name",
displayField: "name",
triggerAction: "all",
mode: "remote",
queryParam: "books",
loadingText: "正在裝載數(shù)據(jù)...",
width: 180,
minChars: 1,
editable: false,
listWidth: 250,
pageSize: 3
});
//HTML標(biāo)準(zhǔn)組件
var cmbPass = new Ext.form.ComboBox({
hiddenName: "status",
fieldLabel: "是否有效",
triggerAction: "all",
editable: false,
width: 100,
transform: "isPass",
lazyRender: true
});
var cmbTimes = new Ext.form.TimeField({
hiddenName: "time",
fieldLabel: "時(shí)間",
minValue: "09:00",
minText: "所選時(shí)間應(yīng)大于{0}",
maxValue: "18:00",
maxText: "所選時(shí)間應(yīng)小于{0}",
format: "H時(shí)i分",
increment: 30,
invalidText: "時(shí)間格式無效！",
maxHeight: 200,
width: 100,
value: "09時(shí)00分",
editable: false
});
var cmbMonths = new Ext.ux.MultiSelectCombo({
hiddenName: "months",
fieldLabel: "月份",
maxHeight: 200,
editable: false,
store: [["201010","201010"], ["201009","201009"], ["201008","201008"], ["201007","201007"], ["201006","201006"]],
mode: "local",
width: 180,
maxItemsCount: 3,
maxItemsCountText: "最多只能選擇三個(gè)選項(xiàng)！"
});
var cmbBirths = new Ext.form.DateField({
name: "births",
fieldLabel: "出生日期",
disabledDays: [0,6],
disabledDaysText: "禁止選擇周末！",
width: 100,
readOnly: true,
format: "Y-m-d",
invalidText: "不是有效的日期值！"
});
var fieldSet1 = new Ext.form.FieldSet({
title: "下拉框",
checkboxName: "fieldSet1",
checkboxToggle: true,
autoHeight: true,
layout: "table",
layoutConfig: {
columns: 3
},
defaults: {
style:"margin-left:8px; margin-top:3px; margin-right:8px; margin-bottom:3px; valign:top",
layout:"form",
labelAlign: "right"
},
items: [
{rowspan:1, colspan:1, items:[cmbProvince]},
{rowspan:1, colspan:1, items:[cmbManager]},
{rowspan:1, colspan:1, items:[cmbBook]},
{rowspan:1, colspan:1, items:[cmbPass]},
{rowspan:1, colspan:1, items:[cmbTimes]},
{rowspan:1, colspan:1, items:[cmbMonths]},
{rowspan:1, colspan:1, items:[cmbBirths]}]
});
var remarksField = new Ext.form.TextArea({
name: "remarks",
fieldLabel: "備注",
width: 400,
height: 80
});
var form = new Ext.form.FormPanel({
id: "frmAddUser",
title: "新增用戶",
autoWidth: true,
autoHeight: true,
frame: true,
renderTo: Ext.getBody(),
labelWidth: 70,
tbar: toolbar,
items: [hiddenField, usernameField, pwdField, ageField, loveGroup, sexGroup,
fieldSet1, remarksField],
url: "../testForm!ajaxSubmitForm.action"
});
});

Js代碼

Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = "/widgets/ext-2.2/resources/images/default/s.gif";
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = "qtip";
//component
var hiddenField = new Ext.form.Hidden({
name: "hiddenField",
value: "1"
});
var usernameField = new Ext.form.TextField({
name: "username",
fieldLabel: "用戶名",
allowBlank: true,
blankText: "請(qǐng)輸入用戶名！"
});
var pwdField = new Ext.form.TextField({
name: "password",
fieldLabel: "密碼",
allowBlank: true,
blankText: "請(qǐng)輸入密碼！",
inputType: "password"
});
var ageField = new Ext.form.NumberField({
name: "age",
allowBlank: true,
blankText: "請(qǐng)輸入年齡！",
fieldLabel: "年齡",
allowDecimals: false,
allowNegative: false,
minValue: 18,
minText: "年齡不能少于18",
maxValue: 100,
maxText: "年齡不能大于100"
});
var love1 = new Ext.form.Checkbox({
name: "love1",
boxLabel: "打球",
inputValue: "1"
});
var love2 = new Ext.form.Checkbox({
name: "love2",
boxLabel: "游泳",
inputValue: "2"
});
var love3 = new Ext.form.Checkbox({
name: "love3",
boxLabel: "登山",
inputValue: "3"
});
var loveGroup = new Ext.form.CheckboxGroup({
name: "love",
columns: [80, 80, 1.0],
fieldLabel: "愛好",
items: [love1, love2, love3]
});
var sex1 = new Ext.form.Radio({
name: "sex1",
boxLabel: "男",
inputValue: "1"
});
var sex2 = new Ext.form.Radio({
name: "sex1",
boxLabel: "女",
inputValue: "0"
});
var sexGroup = new Ext.form.RadioGroup({
name: "sex",
columns: [80, 1.0],
fieldLabel: "性別",
items: [sex1, sex2]
});
//本地?cái)?shù)據(jù)源的組合框
var store = new Ext.data.SimpleStore({
fields: ["code", "name"],
data: [
["1", "北京"],
["5", "上海"],
["4", "廣東"]
]
});
var cmbProvince = new Ext.form.ComboBox({
id: "cmbProvince",
hiddenName: "province.id",
fieldLabel: "省份",
resizable: true,
editable: false,
width: 100,
emptyText: "請(qǐng)選擇...",
store: store,
valueField: "code",
displayField: "name",
triggerAction: "all",
mode: "local"
});
//遠(yuǎn)程數(shù)據(jù)源的組合框
var store2 = new Ext.data.SimpleStore({
fields: ["name"],
proxy: new Ext.data.HttpProxy({
url: "../testForm!loadData.action"
})
});
var cmbManager = new Ext.form.ComboBox({
hiddenName: "manager",
fieldLabel: "經(jīng)理",
editable: false,
triggerAction: "all",
mode: "local",
maxHeight: 200,
store: new Ext.data.SimpleStore({fields:[],data:[[]]}),
onSelect: Ext.emptyFn,
tpl: "<tpl for='.'><div id='tree'></div></tpl>"
});
var root = new Ext.tree.TreeNode({
nodeId: 1,
text: "根節(jié)點(diǎn)",
expanded: true
});
root.appendChild(new Ext.tree.TreeNode({nodeId:2, text:"節(jié)點(diǎn)A", leaf:true}));
root.appendChild(new Ext.tree.TreeNode({nodeId:3, text:"節(jié)點(diǎn)B", leaf:true}));
var tree = new Ext.tree.TreePanel({
root: root,
border: false,
autoHeight: true,
autoScroll: true
});
tree.on("click", function(node){
if(!node.isLeaf()) return; //只能選擇葉節(jié)點(diǎn)
//下拉框的隱藏值
if(cmbManager.hiddenField){
cmbManager.hiddenField.value = node.attributes.nodeId;
}
cmbManager.setRawValue(node.text); //下拉框的顯示值
cmbManager.collapse(); //折疊下拉框
});
cmbManager.on("expand", function(){
tree.render("tree");
});
//分頁遠(yuǎn)程數(shù)據(jù)源的組合框
var store3 = new Ext.data.JsonStore({
url: "../testForm!loadData3.action",
totalProperty: "totalNum",
root: "books",
fields: ["id", "name"]
});
var cmbBook = new Ext.form.ComboBox({
hiddenName: "books",
fieldLabel: "書籍",
store: store3,
valueField: "name",
displayField: "name",
triggerAction: "all",
mode: "remote",
queryParam: "books",
loadingText: "正在裝載數(shù)據(jù)...",
width: 180,
minChars: 1,
editable: false,
listWidth: 250,
pageSize: 3
});
//HTML標(biāo)準(zhǔn)組件
var cmbPass = new Ext.form.ComboBox({
hiddenName: "status",
fieldLabel: "是否有效",
triggerAction: "all",
editable: false,
width: 100,
transform: "isPass",
lazyRender: true
});
var cmbTimes = new Ext.form.TimeField({
hiddenName: "time",
fieldLabel: "時(shí)間",
minValue: "09:00",
minText: "所選時(shí)間應(yīng)大于{0}",
maxValue: "18:00",
maxText: "所選時(shí)間應(yīng)小于{0}",
format: "H時(shí)i分",
increment: 30,
invalidText: "時(shí)間格式無效！",
maxHeight: 200,
width: 100,
value: "09時(shí)00分",
editable: false
});
var cmbMonths = new Ext.ux.MultiSelectCombo({
hiddenName: "months",
fieldLabel: "月份",
maxHeight: 200,
editable: false,
store: [["201010","201010"], ["201009","201009"], ["201008","201008"], ["201007","201007"], ["201006","201006"]],
mode: "local",
width: 180,
maxItemsCount: 3,
maxItemsCountText: "最多只能選擇三個(gè)選項(xiàng)！"
});
var cmbBirths = new Ext.form.DateField({
name: "births",
fieldLabel: "出生日期",
disabledDays: [0,6],
disabledDaysText: "禁止選擇周末！",
width: 100,
readOnly: true,
format: "Y-m-d",
invalidText: "不是有效的日期值！"
});
var fieldSet1 = new Ext.form.FieldSet({
title: "下拉框",
checkboxName: "fieldSet1",
checkboxToggle: true,
autoHeight: true,
layout: "table",
layoutConfig: {
columns: 3
},
defaults: {
style:"margin-left:8px; margin-top:3px; margin-right:8px; margin-bottom:3px; valign:top",
layout:"form",
labelAlign: "right"
},
items: [
{rowspan:1, colspan:1, items:[cmbProvince]},
{rowspan:1, colspan:1, items:[cmbManager]},
{rowspan:1, colspan:1, items:[cmbBook]},
{rowspan:1, colspan:1, items:[cmbPass]},
{rowspan:1, colspan:1, items:[cmbTimes]},
{rowspan:1, colspan:1, items:[cmbMonths]},
{rowspan:1, colspan:1, items:[cmbBirths]}]
});
var remarksField = new Ext.form.TextArea({
name: "remarks",
fieldLabel: "備注",
width: 400,
height: 80
});
var form = new Ext.form.FormPanel({
id: "frmAddUser",
title: "新增用戶",
autoWidth: true,
autoHeight: true,
frame: true,
renderTo: Ext.getBody(),
labelWidth: 70,
tbar: toolbar,
items: [hiddenField, usernameField, pwdField, ageField, loveGroup, sexGroup,
fieldSet1, remarksField],
url: "../testForm!ajaxSubmitForm.action"
});
});

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自： handanyou > 《ext》

舉報(bào)/認(rèn)領(lǐng)