PDA

View Full Version : ExtJS paged combo with remote JSON store. Display selected value with paging



coshmos
12 Dec 2012, 10:34 PM
I've got an ExtJS combo with remote store, which returns to me data in JSON format. 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.


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/


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. For all paged combo it's return only id's. So until I don't navigate to page with item with returned id, I don't see a value. If I disable paging and load all values, all works as expected, but loading of thousands values is not good.

mitchellsimoens
14 Dec 2012, 12:14 PM
The reason is because the record for that selected item is not in the store anymore.

coshmos
14 Dec 2012, 10:38 PM
Yes, I understand that. So, if I clearly understand, there is no way to store this item in ExtJS and I should use combination of backend and frontend?

coshmos
17 Dec 2012, 1:41 AM
I changed the logic. Additionally send an Id of a combobox value, after that set extraProxyParams with this Id and load the store. Clean the extraProxyParams after that. So after a user searching for another value he can do it.