I am trying to define a combo box drop down using Ext Js which would display my "Holidays" saved in array. Please correct me where I could be wrong as the JSP wont display combobox drop down.
...
<body>
<div class="left " style="color:#333333;padding-bottom:8px;padding-left:13px;width:99%;" id="Holiday">
<span class="formastrickmargin"><strong></strong></span>
</div>
<div id="Holiday" class="left " style="padding-bottom:6px;padding-left:15px;width:99%;">
</div>
</body>
<script type="text/javascript">
var availableTags = ["New years Day", "Martin Luther King Day", "Groundhog Day", "Valentine's Day", "Washington's Birthday",
"Easter", "Earth Day", "National Arbor Day", "Mother's Day", "Memorial Day", "Flag Day", "Father's Day",
"Independence Day", "Labor Day", "Columbus Day", "Halloween", "Veterans Day", "Thanksgiving Day"];
var combo1;
var defaultDDText = 'Enter the Site Id here, or select from dropdown.';
var Holidaystore = new Ext.data.ArrayStore({
root: 'availableTags',
autoLoad:true,
fields: ['availableTags'],
data: availableTags
});
Ext.onReady(function(){
Ext.QuickTips.init();
function initializeHoliday(){
combo1 = new Ext.form.ComboBox({
id:'Holiday',
typeAhead: true,
triggerAction: 'all',
emptyText: defaultDDText,
store:Holidaystore,
selectOnFocus:true,
width:408,
listWidth: '410',
mode: 'local',
minChars : '3',
renderTo:'Holiday',
displayField: 'availableTags',
}); }
initializeHoliday();
});
</script>
I will start with removing root: or
var availableTags = {
data : ["New years Day", "Martin Luther King Day", "Groundhog Day",
"Valentine's Day", "Washington's Birthday", "Easter", "Earth Day",
"National Arbor Day", "Mother's Day", "Memorial Day", "Flag Day",
"Father's Day", "Independence Day", "Labor Day", "Columbus Day",
"Halloween", "Veterans Day", "Thanksgiving Day"]
};
and next root: data
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With