PDA

View Full Version : ComboBox in EditorGridPanel, how to with remote store and loading of panel?



aacoro
13 Aug 2011, 10:50 AM
Hi all,

I do not know how to develop or design this part of my Proof of Concept:
I have a EditorPanel with 5 fields, one field is a reference to table customer. This field is called fk_customer.

In database , this is a foreign key (int value). But when grid panel is rendered I want the fully qualified customer name to pop up instead of a PK..

And when the user want to change the customer, the combobox with remote store should present the names, but writes back the PK...

Now I tried several things, but I cannot get this thing to work.

BTW, I found a solution from Rob, but that is for 3.x and I do not have the knowledge to convert it to Ext JS 4.x, although I tried :-( ....

Can someone explain and / or give code snippet how this can be achieved?
Hopefully you know what I mean..Thanks!

slemmon
13 Aug 2011, 12:45 PM
Are you using the displayField and valueField properties in your combobox?

*using a local store example, but would work the same with a remote store source.

// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['pk', 'name'],
data : [
{"pk":"01", "name":"Customer1"},
{"pk":"02", "name":"Customer2"},
{"pk":"03", "name":"Customer3"}
]
});


// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose Customer',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'pk',
renderTo: Ext.getBody()
});

aacoro
13 Aug 2011, 1:07 PM
I forgot to mentioned one big point, beside the customer name, I want to give users the possibility to enter the customer code, if they know.

So, entity customer contains following fields:
- pk
- customerCode
- customerName

When the grid is rendered I fill the customer name:
JSON:

{
"tasks": [
{
"taskId": "13",
"taskCode": "TAS01",
"taskDescription": "Task description lorem",
"taskDuration": "2",
"taskRequestedCompletionDate": "2011-09-01T10:00:00",
"customer_id": 6,
"customer_code": "BBI"
"customer_name": "Big Brand Inc."
}
]
}


{header : 'Customer', editor: comboEditor, width:150, dataIndex : 'CustomerName'}

But when the user edits the row:
He can search on customer name, but if he knows the customer code, he should be able to type the customer code and save the record. This is my code so far:


var comboEditor = {
xtype : 'combo',
triggerAction : 'all',
typeAhead: true,
forceSelection: true,
displayField : 'CustomerName',
valueField : 'CustomerId',
listConfig: {
loadingText: 'Searching...',
emptyText: 'No matching posts found.',

// Custom rendering template for each item
getInnerTpl: function() {
return '{CustomerCode} - {CustomerName}';
}
},
store : {
xtype : 'jsonstore',
idProperty: 'customerId',
fields : [
{name : 'CustomerId', mapping : 'customer_id'},
{name : 'CustomerCode', mapping : 'customer_code'},
{name : 'CustomerName', mapping : customer_'name'}],
proxy : {
type: 'ajax',
url : baseUrl + '/index.php/ProcessCustomer/read',
reader: {
type: 'json',
idProperty: 'customerId',
root: 'customers',
}
}
}
};

This remote store combobox works well, but how do I update the taskStore JSON?
Basically: how to copy the customer fields, from the editorStore to the gridpanelStore into the edited row??

Seems like I just can copy one record that is speficied in the valueField... but the others not?

slemmon
13 Aug 2011, 1:13 PM
A user typing the customer name should look up the customer by name and a user typing a customer primary key should look up a customer by primary key, correct?

Is the lookup going to grab the customer information from a remote store as they type?

aacoro
13 Aug 2011, 1:17 PM
A user typing the customer name should look up the customer by name and a user typing a customer CODE key should look up a customer by primary key, correct?

Is the lookup going to grab the customer information from a remote store as they type?

Almost:
typing customer name -> search customer by remote store while typing
typing customer code -> search customer by remote store while typing

the primary key should not be visible for the user.. sorry for my bad communication....

In both cases after edit: the primary key (preferably also customer code and name) of the new customer should be copied to the store of the gridpanel.

slemmon
13 Aug 2011, 1:26 PM
I've got an app that has a combobox and allows users to type in an address. That is sent to the server and a lookup is done for an existing address after the server parses the query to determine how the lookup should be performed (full address, address + city, city + state, two streets separated by 'and', etc.). Then the address record (or records) is returned to the combobox for the user to select.

Is that what your combobox and server be doing to manage the JSON record selection sent back to the combobox's store? If so would you then be able to set up a select listener on your combo? That listener could grab the record selected by the user, grab a reference to the grid's store, and use the grid's store's loadRecords method to add that selection to the grid's store?

aacoro
13 Aug 2011, 1:39 PM
I've got an app that has a combobox and allows users to type in an address. That is sent to the server and a lookup is done for an existing address after the server parses the query to determine how the lookup should be performed (full address, address + city, city + state, two streets separated by 'and', etc.). Then the address record (or records) is returned to the combobox for the user to select.

Is that what your combobox and server be doing to manage the JSON record selection sent back to the combobox's store? If so would you then be able to set up a select listener on your combo? That listener could grab the record selected by the user, grab a reference to the grid's store, and use the grid's store's loadRecords method to add that selection to the grid's store?

Yeah, I think I understand how it should work.. I can implement the listener that will copy the correct customer information to the taskStore.. I will try to implement this. Thanks for the thoughts!

slemmon
13 Aug 2011, 1:51 PM
Not sure I helped, yet. :D
Hope you're moving in the right direction, though.