Extjs - 填充组合框但存储不匹配

Question

我需要在商店中填充一个组合框，除了一件事外，一切都很好。 ¿ 为什么商店只填充 displayField 而不是 valueField。

在这一行

form.loadRecord(records[1]); 

我在表单中设置了该记录，这很好，但是当我尝试提交表单时，我希望值“2”而不是值“Media”。

Jsfiddle 上的代码和示例以获得更好的解释。

http://jsfiddle.net/jjgrn/5/

    var store = Ext.create('Ext.data.Store', {
        fields: ['id', 'status'],

        data: [
                { id: '1', status: 'Baja' },
                { id: '2', status: 'Media' },
                { id: '3', status: 'Alta' },
                { id: '4', status: 'Urgente' }
        ]
    });

    var formPanel = Ext.create('Ext.form.Panel', {
        title: 'Edit Country',
        url: 'http://aaa.com/',
        items: [
            {
                xtype: 'combobox',
                fieldLabel: 'Nombre',
                name: 'status',
                anchor: '50%',                          
                displayField: 'status',            
                valueField: 'id',
                store: store
            }
        ],
        buttons: [
            {
                text: 'Guardar',
                handler: function () {
                    var form = formPanel.getForm();
                    var value = form.getValues();

                    alert(value.status);
                }
            }
        ],
        renderTo: Ext.getBody()
    });



    store.load({
        scope: this,
        callback: function(records, operation, success) {
            var form = formPanel.getForm();
            form.loadRecord(records[1]);
        }
    });

谢谢。

Answer 1

当你调用form.getValues()时，你只会得到值，如果你想要关联记录中的值，你必须搜索商店。 http://jsfiddle.net/jjgrn/7/

    var rec = store.getById(value.status);                
    alert(rec.get('status'));

关键是理解getValues() 只是为表单中的每个字段调用getValue()。 getValue 不返回记录，只返回记录中您告诉它使用 valueField: 'id', 的字段。

Answer 2

这是因为 form.loadRecord() 并没有完全按照您的预期进行。 您想要它做的是告诉组合框使用该特定记录（记录 [1]）。 它实际上所做的是告诉组合框：“现在将您的值设置为 Media”，尽管组合框太“愚蠢”而无法将其与特定记录相关联，但它礼貌地这样做了。

这是固定版本，不确定这样的解决方案是否符合您的需求： http://jsfiddle.net/jjgrn/6/

var store = Ext.create('Ext.data.Store', {
    fields: ['id', 'status'],

    data: [
            { id: '1', status: 'Baja' },
            { id: '2', status: 'Media' },
            { id: '3', status: 'Alta' },
            { id: '4', status: 'Urgente' }
    ]
});

var formPanel = Ext.create('Ext.form.Panel', {
    title: 'Edit Country',
    url: 'http://aaa.com/',
    items: [
    {
        xtype: 'combobox',
        fieldLabel: 'Nombre',
        name: 'status',
        anchor: '50%',                          
        displayField: 'status',            
        valueField: 'id',
        store: store
    }
    ],
    buttons: [
    {
        text: 'Guardar',
        handler: function () {
        var form = formPanel.getForm();
        var value = form.getValues();
        alert(value.status);
        }
    }
    ],
    renderTo: Ext.getBody()
});



store.load({
    scope: this,
    callback: function(records, operation, success) {
    // the operation object
    // contains all of the details of the load operation
    //var form = formPanel.getForm();
    //form.loadRecord(records[1]);
    formPanel.items.first().select(records[1]);
    }
});