Saturday, May 25, 2024
 Popular · Latest · Hot · Upcoming
15
rated 0 times [  17] [ 2]  / answers: 1 / hits: 30750  / 15 Years ago, wed, december 2, 2009, 12:00:00

I was asked to post this as a question on StackOverflow by http://twitter.com/jonathanjulian which was then retweeted by several other people. I already have an ugly solution, but am posting the original problem as requested.



So here's the back story. We have a massive database application that uses ExtJS exclusively for the client side view. We are using a GridPanel (Ext.grid.GridPanel) for the row view loaded from a remote store.



In each of our interfaces, we also have a FormPanel (Ext.form.FormPanel) displaying a form that allows a user to create or edit records from the GridPanel. The GridPanel columns are bound to the FormPanel form elements so that when a record is selected in the GridPanel, all of the values are populated in the form.



On each form, we have an input field for the table row ID (Primary Key) that is defined as such:



var editFormFields = [
{
fieldLabel: 'ID',
id: 'id_field',
name: 'id',
width: 100,
readOnly: true, // the user cannot change the ID, ever.
monitorValid: true
} /* other fields removed */
];


So, that is all fine and good. This works on all of our applications. When building a new interface, a requirement was made that we needed to use a third-party file storage API that provides an interface in the form of a small webpage that is loaded in an IFrame.



I placed the IFrame code inside of the html parameter of the FormPanel:



var editForm = new Ext.form.FormPanel({
html: '<div style=width:400px;><iframe id=upload_iframe src=no_upload.html width=98% height=300></iframe></div>',
/* bunch of other parameters stripped for brevity */
});


So, whenever a user selects a record, I need to change the src attribute of the IFrame to the API URL of the service we are using. Something along the lines of http://uploadsite.com/upload?appname=whatever&id={$id_of_record_selected}



I initially went in to the id field (pasted above) and added a change listener.



var editFormFields = [
{
fieldLabel: 'ID',
id: 'id_field',
name: 'id',
width: 100,
readOnly: true, // the user cannot change the ID, ever.
monitorValid: true,
listeners: {
change: function(f,new_val) {
alert(new_val);
}
}
} /* other fields removed */
];


Nice and simple, except that it only worked when the user was focused on that form element. The rest of the time it failed to fire at all.



Frustrated that I was past a deadline and just needed it to work, I quickly implemented a decaying poller that checks the value. It's a horrible, ugly hack. But it works as expected.



I will paste my ugly dirty hack in an answer to this question.


More From » extjs

 Answers
27

The GridPanel columns are bound to
the FormPanel form elements so that
when a record is selected in the
GridPanel, all of the values are
populated in the form.




As I understand it from the quote above, the rowclick event is what actually triggers the change to your form in the first place. To avoid polling, this could be the place to listen, and eventually raise to your custom change event.


[#98172] Sunday, November 29, 2009, 15 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
annie

Total Points: 483
Total Questions: 97
Total Answers: 107

Location: Belarus
Member since Sat, Jul 18, 2020
4 Years ago
;