Question

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

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条

Answer 1

我曾经遇到过这个问题几次。我实际解决这个问题的唯一方法就是在商店加载后在组合框上调用setValue，你可以在商店里添加一个监听器，但这对我来说似乎总是有些混乱。我通常有一个像这样的独立事件监听器：

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

编辑： 2012年1月18日

如上所述，这是一个完整的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"}
]

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

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

1 个答案: