我在一个表单上有一个组合框,我用它来添加和编辑我的一个模型。组合框绑定的值列表可能非常大(1000条记录),因此我需要使用具有分页功能的远程数据存储,以避免必须一次加载所有值。在添加表单中,这工作得很好,但是当我试图使用表单编辑我的模型时,我无法可靠地将值设置为组合框。
当组合框加载时,存储加载前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的值,则不会填充该值,因为它不存在于存储的第一页中。
任何帮助都非常感谢!
我也遇到过类似的问题。为了克服这个问题,我创建了一个自定义的组合框扩展(我称之为RemoteComboBox)。它的一个主要特性是,如果它的值是通过表单记录加载设置的,或者甚至只是setValue(),默认的加载行为是为实际值发出远程请求。这将返回1个值,因此响应很小,然后一旦用户再次开始与组合框交互,组合框的默认行为将接管。
我的解决方案与您的需求的不同之处在于,您仍然会遇到分页问题。即使您的值最初是由基于id的请求找到的,您仍然会遇到在记录的几页中定位相同项的挑战。
你真的需要分页吗?我发现,简单地提供更丰富的搜索工具通常比强迫用户筛选几页记录更有帮助。