PDA

View Full Version : Use of Remote Combobox with CRUD Framework



keithcortis
16 Sep 2009, 6:26 AM
I have just implemented a form (FormPanel) and grid (EditorGridPanel) using CRUD - as can be seen in the following url : http://www.spotmaster.com/dev/writer.html

Bascially a user can create, read, update, delete (CRUD) a particular contact where everything is working fine except the combobox named 'Organization' where this can be found both within the form and grid.

If you type for example: 'org' - the combobox works fine but what i would like is that if i choose a particular organization I would like that when this is saved in the database, once i want to see this record both in the grid or in the form I would see the name of the organization and not it's ID.

I have read some solutions on the forum how this can be done but i did not understand them and also did not work as expected when i tried them out.

Any idea how this problem can be solved, please? Thanks!

keithcortis
27 Sep 2009, 11:19 PM
anyone has any idea how this problem can be solved please? thanks!

Condor
27 Sep 2009, 11:59 PM
name: 'org_id' -> hiddenName: 'org_id'

keithcortis
28 Sep 2009, 12:08 AM
thanks condor for the reply so i have to remove the name property and instead use the hiddenName one?

Condor
28 Sep 2009, 12:20 AM
Correct.

keithcortis
28 Sep 2009, 12:33 AM
condor i tried it as you told me but the same answer results since what i want is that when i choose a particular record the organization name is shown in the combobox and not its organization id.... you can check the link for assistance.. thanks

