предварительно выбрать значение из выпадающего списка (поле со списком) в extjs? - PullRequest
Новая
       33

предварительно выбрать значение из выпадающего списка (поле со списком) в extjs?

5 голосов
/ 16 января 2012

У меня есть поле со списком, которое отображает количество товара.Основываясь на выборе количества товара, я отображаю цену товара.По умолчанию я устанавливаю значение цены на первое значение товара.Однако, когда я загружаю страницу, я хочу, чтобы в моем поле со списком отображался первый элемент кол-во, т.е. 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 в операторах оповещения

1 Ответ

7 голосов
/ 17 января 2012

Я столкнулся с этой проблемой пару раз. Единственный способ, которым я на самом деле решил эту проблему, - это вызвать setValue в выпадающем списке после загрузки магазина, вы можете просто добавить слушателя в магазине, но это всегда казалось мне немного беспорядочным. У меня обычно есть автономный слушатель событий, подобный этому: 

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

РЕДАКТИРОВАТЬ: 18 января 2012

ОК, как упомянуто здесь, является полным рабочим примером 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>
...