Ext JS 4.2 Combobox与Remote Store&分页默认值问题

时间:2013-05-18 01:04:39

标签: extjs combobox

我在表单上有一个组合框,用于添加和编辑我的一个模型。组合框绑定的值列表可能非常大(1,000个记录),因此我需要使用带分页的远程数据存储来防止必须一次加载所有值。在添加表单中,这很有效,但是当我尝试使用表单编辑模型时,我无法将值可靠地设置为组合框。

当组合框加载时,商店会加载前50个记录。问题是,组合框setValue函数在设置值之前仅搜索商店中的加载值以获取记录。如果所选记录不在商店的前50条记录中,则setValue找不到它并且未设置该值。

我创建了一个演示此问题的jsFiddle:http://jsfiddle.net/mgolus/Z3Jpy/

代码如下:

var testVendorId;
testVendorId = 30; // Works
//testVendorId = 60; // Doesn't Work :-(

Ext.onReady(function() {
    var addUserForm = Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    model: 'Test.model.CatalogItem',
    items: [
            {
                xtype: 'textfield',
                name: 'number',
                fieldLabel: 'Number'
            },
            {
                xtype: 'combobox',
                name: 'vendorId',
                fieldLabel: 'Vendor',
                forceSelection: true,
                store: {
                    model: 'Test.model.Vendor',
                    autoLoad: true,
                    pageSize: 50
                },
                displayField: 'name',
                valueField: 'id',
                pageSize: 50 // I know this just needs to be any value > 0 to show the pager, just putting 50 for consistency
            }
        ],
    });

    addUserForm.down('combobox').getStore().on('load', function() {
            var user = Ext.create('Test.model.CatalogItem', { id: 1, number: 'T001', vendorId: testVendorId });
            console.log(user);
            addUserForm.loadRecord(user);    
    });


});

Ext.define('Test.model.CatalogItem', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id' },
        { name: 'number' },
        { name: 'vendorId' }
    ] 
});

Ext.define('Test.model.Vendor', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id' },
        { name: 'name' }
    ],
    proxy: {
        type: 'jsonp',
        url: 'http://pmvitals.com/vendors.aspx',
        reader: {
            root: 'data'
        }
    }
});

当选定的id(testVendorId设置在顶部)为30时,组合框将填充默认值。如果您将id设置为大于50的任何值,则不会填充该值,因为它不存在于商店的第一页中。

非常感谢任何帮助!

1 个答案:

答案 0 :(得分:2)

我遇到了类似的问题。为了克服它,我创建了组合框的自定义扩展(我称之为RemoteComboBox)。它的一个主要特征是,如果它的值是通过表单记录加载设置的,或者甚至只是setValue(),则默认的加载行为是对实际值进行远程请求。这返回1个值,因此响应很小,然后一旦用户开始再次与它进行交互,组合框的默认行为就会接管。

与我的解决方案和您的需求的区别在于您仍然会遇到分页问题。即使您的值最初是通过基于身份的请求找到的,您仍然面临着在多个记录页面中查找相同项目的挑战。

你真的需要分页吗?我发现简单地提供更丰富的搜索工具通常比强迫用户筛选几页记录更有帮助。