Ext js组合框帮助

时间:2011-01-19 08:39:55

标签: javascript html jsp combobox extjs

我正在尝试使用Ext Js定义一个组合框下拉列表,它将显示我在数组中保存的“假期”。请纠正我可能出错的地方,因为JSP不会显示组合框下拉。

  ...
  <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>

3 个答案:

答案 0 :(得分:3)

我将从删除root:或

开始
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"]
}; 

和下一个根:数据

答案 1 :(得分:2)

实际上你不需要'root'键。你要做的是提供一些看起来像JsonReader消耗的数据读取器。

您需要拥有的是二维数组:

var data = [
    ["New years"],
    ["Martin luther king day"],
    ["..."]
];

var Holidaystore = new Ext.data.ArrayStore({
         autoLoad:true,
         fields: ['name'],
         data: data
        });

您指定读者每条记录中都有1个字段(名称),因此您的数据数组由一个或多个记录组成(外部数组),每个记录都是一个字段列表(内部数组)。您只需指定1个字段,因此内部数组只需要1.数组到记录字段的映射是在内部数组中的索引上完成的。

祝你好运, 罗布

答案 2 :(得分:0)

它现在正在工作!!!!!!!!!!

  <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>