在extjs中從下拉列表（組合框）中預先選擇值？

我有一個顯示項目數量的組合框。基於商品數量選擇，我正在顯示商品的價格值。默認情況下，我將價格值設置爲第一項值。然而，當我加載頁面，我想我的組合框顯示第一項數量，即100在extjs中從下拉列表（組合框）中預先選擇值？

enter image description here

問題：它應該載入數量：100，而裝載空白，所以我有一個存儲中定義

作爲

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' ] 
    });

組合框以顯示數量

<#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); 
      } 
     });

能夠看到嘿：100在警報聲明

來源

2012-01-16 Mad-D

我遇到過這個問題幾次。我實際得到這個解決方案的唯一方法是在商店加載後在組合框中調用setValue，您可以在商店中添加一個監聽器，但對我來說這總是顯得有些雜亂。我通常有一個獨立的事件監聽器是這樣的：

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

編輯： 18一月2012

確定這裏提到的組合框的一個默認值被設置一個完整的工作示例。這是使用ExtJS 4.02完成的，應該可以在4.07下正常工作，但不確定4.1。

確保你把你的正確的ExtJS路徑中的鏈接（見HTML的頂部支架），否則只是把兩者組合，例如和data.json在同一目錄級別，他們應該運行良好：

data.json：

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

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

來源

2012-01-16 21:46:46 Geronimo

我要發佈沿着相同的路線（+1）的解決方案。 Mad-D，您必須確保Geronimo的代碼片段在進行任何加載調用之前。如果它仍然沒有工作，螢火蟲的任何錯誤？你能否確認商店一旦加載，確實有記錄？ – 2012-01-16 22:49:49

這對我來說一直很好...這是ExtJS ** 4 **嗎？您的商店和組合框的配置與上述相同嗎？你把上面的例子放在Ext.onReady的所有其他函數之外嗎？如果你想讓它變得簡單（但不是動態的），你總是可以在組合框中添加一個'value'配置，例如：'value：'100'或'value：100' – Geronimo 2012-01-16 23:03:49

我試過這些東西1 ''store.getAt（'0'）。get（'qty'））'在alert中獲得了預期值，即100，但它沒有設置defaultvalue。 2.當我嘗試的值：'100'和值：100它不顯示默認值爲100. – 2012-01-16 23:51:04

在extjs中從下拉列表（組合框）中預先選擇值？

回答

相關問題