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>