pre-selection value of dropdown (Combo box) w extjs?

Mam pole kombi wyświetlające liczbę sztuk. Na podstawie wyboru ilości sztuk wyświetlam cenę produktu. Domyślnie ustawiam wartość ceny na wartość pierwszego przedmiotu. Jednak kiedy załadować stronę, chcę moje pole kombi do wyświetlenia pierwszego elementu Ilość czyli 100.pre-selection value of dropdown (Combo box) w extjs?

enter image description here

problemu: należy załadować Ilość: 100 raczej ładowanie puste

więc mam sklep z definicją jak

Store = new Ext.data.JsonStore({ 
     storeId: 'Store', 
     root: 'storevalue', 
     autoLoad: false, 
     baseParams: { itemid: '${itemID!""}', 
         adjustPrice: '${adjustPrice}', 
         overrideShowPrice: '${overrideShowPrice}' }, 
     url: 'ListQtyPrice.epm', 
     fields: [ 'qty', 'rawprice', 'displayPrice' ] 
    });

rozwijalnej aby wyświetlić Ilość

<#if Select> 
     new DBEComboBox({ 
      name: 'orderqty', 
      displayField: 'qty', 
      valueField: 'qty', 
      id: 'order-qty', 
      store: Store, 
      forceSelection: true, 
      mode: 'remote', 
      triggerAction: 'all', 
      allowBlank: true, 
      listWidth: 202, 
      triggerClass: 'orderqty-trigger', 
      width: 200 
      ,defaultValue: 100 
      ,listeners: { 
       // for price adjustments 
      } 
     }); 
     </#if> 


Store.load({ 
      callback: function() { 
      alert("reached"); 
      Ext.getCmp('order-qty').setValue(Store.getAt(0).get('qty')); 
      var oqc = Ext.getCmp('order-qty'); 
      var value = Ext.getCmp('order-qty').getValue(); 
      alert(" hey :" +value); 
      } 
     });

stanie zobaczyć hej: 100 w sprawozdaniach alarmowych

Źródło

2012-01-16 Mad-D

Zabrakło mi do tego problemu kilka razy. Jedynym sposobem, w jaki udało mi się to rozwiązać, było wywołanie setValue na combobox po załadowaniu sklepu, możesz po prostu dodać detektora do sklepu, ale zawsze wydawało mi się to trochę nieprzyjemne. I zazwyczaj mają autonomiczny detektor zdarzenia takiego:

Store.on('load',function(store) { 
    Ext.getCmp('order-qty').setValue(store.getAt('0').get('qty')); 
});

EDIT: 18 stycznia 2012

OK jak wspomniano tutaj jest pełna przykładów pracy z ComboBox z domyślną wartością jest ustawiony. Odbywa się to za pomocą ExtJS 4.02, powinno jednak działać poprawnie z wersją 4.07, nie będąc pewnym 4.1.

Upewnij się umieścić swoją prawidłową ścieżkę ExtJS w linkach (zob nawiasach na górze HTML), w przeciwnym razie po prostu umieścić zarówno kombi przykład i data.json na tym samym poziomie katalogów i powinny działać prawidłowo:

data.json:

[ 
    {"value":1,"name":"Option 1"}, 
    {"value":2,"name":"Option 2"}, 
    {"value":3,"name":"Option 3"} 
]

kombi-example.html:

<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
     <title>Combo Box Example</title> 
    <link rel="stylesheet" type="text/css" href="[your extjs path]/resources/css/ext-all.css"> 

    <script type="text/javascript" src="[your extjs path]/ext-all.js"></script> 
    <script type="text/javascript" > 

    Ext.onReady(function() { 

     // the datastore 
     var myStore = new Ext.data.Store({ 
      fields: ['value', 'name'], 
      proxy: { 
       type: 'ajax', 
       url : 'data.json', 
       reader: { 
        type: 'json' 
       } 
      }, 
      autoLoad: true 
     }); 

     // a window to hold the combobox inside of a form 
     myWindow = Ext.create('Ext.Window', { 
      title: 'A Simple Window', 
      width: 300, 
      constrain: true, 
      modal: true, 
      layout: 'fit', 
      items: [{ 
       // the form to hold the combobox 
       xtype: 'form', 
       border: false, 
       fieldDefaults: { 
        labelWidth: 75 
       }, 
       bodyPadding: '15 10 10 10', 
       items: [{ 
        // the combobox 
        xtype: 'combo', 
        id: 'myCombo', 
        fieldLabel: 'A Label', 
        valueField: 'value', 
        displayField: 'name', 
        store: myStore, 
        //queryMode: 'local', 
        typeAhead: true, 
        forceSelection: true, 
        allowBlank: false, 
        anchor: '100%' 
       },{ 
        // shows the selected value when pressed 
        xtype: 'button', 
        margin: '10 0 0 100', 
        text: 'OK', 
        handler: function() { 
         alert('Name: ' + Ext.getCmp('myCombo').getRawValue() + 
           '\nValue: ' + Ext.getCmp('myCombo').value); 
        } 
       }] 
      }] 
     }); 
     // show the window 
     myWindow.show(); 

     // function to give the combobox a default value 
     myStore.on('load',function(store) { 
      Ext.getCmp('myCombo').setValue(store.getAt('0').get('value')); 
     }); 

    }); 

    </script> 

    </head> 
    <body> 
    </body> 
</html>

Źródło

2012-01-16 21:46:46 Geronimo

miałem zamiar umieścić rozwiązanie wzdłuż tej samej linii (+1). Mad-D, musisz upewnić się, że fragment Geronimo jest PRZED jakimkolwiek wywołaniem obciążenia w sklepie. Jeśli nadal nie działa, jakieś błędy w firebug? Czy możesz zweryfikować, że po załadowaniu sklepu rzeczywiście ma zapisy? –

To zawsze działa dobrze dla mnie ... Czy to dla ExtJS ** 4 **? Twój sklep i combobox są nadal skonfigurowane tak samo jak powyżej? Czy wstawiłeś powyższy przykład poza wszystkimi innymi funkcjami, ale wewnątrz Ext.onReady? Jeśli chcesz być prosty (ale w ogóle nie dynamiczny) zawsze możesz po prostu dodać konfigurację 'value' do combobox np .:' value: '100'' lub 'value: 100' – Geronimo

próbowałem tych rzeczy 1 'store.getAt (' 0 '). get (' qty '))' w alarmie i uzyskał wartość zgodnie z oczekiwaniami, tj. 100, ale nie ustawił wartości domyślnej. 2. gdy próbowałem wartość: „100” i wartości: 100 to nie pokazując domyślnie ustawiony jako 100. –

pre-selection value of dropdown (Combo box) w extjs?

Odpowiedz

Powiązane problemy