ExtJS 分页组合与远程 JSON 存储。使用分页显示选定的值答案

【问题标题】：ExtJS paged combo with remote JSON store. Display selected value with pagingExtJS 分页组合与远程 JSON 存储。使用分页显示选定的值
【发布时间】：2012-12-01 00:21:27
【问题描述】：

我有一个带有远程存储的 ExtJS 组合，它以 JSON 格式返回给我的数据。当我在第一页上选择一个值（例如）然后导航到另一个页面时，组合显示选择的 id，而不是值。

如何始终显示选定的值？

代码：

Ext.onReady(function() {
    Ext.define('Model', {
        extend: 'Ext.data.Model',
        fields: ['title'],
        idProperty: 'threadid'
    });

    var store = Ext.create('Ext.data.Store', {
        pageSize: 50,
        model: 'Model',
        remoteSort: true,
        proxy: {
            type: 'jsonp',
            url: 'http://www.sencha.com/forum/topics-browse-remote.php',
            reader: {
                root: 'topics',
                totalProperty: 'totalCount'
            },
            simpleSortMode: true
        }
    });

    var combo = Ext.create('Ext.form.ComboBox', {
        fieldLabel: 'Value',
        store: store,
        queryMode: 'remote',
        displayField: 'title',
        valueField: 'threadid',
        pageSize: 50,
        labelWidth: 50,
        width: 300,
        padding: '60 0 0 0'
    });

    Ext.create('Ext.window.Window', {
        title: 'Hello',
        height: 200,
        width: 400,
        layout: { type: 'vbox', align: 'center' },
        items: combo
    }).show();
})

示例：http://jsfiddle.net/coshmos/5wT6H/

更多信息（案例研究）：
我有一张可以更新记录的表。我单击一个项目，然后我的服务器从数据库返回值。然后出现一个带有 UI 的窗口。对于所有分页组合，它只返回 id。因此，除非我没有导航到带有返回 id 的项目的页面，否则我看不到任何值。如果我禁用分页并加载所有值，一切都会按预期工作，但加载数千个值并不好。

【问题讨论】：

标签： extjs combobox paging jsonstore

【解决方案1】：

我改变了逻辑。另外发送一个组合框值的 Id，然后使用此 Id 设置 extraProxyParams 并加载存储。之后清理 extraProxyParams 。因此，在用户搜索另一个值之后，他可以做到这一点。

【讨论】：

【解决方案2】：

可以这样解决：

Ext.override(Ext.form.field.ComboBox,{
    findRecord: function(field, value) {
        var foundRec = null;
        Ext.each(this.lastSelection, function(rec) {
            if (rec.get(field) === value) {
                foundRec = rec;
                return false; // stop 'each' loop
            }
        });
        if (foundRec) {
            return foundRec;
        } else {
            return this.callParent(arguments);
        }
    }
});

试试看：http://jsfiddle.net/5wT6H/3/

【讨论】：