本文主要谈了ComboBox四个方面的内容,下面均用到了 dojo store(dojo store会逐步代替dojo data,这是dojo发展趋势):
1. 编程方式创建 ComboBox
2. 向现有ComboBox中添加新的options
3. 两种方式清空 ComboBox 的所有options
4. 用新的options代替旧的 ComboBox options
代码如下:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dojo: ComboBox</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/claro/claro.css" media="screen">
</head>
<body class="claro">
<h1>Dojo: ComboBox</h1>
<p>Show How to Create, Empty and Update ComboBox Programmatically</p>
<div id="comboBoxNode"></div>
<br />
<br />
<div id="appendButtonNode"></div>
<br />
<div id="deleteButtonNode"></div>
<br />
<div id="updateButtonNode"></div>
<!-- load dojo and provide config via data attribute -->
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/dojo.js" data-dojo-config="isDebug:1, async:1"></script>
<script>
// Require all dependencies
require([
"dojo/store/Memory",
"dijit/form/ComboBox",
"dijit/form/Button",
"dijit/registry",
"dojo/_base/array",
"dojo/domReady!"
], function(Memory, ComboBox, Button, registry, baseArray) {
// set up data
var states = [
{ abbr:'ec', name:'Ecuador', capital:'Quito' },
{ abbr:'eg', name:'Egypt', capital:'Cairo' },
{ abbr:'sv', name:'El Salvador', capital:'San Salvador' },
{ abbr:'gq', name:'Equatorial Guinea', capital:'Malabo' },
{ abbr:'er', name:'Eritrea', capital:'Asmara' },
{ abbr:'ee', name:'Estonia', capital:'Tallinn' },
{ abbr:'et', name:'Ethiopia', capital:'Addis Ababa' }
];
var stateStore = new Memory({data: states, idProperty: "name"});
// create ComboBox with stateStore
var comboBox = new ComboBox({
id: 'comboBoxId',
name: 'comboBox',
// value: 'Ecuador',
store: stateStore,
searchAttr: 'name',
required: true,
style: 'width: 200px',
placeHolder: 'Select a State',
onChange: function() {
var combobox = registry.byId('comboBoxId');
console.log('ComboBox value: ' + combobox.get('value'));
console.log('ComboBox id: ' + combobox.get('id'));
// console.log('ComboBox->domNode.innerHTML: ' + combobox.domNode.innerHTML);
if(combobox.item) {
console.log('item abbr: ' + combobox.item.abbr);
console.log('item name: ' + combobox.item.name);
console.log('item capital: ' + combobox.item.capital);
}
}
}, 'comboBoxNode');
comboBox.startup();
var appendButton = new Button({
id: 'appendButtonId',
label: 'Append new options to ComboBox',
onClick: function() {
console.log('To append new options to ComboBox');
appendOptions();
}
}, 'appendButtonNode');
appendButton.startup();
var deleteButton = new Button({
id: 'deleteButtonId',
label: 'Delete all options',
onClick: function() {
console.log('To delete all ComboBox options');
// deleteOptions_1();
deleteOptions_2();
}
}, 'deleteButtonNode');
deleteButton.startup();
var updateButton = new Button({
id: 'updateButtonId',
label: 'Update all ComboBox options',
onClick: function() {
console.log('To update all ComboBox options');
updateAllOptions();
}
}, 'updateButtonNode');
updateButton.startup();
var appendOptions = function() {
var data = [
{ abbr:'af', name:'Afghanistan', capital:'Kabul' },
{ abbr:'al', name:'Albania', capital:'Tiran' },
{ abbr:'dz', name:'Algeria', capital:'Algiers' },
{ abbr:'as', name:'American Samoa', capital:'Pago Pago' },
{ abbr:'ad', name:'Andorra', capital:'Andorra' },
{ abbr:'ao', name:'Angola', capital:'Luanda' },
{ abbr:'ai', name:'Anguilla', capital:'The Valley' }
];
var combobox = registry.byId('comboBoxId');
var store = combobox.get('store');
baseArray.forEach(data, function(item) {
if (typeof store.get(item.name) === 'undefined') {
store.add(item);
}
else {
console.log(item.name + ' has existed');
}
});
combobox.set('required', true);
combobox.set('placeHolder', 'Select a State');
combobox.reset();
};
// two ways to delete all options of ComboBox
var deleteOptions_1 = function() {
var combobox = registry.byId('comboBoxId');
combobox.set('required', false);
combobox.set('placeHolder', '');
// set new empty store
var emptyStore = new Memory({data: [], idProperty: "name"});
combobox.set('store', emptyStore);
combobox.reset();
registry.byId('appendButtonId').set('disabled', false);
};
var deleteOptions_2 = function() {
var combobox = registry.byId('comboBoxId');
combobox.set('required', false);
combobox.set('placeHolder', '');
var store = combobox.get('store');
store.query({}, {
sort:[{attribute: 'name', descending: false}],
}).map(function(item) {
return item.name
}).forEach(function(name) {
console.log('remove ' + name);
store.remove(name);
});
combobox.reset();
registry.byId('appendButtonId').set('disabled', false);
};
// update ComboBox with new options
var updateAllOptions = function() {
// prepare new options
var color_list = [ 'red', 'yellow', 'blue', 'green', 'white', 'black', 'brown' ];
var options = new Memory({data: [], idProperty: 'name'});
baseArray.forEach(color_list, function(item, index) {
options.put( { name: item, id: index } );
});
var combobox = registry.byId('comboBoxId');
combobox.set('required', true);
combobox.set('placeHolder', 'Select a Color');
combobox.set('store', options);
combobox.reset();
registry.byId('appendButtonId').set('disabled', true);
};
});
</script>
</body>
</html>