[英]ExtJS paged combo with remote JSON store. Display selected value with paging
I've got an ExtJS combo with remote store, which returns to me data in JSON format. 我有一个带远程存储的ExtJS组合,它以JSON格式返回给我数据。 When I select a value on the first page (for example) and then navigate to another page, the combo display selected id, not the value.
当我在第一页上选择一个值(例如)然后导航到另一个页面时,组合显示选择了id,而不是值。
How can I always display a selected value? 如何始终显示所选值?
Code: 码:
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();
})
Example: http://jsfiddle.net/coshmos/5wT6H/ 示例: http : //jsfiddle.net/coshmos/5wT6H/
More information (case study): 更多信息(案例研究):
I've got a table where I can update records. 我有一张表可以更新记录。 I click on an item and then my server return values from a database.
我单击一个项目,然后我的服务器从数据库返回值。 Then a window with UI appear.
然后出现带有UI的窗口。 For all paged combo it's return only id's.
对于所有分页组合,它只返回id。 So until I don't navigate to page with item with returned id, I don't see a value.
所以,直到我没有导航到带有返回id的项目的页面,我没有看到值。 If I disable paging and load all values, all works as expected, but loading of thousands values is not good.
如果我禁用分页并加载所有值,则所有值都按预期工作,但加载数千个值并不好。
It can be fixed this way: 它可以这样修复:
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);
}
}
});
try it out: http://jsfiddle.net/5wT6H/3/ 尝试一下: http : //jsfiddle.net/5wT6H/3/
I changed the logic. 我改变了逻辑。 Additionally send an Id of a combobox value, after that set extraProxyParams with this Id and load the store.
另外发送一个组合框值的Id,之后用此Id设置extraProxyParams并加载商店。 Clean the extraProxyParams after that.
之后清理extraProxyParams。 So after a user searching for another value he can do it.
因此,在用户搜索另一个值之后,他可以执行此操作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.