JavaScript DHTML/SmartClient/ComboBox
Содержание
Combobox with icon renderer
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Calendar.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.DynamicForm.create({
width: 500,
fields: [{
name: "shipTo", title: "Ship to", type: "select",
hint: "<nobr>Overnight shipping available for countries in bold</nobr>",
valueMap: {
"US" : "United States",
"CH" : "China",
"JA" : "Japan",
"IN" : "India",
"GM" : "Germany",
"FR" : "France",
"IT" : "Italy",
"RS" : "Russia",
"BR" : "Brazil",
"CA" : "Canada",
"MX" : "Mexico",
"SP" : "Spain"
},
imageURLPrefix:"flags/16/",
imageURLSuffix:".png",
valueIcons: {
"US" : "US",
"CH" : "CH",
"JA" : "JA",
"IN" : "IN",
"GM" : "GM",
"FR" : "FR",
"IT" : "IT",
"RS" : "RS",
"BR" : "BR",
"CA" : "CA",
"MX" : "MX",
"SP" : "SP"
}
}]
});
</SCRIPT> </BODY> </HTML>
</source>
Create dropdown combobox
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY> <SCRIPT> var abcdArray = ["a", "b", "c", "d"],
abcdList = {a:"option a", b:"option b", c:"option c", d:"option d"},
formItems = [
{name:"item1", type:"header", defaultValue:"header value"},
{name:"item2", type:"blurb", defaultValue:"blurb value"},
{type:"rowSpacer"},
{name:"item3", title:"staticText", type:"staticText", defaultValue:"staticText value"},
//----- data items -----\\
{name:"item4", title:"text", type:"text", defaultValue:"text value"},
{name:"item10", title:"select", type:"select", valueMap:abcdList, defaultValue:"b"},
];
DynamicForm.create({
ID:"itemsForm", left:20, top:40, width:400, items:formItems, canSubmit:true // Required for the submit button to be operative
}); </SCRIPT> </BODY> </HTML>
</source>
Dropdown combobox with default value and value map
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY> <SCRIPT> var abcdArray = ["a", "b", "c", "d"],
abcdList = {a:"option a", b:"option b", c:"option c", d:"option d"},
formItems = [
{name:"item1", type:"header", defaultValue:"header value"},
{name:"item2", type:"blurb", defaultValue:"blurb value"},
{type:"rowSpacer"},
{name:"item3", title:"staticText", type:"staticText", defaultValue:"staticText value"},
//----- data items -----\\
{name:"item4", title:"text", type:"text", defaultValue:"text value"},
{name:"item12", title:"selectOther", type:"selectOther", valueMap:abcdList, defaultValue:"d"},
];
DynamicForm.create({
ID:"itemsForm", left:20, top:40, width:400, items:formItems, canSubmit:true // Required for the submit button to be operative
}); </SCRIPT> </BODY> </HTML>
</source>
Editable list Combobox
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Calendar.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.DynamicForm.create({
width: 500,
numCols: 4,
fields : [{
name: "bugStatus", title: "Bug Status",
editorType: "comboBox",
valueMap : {
"new" : "New",
"active" : "Active",
"revisit" : "Revisit",
"fixed" : "Fixed",
"delivered" : "Delivered",
"resolved" : "Resolved",
"reopened" : "Reopened"
}
},{
name: "itemName", title: "Item Name", editorType: "comboBox",
optionDataSource: "supplyItem", pickListWidth: 250
}]
});
</SCRIPT> </BODY> </HTML>
</source>
Related ComboBox
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Calendar.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.DynamicForm.create({
fields: [
{ type:"header", defaultValue:"Order Supply Items"},
{ name: "itemID", title:"Item", type:"select",
optionDataSource:"supplyItem",
displayField:"itemName",
change:"label1.setContents("Selected itemID:" + value)"},
{ name:"Quantity", editorType:"SpinnerItem", defaultValue:1, min:1}
]
}); isc.Label.create({
align:"center", border:"1px solid blue", top:75, height:50, width:250, margin:10, ID:"label1", contents:"Select an item to order"
}) // ------------------------------------------------------------------------------------------- // Variation with multi column picker:
isc.DynamicForm.create({
left:300,
fields: [
{ type:"header", defaultValue:"Order Supply Items"},
{ name: "itemID", title:"Item", type:"select",
optionDataSource:"supplyItem",
valueField:"SKU", displayField:"itemName",
change:"label2.setContents("Selected SKU:" + value)",
pickListWidth:450,
pickListFields: [
{ name:"itemName" },
{ name:"units" },
{ name:"unitCost" }
]
},
{ name:"Quantity", editorType:"SpinnerItem", defaultValue:1, min:1}
]
}); isc.Label.create({
align:"center", border:"1px solid blue", left:300, top:75, height:50, width:250, margin:10, ID:"label2", contents:"Select an item to order"
});
</SCRIPT> </BODY> </HTML>
</source>