Condor
28 Sep 2009, 12:36 AM
1. The combobox store needs to be loaded before you set the value (or use the code from this feature request (http://www.extjs.com/forum/showthread.php?t=75751)).
2. Define a valueNotFoundText config option in the combobox (for when the organization id is 0).

keithcortis
28 Sep 2009, 12:38 AM
1. The combobox store needs to be loaded before you set the value (or use the code from this feature request (http://www.extjs.com/forum/showthread.php?t=75751)).
2. Define a valueNotFoundText config option in the combobox (for when the organization id is 0).

Yes i had used that code from the feature request that you told me about but it does not always work fine and i would also like to display the organization name in the combobox displayed within the grid of which does not seem to work with any method tried. Thanks for your advice

keithcortis
28 Sep 2009, 1:02 AM
condor i have tried that piece of code that you directed me to and it works but not as required for the following reasons:


if you check the link that i gave you - when you select a record from the grid the details of that record appear in the form so that you can edit them or view them - but if you notice the value of the organization remains not found.

now if you choose a name of a particular organization from the combobox (initialize it ) and then choose a particular record from the grid - then this works fine and all the names of the organizations are shown...

that is what i am trying to fix since i want it to work without initializing it or something similar...

Condor
28 Sep 2009, 1:21 AM
I rechecked you page, but you aren't using the code from the feature request.

keithcortis
28 Sep 2009, 1:25 AM
yes condor i am you have to check http://spotmaster.com/dev/UserForm.js since the combo box that i have in the writer.js is the one being used in the editor grid and not inside the form. UserForm.js contains the data needed for the form.... thanks

Condor
28 Sep 2009, 1:28 AM
There was a small bug in that code:

this.mode -> this.store.mode

keithcortis
28 Sep 2009, 1:34 AM
There was a small bug in that code:

this.mode -> this.store.mode
thanks a lot condor.. i changed it but the value of the organization's name is still not being displayed :( you have any clue why this is so? thanks alot!

Condor
28 Sep 2009, 1:49 AM
Please forget my previous post (the original code was correct!).

The problem is that with this change the store is doing a GET instead of a POST request for contacts, which your server can't handle.

keithcortis
28 Sep 2009, 2:01 AM
Please forget my previous post (the original code was correct!).

The problem is that with this change the store is doing a GET instead of a POST request for contacts, which your server can't handle.

Yes, it's true a GET is being done but no values are being passed to the server to load that specific value.. can it be something from the code being used?

Condor
28 Sep 2009, 2:42 AM
Try the updated code from this post (http://www.extjs.com/forum/showthread.php?p=385027#post385027).

keithcortis
28 Sep 2009, 2:48 AM
Yes, it's true a GET is being done but no values are being passed to the server to load that specific value.. can it be something from the code being used?

I am doing some tests and what i note that is the problem is the following:

-- this.store.load();

where no parameters are being passed to which values should be loaded and thus no values are being loaded in this case.. i would like something that loads the particular value that i want and thus display it's corresponding organization name - what do you think condor?

keithcortis
28 Sep 2009, 2:48 AM
Try the updated code from this post (http://www.extjs.com/forum/showthread.php?p=385027#post385027).

i will try this first cause i am seeing the reply now.. thanks!

keithcortis
28 Sep 2009, 3:00 AM
Try the updated code from this post (http://www.extjs.com/forum/showthread.php?p=385027#post385027).

So i tried this code and if you log to http://www.spotmaster.com/dev/writer.html you can see that it seems to not be working fine although the query is being sent well.. another problem is that if you click on another record no issue to the server is made so that the organization name is retrieved since this is only done on the first time that the a record is chosen.

On the otherhand if 'valueParam: 'query',' is removed from my code this will automatically load all of the records that i have and will then work fine - due to the allQuery command but it is not as i want it since i would like that filtering is used and thus only the value that i want is retrieved from the server..

Condor
28 Sep 2009, 3:46 AM
You have 2 options:
1. Don't specify a valueParam and load all values.
2. Use a valueParam (but not 'query'!) and build support for this in your server.

keithcortis
28 Sep 2009, 4:25 AM
thanks condor for your suggestions - i guess those are the options that i have.. if i will decide to make use of the second suggestion the only problem that i see is that a request to the server is only made for the first record that i click on, and thus whenever i click to edit/view another record no query to the server is issued so that the new value of the organization is displayed.

Condor
28 Sep 2009, 5:13 AM
Oh, yes. That still doesn't help...

You should load all records (no valueParam) and in the load event of the store set the store to mode:'local'.

keithcortis
28 Sep 2009, 5:28 AM
Oh, yes. That still doesn't help...

You should load all records (no valueParam) and in the load event of the store set the store to mode:'local'.

Hi condor, sorry to bother once again but my point is that i don't want to load the store beforehand since if I have 100000 customers in the combo box i can't load all the customers of the combo since it is not that reliable to load the records that are wanted and also due to a heavy workload to the server. I hope you understand my point that is why I am asking for another method..

thanks for your patience

28 Sep 2009, 5:29 AM
chances are you didn't get a response from your help request because you didn't post in a 'help' forum.

28 Sep 2009, 5:29 AM
Btw, have you considered paging?

keithcortis
28 Sep 2009, 5:32 AM
Btw, have you considered paging?

if i am viewing correctly the thread is in the Help forum... also I am currently using paging of which works fine.. but my problem is not related to paging but with the loading of a value in a combobox... you can view the url and posts to the problem if you want to understand more my concern..

28 Sep 2009, 5:35 AM
Ack!! you're right dude. My apologies for the incorrect posting. It was my error.

keithcortis
28 Sep 2009, 5:41 AM
Ack!! you're right dude. My apologies for the incorrect posting. It was my error.

no problem mate :) the only problem is how I will solve this problem that i am encountering in extjs since I need this functionality basically for all the web applications that i will work on..

28 Sep 2009, 5:45 AM
Btw, there is a flaw in your code. It seems your paging toolbar is a 'child' of the bottom toolbar, and it makes it look strange.

keithcortis
28 Sep 2009, 5:49 AM
Btw, there is a flaw in your code. It seems your paging toolbar is a 'child' of the bottom toolbar, and it makes it look strange.

i did it in that manner since i want to display several options in the bottom toolbar and not only the paging toolbar, but it works fine as it is and I will maybe arrange it later since the concern that i have is as i said regarding the combobox

Condor
28 Sep 2009, 5:53 AM
OK, I've modified the code for your case:

Ext.override(Ext.form.ComboBox, {
setValue : function(v){
var text = v;
if(this.valueField){
var r = this.findRecord(this.valueField, v);
if(r){
text = r.data[this.displayField];
}else{
if(this.mode == 'remote' && this.valueParam &&
(!this.store.lastOptions || !this.store.lastOptions.params ||
this.store.lastOptions.params[this.valueParam] != v)){
this.store.on('load', this.setValue.createDelegate(this, arguments), null, {single: true});
var params = {};
params[this.valueParam] = v;
this.store.load({params: params});
return;
}
if(this.valueNotFoundText !== undefined){
text = this.valueNotFoundText;
}
}
}
this.lastSelectionText = text;
if(this.hiddenField){
this.hiddenField.value = v;
}
Ext.form.ComboBox.superclass.setValue.call(this, text);
this.value = v;
}
});
(this does indeed need a valueParam!)

keithcortis
28 Sep 2009, 6:05 AM
OK, I've modified the code for your case:

Ext.override(Ext.form.ComboBox, {
setValue : function(v){
var text = v;
if(this.valueField){
var r = this.findRecord(this.valueField, v);
if(r){
text = r.data[this.displayField];
}else{
if(this.mode == 'remote' && this.valueParam &&
(!this.store.lastOptions || !this.store.lastOptions.params ||
this.store.lastOptions.params[this.valueParam] != v)){
this.store.on('load', this.setValue.createDelegate(this, arguments), null, {single: true});
var params = {};
params[this.valueParam] = v;
this.store.load({params: params});
return;
}
if(this.valueNotFoundText !== undefined){
text = this.valueNotFoundText;
}
}
}
this.lastSelectionText = text;
if(this.hiddenField){
this.hiddenField.value = v;
}
Ext.form.ComboBox.superclass.setValue.call(this, text);
this.value = v;
}
});(this does indeed need a valueParam!)


oh condor great thanks a lot i will check it soon.. regarding the valueParam - can it be 'query' or anything except for 'query'.. thanks once again for your help!

Condor
28 Sep 2009, 6:26 AM
No, it can't be 'query', because your server needs to do something different.

With queryParam (='query') is should do a partial search for the displayText, but with valueParam (e.g. 'value') it should do an exact search on the valueField.

keithcortis
28 Sep 2009, 11:00 PM
No, it can't be 'query', because your server needs to do something different.

With queryParam (='query') is should do a partial search for the displayText, but with valueParam (e.g. 'value') it should do an exact search on the valueField.

Hi condor goodmorning... Thanks for your reply I will try it once I will modify the appropriate server code - but I am trying the application with the piece of code that you gave me to inspect the requests that it makes to the server and i think that after some requests - an infinite loop of requests is being invoked since multiple requests to the server keep occuring even though no manual requests were done by the user. This seems to occur once you select a record which has no organization (ID) and then you select a record (from the grid) which contains an organization.

Do you have an idea what the problem could be? Thanks for your support

keithcortis
29 Sep 2009, 6:11 AM
Hi condor goodmorning... Thanks for your reply I will try it once I will modify the appropriate server code - but I am trying the application with the piece of code that you gave me to inspect the requests that it makes to the server and i think that after some requests - an infinite loop of requests is being invoked since multiple requests to the server keep occuring even though no manual requests were done by the user. This seems to occur once you select a record which has no organization (ID) and then you select a record (from the grid) which contains an organization.

Do you have an idea what the problem could be? Thanks for your support

Hi condor regarding this query that i asked you in the morning it is ok - everything seems to be working fine not that the server side has been modified to my needs.

I would like to ask you one last query regarding this matter which is really important. if you go to http://spotmaster.com/dev/writer.html - you can see that the grid has a combo box inside it as well and i would like that the name of the organization also is shown in the last column and not the organization number.. any idea how i can display the organization name in a combo inside a grid? Thanks :)

keithcortis
29 Sep 2009, 11:01 PM
Hi does anyone have a clue how I can show the name of an organization in a combobox inside an Editor Grid and thus not show the id? Thanks

Condor
29 Sep 2009, 11:20 PM
And you still don't want to load the combobox store with all values?

In that case your grid store needs to contain both the id and the text and you need to write a beforestartedit event handler that sets the combobox id and text and a complete event that updates the id and text in the grid store again.

keithcortis
29 Sep 2009, 11:28 PM
And you still don't want to load the combobox store with all values?

In that case your grid store needs to contain both the id and the text and you need to write a beforestartedit event handler that sets the combobox id and text and a complete event that updates the id and text in the grid store again.

So I have to use the 'beforeedit' event where I get the id and text of the combo box and then set it? but can't i use the same principle as that of the form combo where the server gives back the id and then you set the value of the store according to the id. And also why is a complete event needed? since i did not fully understand it's need.
Is there any example where I can follow on since I am still new to some extjs concepts?
Thanks once again for your help!

Condor
30 Sep 2009, 12:48 AM
I was talking about the beforestartedit and complete events of the Ext.grid.GridEditor, but you can use the beforedit and afteredit events of the Ext.grid.EditorGridPanel instead.

keithcortis
30 Sep 2009, 1:00 AM
I was talking about the beforestartedit and complete events of the Ext.grid.GridEditor, but you can use the beforedit and afteredit events of the Ext.grid.EditorGridPanel instead.

I still do not understand your idea of why i need to use the afteredit event since i am not updating the record but i just want to display the organization name in the combobox since till now the organization id is being shown.. it is similar to the problem i had in the form. thanks

Condor
30 Sep 2009, 1:10 AM
First of all, you are using an EditorGridPanel, but you didn't define editors. So why are you using an EditorGridPanel instead of a GridPanel?

Other remarks:
1. Your Ext.BLANK_IMAGE_URL is incorrect (e.g. the combobox trigger and the grid sort icon are wrong).
2. You should update the form on the selectionchange event of the selection model (with a buffer) instead of on the click event of the grid (e.g. try changing the grid selection using the keyboard).

keithcortis
30 Sep 2009, 1:30 AM
First of all, you are using an EditorGridPanel, but you didn't define editors. So why are you using an EditorGridPanel instead of a GridPanel?

Other remarks:
1. Your Ext.BLANK_IMAGE_URL is incorrect (e.g. the combobox trigger and the grid sort icon are wrong).
2. You should update the form on the selectionchange event of the selection model (with a buffer) instead of on the click event of the grid (e.g. try changing the grid selection using the keyboard).

I am still new to extjs and i am still not accustomed to some things like te BLANK IMAGE URL...

I have also just defined an editor (i was using an EditorGridPanel inorder to edit rows - i did not know that I had to define an editor).. but this editor seem to be giving me an error when i click on a row - being:

f is undefined
chrome://firebug/content/blank.gif f.setValue(val);\n

Any ideas?


Thanks for your help

Condor
30 Sep 2009, 2:06 AM
But do you actually want to edit the grid? Or do you only want to use the form for that?

keithcortis
30 Sep 2009, 2:13 AM
But do you actually want to edit the grid? Or do you only want to use the form for that?

Yes i want to use both form and grid for editing... If you check now www.spotmaster.com/dev/writer.html and double click on a particular row.. the editor does not seem to be working since the error that i specified in the last post which is related to the RowEditor.js is being shown.. any idea what the problem could be? thanks

Condor
30 Sep 2009, 3:01 AM
You'll need to create a different textfield for each column.