在ExtJS 3.4中使用Json为ComboBox设置默认值

qlvxas9a  于 2022-11-04  发布在  其他
关注(0)|答案(3)|浏览(206)

我尝试在ExtJS 3.4中的ComboBox中设置默认值。我尝试在ComboBox配置中设置value: 'Standard',但这只会在框中放置一个字符串。我做了一些研究,并尝试设置afterrender函数,但仍然没有得到它的填充。目标是让框实际选择值,并使用Json数据填充框。以便用户能够从后续的ComboBox中进行选择。

var hatComboStore = new Ext.data.JsonStore({
                autoLoad: true,
                fields: [
                    'BIN_ID',
                    'BIN_DESC'
                ],
                baseParams: {
                    method: 'post'
                },
                url: 'json_bin_hat.php'
        });

        var hatCombo = new Ext.form.ComboBox({
            allowBlank: false,
            autoSelect: true,
            displayField: 'BIN_DESC',
            emptyText: 'Select a hat...',
            fieldLabel: 'Hat',
            forceSelection: false,
            hiddenName: 'hatId',
            itemId: 'hatId',
            listEmptyText: 'No records found',
            listeners: {
                afterrender: function(combo, record, index) {
                    var hat = combo.getValue();
                    binCombo.store.baseParams.hat = hat;
                },      
                select: function(combo, record, index) {
                    var hat = combo.getValue();
                    binCombo.store.baseParams.hat = hat;
                },
                focus: function(combo) {
                    binCombo.clearValue();
                }
            },
            mode: 'remote',
            msgTarget: 'side',
            name: 'hatDesc',
            store: hatComboStore,
            submitValue: true,
            triggerAction: 'all',
            valueField: 'BIN_ID'
        });

有人有什么想法吗?谢谢你的帮助!

eh57zj3b

eh57zj3b1#

我已经用override method使它工作了。
基本上,displayValue是我想要显示的内容('Standard'),value是我想要执行的内容(value: 1)。显然,使用远程存储有点棘手,所以这就是为什么重写是必要的。

var hatComboStore = new Ext.data.JsonStore({
                autoLoad: true,
                fields: [
                    'BIN_ID',
                    'BIN_DESC'
                ],
                baseParams: {
                    method: 'post'
                },
                url: 'json_bin_hat.php'
        });

        var hatCombo = new Ext.form.ComboBox({
            allowBlank: false,
            autoSelect: true,
            displayField: 'BIN_DESC',
            displayValue: 'Standard',
            emptyText: 'Select a hat...',
            fieldLabel: 'Hat',
            forceSelection: false,
            hiddenName: 'hatId',
            itemId: 'hatId',
            listEmptyText: 'No records found',
            listeners: {
                afterrender: function(combo, record, index) {
                    var hat = combo.getValue();
                    binCombo.store.baseParams.hat = hat;
                },      
                select: function(combo, record, index) {
                    var hat = combo.getValue();
                    binCombo.store.baseParams.hat = hat;
                },
                focus: function(combo) {
                    binCombo.clearValue();
                }
            },
            mode: 'remote',
            msgTarget: 'side',
            name: 'hatDesc',
            store: hatComboStore,
            submitValue: true,
            triggerAction: 'all',
            valueField: 'BIN_ID'
            value: 1
        });

        //Override method to default hatCombo value to 'Standard' while underlying value = 1
        Ext.override(Ext.form.ComboBox, {
            initValue: Ext.form.ComboBox.prototype.initValue.createSequence(function() {
                if (this.mode == 'remote' && !!this.valueField && this.valueField != this.displayField && this.displayValue) {
                    if (this.forceSelection) {
                        this.lastSelectionText = this.displayValue;
                    }    
                    this.setRawValue(this.displayValue);
                }    
            })
        });
u3r8eeie

u3r8eeie2#

value属性似乎不适用于远程存储区。可能是在加载存储区之前呈现了组合。您可以在加载存储区之后设置该值。
这对我来说很有效(作为ExtJS 3. 4小提琴测试)。

var hatComboStore = new Ext.data.JsonStore({
    autoLoad: true,
    fields: [
        'id',
        'title'
    ],
    url: 'https://jsonplaceholder.typicode.com/todos'
});

var hatCombo = new Ext.form.ComboBox({
    fieldLabel: 'Hat',
    store: hatComboStore,
    displayField: 'title',
    valueField: 'id',
    mode: 'local',
    submitValue: true,
    triggerAction: 'all',
    // Apparently does not work with remote store.
    // value: '1'
});

hatComboStore.on('load', () => hatCombo.setValue('1'));

new Ext.form.FormPanel({
    items: hatCombo,
    renderTo: Ext.getBody()
});
kxkpmulp

kxkpmulp3#

请参阅设置默认值示例:

Combo config:

{
    triggerAction: 'all',
    id: 'dir_id',
    fieldLabel: 'Direction',
    queryMode: 'local',
    editable: false,
    xtype: 'combo',
    store : dirValuesStore,
    displayField:'name',
    valueField:'id',
    value: 'all',
    width: 250,
    forceSelection:true
}

来源:Extjs 4 combobox default value

相关问题