combobox not working properly

[LeonardoH]

Hi, i'm new in etxjs and i try to use combobox. This is my code:

Ext.onReady(function(){
    Ext.QuickTips.init(); 
  var storeSQL2 = new Ext.data.Store({
      reader : new Ext.data.JsonReader({fields: ['id_destino','destino'],root: 'data'}),
            proxy: new Ext.data.HttpProxy({url: './combos_presc.php',method: 'POST'})
   });
     storeSQL2.load();
  var combo = new Ext.form.ComboBox({
   store: storeSQL2,
   triggerAction: 'all',
   emptyText : 'Seleccione algo...',
   forceSelection: true,
   mode:'local',
   valueField: 'id_destino',
   displayField: 'destino',  
   width:240,
   applyTo: 'ubic-actual'
    });
});

and this is the html tag:

...
            <td align="left" class="td2">
               <div>
                 <input type="text" id="ubic-actual" size="45" style="height:18px" />
               </div>
            </td>   
...

n th firebug i see the first load of the data but then the combo doesn't work when i click it.

Any suggestion.

thanks.

[jsakalos]

Try not to use applyTo; use renderTo:Ext.getBody() or renderTo:'an-empty-div-id' instead. Try first to render to body to test functionality of the combo itself and only then render it to an empty div.

[LeonardoH]

Hi and thanks for the answer. I use the sentence combo.renderTo:Ext.getBody('ubic-actual') outside the combo var and inside it. And in the navigator disappeared de combobox.
I changed it to applyTo and the comobobox appear.

The combo work fine now, but very slowly because the Store save 43000 record. How it make this transaction more fast?. Any idea.

thanks in advance

[jay@moduscreate.com]

Ext.getBody() returns document.body. just combo.render('someDiv')

[jsakalos]

Ext.onReady(function(){
    Ext.QuickTips.init(); 
  var storeSQL2 = new Ext.data.Store({
      reader : new Ext.data.JsonReader({fields: ['id_destino','destino'],root: 'data'}),
            proxy: new Ext.data.HttpProxy({url: './combos_presc.php',method: 'POST'})
   });
     storeSQL2.load();
  var combo = new Ext.form.ComboBox({
   store: storeSQL2,
   triggerAction: 'all',
   emptyText : 'Seleccione algo...',
   forceSelection: true,
   mode:'local',
   valueField: 'id_destino',
   displayField: 'destino',  
   width:240,
   renderTo: Ext.getBody()
    });

});

[jsakalos]

BTW, 43000 rows combo is useless: 1) it loads very slow and consumes too much resources and 2) user cannot digest that lot of records. Use paging combo with search instead.

[LeonardoH]

Thanks for the tips, but if i use pageSize to reduce the amount of records for the user, i must to use remote mode. This property does not allow the automatic search of the item combo. i'm right?

[jsakalos]

Not really. If you have a corresponding backend then search works is remote mode perfectly. Combo automatically sends value typed in the textbox, server returns matching records and then user can select. Go for it, it is worth to.

[LeonardoH]

Sorry forgive me i'm insistent. The combo again not work. I clear cookies and this stuff but the load of it no work. I use renderTo: Ext.getBody('<id of div>') but the div appear in another place of the page and not render the result of the combo box. What i'n doing wrong?.

Thanks in advance.

[jsakalos]

Ext.getBody() doesn't take any argument. I've written that rendering into body element would be first step. If combo works, however rendered in the wrong place, then you change renderTo:'an-empty-div-id-to-render-the-combo-into'. If everything goes well, combo will correctly render in correct place.

BTW, have you read in docs what config option renderTo means? Also, what is Ext.getBody() and applyTo? If not, do it now. We can help you but you must read the docs yourself.