View Full Version : replace protocol in geoext.form.formpanel??

15 Jan 2013, 1:01 AM
Hi all,

I've been scratching my head over this and I'm wondering if this is possible. I want to replace the protocol of the GeoExt.form.FormPanel in the following way:

1. to render the formpanel, I defined a variable "proto" as null outside the formpanel (var proto = null).
2. then "proto" goes inside the formpanel (protocol: proto).
3. in the handler function of the button a new variable "proto" is defined. I want to replace this new variable inside the formpanel.

Since extjs, geoext, openlayers are javascript libraries, I've tried things such as "eval" to make the variable "proto" inside the handler accessible in the formpanel but no luck so far. Here it is a simplified example to show this:

var proto = null;

var formPanel = new GeoExt.form.FormPanel({
protocol: proto, # <--- replace with [1]
items: [{
xtype: "combo",
id: "idcombo",
}, {
xtype: "textfield",
id: "idtext",
text: "search",
handler: function() {
var combo = Ext.getCmp('idcombo').getValue(); # <--- this works and gets the value chosen in "xtype: combo"
var proto: new OpenLayers.Protocol.HTTP({ # <--- [1] (ie. new variable "proto")
url: "http://www.pub.pub/" + combo + "/somestuff/", # <--- this works
format: etc...

how could I do this? I'll appreciate your support, thanks in advance.

Best regards,


15 Jan 2013, 6:58 AM
If I'm understanding the problem correctly, surely all you would need to do is:

var p = new OpenLayers.Protocol.HTTP({ //CONFIG HERE});
formPanel.protocol = p;

15 Jan 2013, 9:33 AM
Thank you willigogs for the idea, I tried it but I'm getting this error:

TypeError: o.protocol is null and it points to the SearchAction.js (http://api.geoext.org/1.1/lib/GeoExt/widgets/form/SearchAction.js) (line 122).

I'm sure this is because
var proto = null; defined outside the formPanel. I read that SearchAction.js but don't get what is the problem to replace the protocol.

15 Jan 2013, 9:41 AM
I have never used GeoExt, so I'm completely guessing here - but could the fact that you are calling formPanel.search() before populating the protocol be a problem?

15 Jan 2013, 10:06 AM
yeah in fact that could be the problem, how could I solve that? in the handler putting formPanel.search() after var proto doesn't solve the problem btw

16 Jan 2013, 2:36 AM
I would recommend some basic debugging to see what is / is not getting set.

Something like:

text: "search",
handler: function() {


var combo = Ext.getCmp('idcombo').getValue();
var proto = new OpenLayers.Protocol.HTTP({
url: "http://www.pub.pub/" + combo + "/somestuff/"

formPanel.protocol = proto;



If everything is being set as expected, but the formPanel.search() function is still failing, then double check that this is successful if hardcoded into the protocol to begin with.

The only other option I would investigate before searching for someone with specific GeoExt assistance, would be to see if destroying and re-instantiating the form (with the correct protocol assigned) would be a possibility.

16 Jan 2013, 12:39 PM
I tested your suggestion and this is the result:

this is formPanel: [object Object]

this is 1st formPanel.protocol: null

this is 2nd formPanel: [object Object]

TypeError: o.protocol is null

so I think it's clear that the formPanel.protocol = proto; is sending nothing to the formPanel because the proto there is still null (as it was set at the beginnig).

Your second option sounds interesting, the thing is if I destroy the form it dissapears after pressing the search button and don't know well how to re-instantiating it . This form is inside an Ext.Window btw. Let me post my code and see how can I do that please:

var proto = null;
var formPanel = new GeoExt.form.FormPanel({
protocol: proto,
items: [{
xtype: 'combo',
id: 'idcombo',
store: new Ext.data.SimpleStore({
fields: ['idlayer','layer'],
data: [["1","cars"],["2","music"],["3","food"],["4","girls"]]
displayField: 'layer',
valueField: 'idlayer',
fieldLabel: 'Layer',
emptyText: 'select a layer',
submitValue: false,
selectOnFocus: true,
mode: 'local',
typeAhead: true,
editable: false,
forceSelection: true,
triggerAction: 'all'
xtype: 'textfield',
id: 'idtextfield',
fieldLabel: 'Keyword',
emptyText: 'enter keyword',
name: 'comments__like',
allowBlank: false
listeners: {
actioncomplete: function(form, action) {}
buttons: [{
text: 'search',
handler: function(){
console.log('this is formPanel: ' + formPanel);
console.log('this is 1st formPanel.protocol: ' + formPanel.protocol);

var comboLayer = Ext.getCmp('idcombo').getRawValue();
var keyword = Ext.getCmp('idtextfield').getRawValue();
var proto = new OpenLayers.Protocol.HTTP({
url: 'http://www.pub.pub/' + comboLayer + 'comments__ilike=' + keyword + '&queryable=comments',
format: new OpenLayers.Format.GeoJSON()

formPanel.protocol = proto;
console.log('this is 2nd formPanel: ' + formPanel.protocol);


key: [
handler: function(){

18 Jan 2013, 2:14 AM
On the contrary, the above debugging proves that the protocol IS being set successfully (the 3rd console.log was of the protocol, not the formPanel).

I would recommend you use Firefox, then install Firebug and illuminations. Debugging and only being returned "Object" or "Null" makes things near impossible to debug easily.


These will then allow you to console.log() objects, and then click what is returned to view the object's config and inspect the DOM.

30 Jan 2013, 9:48 AM
Hi Willigogs

sorry for my late answer to your last message. After checking with illuminations (because firebug is already installed), I noticed that the new searchformPanel.protocol (3rd console.log you refered) works well as you pointed out, but it's not being sent back to the searchformPanel, or at least is not read by it. With illuminations I went to the SearchAction.js (line 122) (the error in firebug) and pointing with the cursor to that line I saw that protocol is still null (o.protocol.read), here I show you the part of the SearchForm.js:

110 /** private: method[run]
111 * Run the action.
112 */
113 run: function() {
114 var o = this.options;
115 var f = GeoExt.form.toFilter(this.form, o.logicalOp, o.wildcard);
116 if(o.clientValidation === false || this.form.isValid()){
118 if (o.abortPrevious && this.form.prevResponse) {
119 o.protocol.abort(this.form.prevResponse);
120 }
122 this.form.prevResponse = o.protocol.read(
123 Ext.applyIf({
124 filter: f,
125 callback: this.handleResponse,
126 scope: this
127 }, o)
128 );
129 } else if(o.clientValidation !== false){
130 // client validation failed
131 this.failureType = Ext.form.Action.CLIENT_INVALID;
132 this.form.afterAction(this, false);
133 }
134 },

In line 122 (o.protocol.read), if I put the cursor over only the "o", illuminations says "Object { abortPrevious=true, protocol=null }". If I move it over "protocol", it says "null".

I was wondering if the problem is because line 122 is inside a "private" method as appears in line 110, what do you think?

Thank you,

2 Feb 2013, 11:11 AM
I did a cleaner post about this, please check here: http://www.sencha.com/forum/showthread.php?255496-How-can-I-overwrite-the-url-of-OpenLayers.Protocol.HTTP&p=935193

14 Feb 2013, 8:44 AM
The solution was simply to take the protocol outside the formPanel and use "protocol.options.url = newUrl;", thanks willigogs for support ;)