All geek questions in one place

Additional support for js Combo box

I am trying to define a combobox using Ext Js, which will display my "Holidays" stored in an array. Please correct me, where can I be wrong, since the JSP does not display drop-down lists.

  ...
  <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 Day", "Washington Birthday", 
                 "Easter", "Earth Day", "National Arbor Day", "Mother Day", "Memorial Day", "Flag Day", "Father 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
source share
3 answers

I will start by removing root: or

var availableTags = { 
  data: ["New years Day", "Martin Luther King Day", "Groundhog Day", 
          "Valentine Day", "Washington Birthday", "Easter", "Earth Day", 
          National Arbor Day, Mother Day, Memorial Day, Flag Day, 
          "Father Day", "Independence Day", "Labor Day", "Columbus Day", 
          "Halloween", "Veterans Day", "Thanksgiving Day"]
};

:

+3

"root". , , - , JsonReader .

- 2- :

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

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

, 1 (), ( ), ( ). 1, 1. .

, Rob

+2

!!!!!!!!!!

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

Source: https://habr.com/ru/post/1786340/

More articles:


All Articles