从 extjs 的下拉列表（组合框）中预选值？答案

【问题标题】：pre-selecting value from dropdown (Combo box) in extjs?从 extjs 的下拉列表（组合框）中预选值？
【发布时间】：2012-01-16 19:46:33
【问题描述】：

我有一个显示项目数量的组合框。根据项目数量选择，我正在显示项目的价格值。默认情况下，我将价格值设置为第一个项目值。但是，当我加载页面时，我希望我的组合框显示第一项数量，即 100。

问题：它应该加载 Qty : 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

【问题讨论】：

标签： extjs combobox drop-down-menu extjs4

【解决方案1】：

我遇到过几次这个问题。我真正解决这个问题的唯一方法是在商店加载后在组合框上调用setValue，您可以在商店中添加一个监听器，但这对我来说总是有点混乱。我通常有一个像这样的独立事件监听器：

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

编辑： 2012 年 1 月 18 日

这里提到的 OK 是一个完整的 ComboBox 工作示例，其中设置了默认值。这是使用 ExtJS 4.02 完成的，但在 4.07 上应该可以正常工作，但不确定 4.1。

确保将正确的 extjs 路径放在链接中（请参阅 html 顶部的括号），否则只需将 combo-example 和 data.json 放在同一目录级别，它们应该可以正常运行：

data.json:

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

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

【讨论】：

我打算按照相同的思路发布解决方案 (+1)。 Mad-D，您必须确保 Geronimo 的 sn-p 在对存储进行任何加载调用之前。如果它仍然不起作用，萤火虫中的任何错误？您能否验证商店在加载后确实有记录？
这对我来说总是很好......这是用于 ExtJS4 的吗？你的 store 和 combobox 的配置还是和上面一样吗？您是否将上面的示例放在所有其他函数之外但在 Ext.onReady 中？如果你想简单一点（但根本不是动态的），你总是可以在组合框中添加一个 value 配置，例如：value: '100' 或 value: 100
我尝试了这些事情 1. 'store.getAt('0').get('qty'))' 在警报中并得到预期的值，即 100，但它没有设置默认值。 2. 当我尝试 value:'100' 和 value:100 时，它没有显示默认设置为 100。
可能与触发器有关
@amol：firebug 中没有错误，setValue 函数正在传递默认值，但它只是没有显示:( @Geronimo：我确实尝试过制作 hideTrigger: false，还有其他线索吗？只花了 3 天找出原因