Ext js Combo box help
I am trying to define a c开发者_如何学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
Actually you don't need the 'root' key. What you are trying to do is feed something that looks like what a JsonReader consumes to a arrayreader.
What you need to have is a 2 dimensional array:
var data = [
["New years"],
["Martin luther king day"],
["..."]
];
var Holidaystore = new Ext.data.ArrayStore({
autoLoad:true,
fields: ['name'],
data: data
});
You specify to your reader that every record has 1 field in it (name), so your data array consists of a list or records (the outer array), every record is a list of fields (the inner arrays). You only specify 1 field so the inner array only needs 1. mapping of the array to the records fields is done on index in the inner array.
Good luck, Rob
Its working now !!!!!!!!!!
<script type="text/javascript">
var datas = [['AL', 'Alabama'],['AK', 'Alaska']];
Ext.onReady(function(){
Ext.QuickTips.init();
var Holidaystore = new Ext.data.ArrayStore({
autoLoad:true,
fields: ['abbr', 'state'],
data: datas
});
var combo = new Ext.form.ComboBox({
store: Holidaystore,
displayField:'state',
valueField: 'abbr',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText:'Select a Holiday...',
selectOnFocus:true,
renderTo: 'Holidayz'
});
});
</script>
....
<body>
...
<div id="Holidayz">
</div>
...
</body>
<html>
加载中,请稍侯......
精彩评论