Error initiating Ext.Ajax.request

[Gilant]

(forked from grid.render not working, no error (http://extjs.com/forum/showthread.php?t=14257) thread, as I finally progressed to a completely different error)

I'm trying a perhaps ambitious experiment to sell my coworkers & product managers on the potentials of Ext. Not to mention try a real project to continue learning Ext. I want to update one of the most important tools on our website to use grid for displaying reports (eventually complete with paging, filtering etc). Changing the site to use Ext for everything, including form generation, would be beyond the scope of this experiment. However for the purposes of this discussion I have tried to isolate the active pieces used in this test, the piece of xhtml to display the button looks like this in the servers response:
<button class="run_report_button">Grid Report</button>

The javascript used to activate this button to submit the form via Ext.Ajax and parse the JSON response to configure the grid dynamically are currently:
var set_run_report_button = function() {

var submit_report = function() {
alert('Sending ajax request');
new Ext.Ajax.request({
form: 'performance_report_form',
text: 'Generating report...',
success: function(result, request) {
alert('starting to build grid with: ' + result);
var jsonData = Ext.util.JSON.decode(result.responseText);
},
failure: function ( result, request) {
Ext.MessageBox.alert('Failed', 'Successfully posted form: '+ result.date);
}
});
} // submit_report

var buttons = Ext.select('button.run_report_button', true)
Ext.each(buttons, function(element) {
element.on('click', submit_report);
})
}
Ext.onReady(set_run_report_button);


This fires on a button click as desired, and the 'Sending ajax request' alert is displayed. However after clicking OK I get the following error:
this.fireEvent is not a function
if(this.fireEvent("beforerequest", this, o) !== false){


I've tried a number of variations on the above code (in-lining the submit_report function, buttons.each etc), and all the ones that work to the point of the alert generate the same error. I do use Prototype.js for a large number of other form controls on the same page, but the only event configured on the button is by Ext.

I'd love to see our data load up into a grid. Help would be greatly appreciated!

[Gilant]

In a post from devnull after I started to write this new thread, he suggested not using "form: 'performance_report_form'," and compiling the values and using params: instead. I tried a few variations on that theme, but still get the same error.

[devnull]

on a hunch, try removing the 'new' in front of the Ext.Ajax.request, thats the only difference i see between your code and similar code in my apps.

[Gilant]

Hey, that worked!

We have now moved on to a new error! :s

When using ext-base.js, the request launches but my failure: alert fires.

However, when I change it from a button to a link, the failure alert still fires, BUT, the process continues and the success: function is called!?!

(aside, what is the Ext equivalent of Event.stop(ev) in Prototype? return false; doesn't seem to be stopping the button/link from performing their defualt action)

Now lets see if I can use jsonData. :)

Thanks!!!!

[evant]

On an Ext EventObject, you call


e.stopEvent();

[Gilant]

<sigh> lost first response.

On an Ext EventObject, you call

e.stopEvent();


Thanks evant!

----------------------------

OK, two long days of hair pulling, and I have finally striped out all of the Prototype.js that might be involved with generating this grid, I'm submitting my for with Ext.Ajax and parsing the response with Ext.util.JSON.decode and then calling to set up the grid.

And getting the same damn error I started with days ago!!!

:s OK. Here is where the code is failing at approx line 27601 in ext-all-debug.js:
for(var i = 0, len = cm.getColumnCount(); i < len; i++){

The error: cm.getColumnCount is not a function

Where is getColumnCount supposed to be defined? I don't see it defined in any of the grid demo's I've looked at.

[Gilant]

EDIT: D'oh! Never mind. At some point in trying to get this work I ended up using the data structure directly and not using it to create a new ColumnModel object with:
new Ext.grid.ColumnModel(model);

Now that I have fixed that, view.init(this); is working!!!

I'm not actually seeing anything in the grid, but I was supposed to be home by now, so that's all for today. Progress!!!

Slow, painful progress. But hey, better than none! ;)

=========================================================== old
Oh, and looking at the column_model variable passed in, such as:
column_model[0]['header']

I do indeed see the first expected header value. So at least the raw data structure does not appear to be mangled. I also found the getColumnCount definition in ext-all-debug. this.config.length?