[Ext 2.0] Problem with Converting 1.1 Paginated Grid

[smathis]

Hi,

I've been plugging away at this now for a couple of days and I can't seem to get any headway on it.

Our group is converting a paginated grid that was working in 1.1 to 2.0. But for some reason our pagination is not working. I'm pretty sure it's something really silly, like I'm missing something in HttpProxy or my DataStore is screwed up somehow.

But I've gone through all the 2.0 samples and threads I can find and have been unable to figure out a solution. Any help would be greatly appreciated.

JS Code:

<script type="text/javascript">
	Ext.onReady(function(){
		init_grid_agreements_grid();
	});

	function init_grid_agreements_grid()	{

            var reader = new Ext.data.JsonReader({
				                                    root: 'data',
				                                    totalProperty: 'total_rows',
				                                    idProperty: 'id'
				                                 }, 
				                                 [{name: "id"}, {name: "agreement_type_id"}, {name: "agreement_owner"}, {name: "agreement_ft_id"}, {name: "agreement_id"}, {name: "agreement_title"}, {name: "agreement_state_id"}, {name: "party_1"}, {name: "party_1_address"}, {name: "party_1_role"}, {name: "party_2"}, {name: "party_2_address"}, {name: "party_2_role"}])

		var ds = new Ext.data.Store({
			proxy: new Ext.data.HttpProxy({url: '/agreements.json', method: 'get'}),
			reader: reader,
			remoteSort: true
		});

		var cm = new Ext.grid.ColumnModel( [{hidden: true, dataIndex: "id"}, {header: "Contract Type", dataIndex: "agreement_type_id"}, {header: "Agreement Owner", dataIndex: "agreement_owner"}, {header: "Finetooth Id", dataIndex: "agreement_ft_id"}, {header: "Agreement Id", dataIndex: "agreement_id"}, {header: "Contract Title", dataIndex: "agreement_title"}, {header: "Contract State", dataIndex: "agreement_state_id"}, {header: "Party 1", dataIndex: "party_1"}, {header: "Party 1 Address", dataIndex: "party_1_address"}, {header: "Party 1 Role", dataIndex: "party_1_role"}, {header: "Party 2", dataIndex: "party_2"}, {header: "Party 2 Address", dataIndex: "party_2_address"}, {header: "Party 2 Role", dataIndex: "party_2_role"}] )
		cm.defaultSortable = true;

		grid = new Ext.grid.GridPanel({
				                          el: 'agreements_grid',
				                          ds: ds,
				                          cm: cm,
				                          autoSizeColumns: true,
				                          loadMask: true,
				                          width: 688,
				                          height: 428
      ,
				                          bbar: new Ext.PagingToolbar({
 	                          				                         pageSize: 20,
                                                                        		 displayInfo: true,
  		                                                                         emptyMsg: "No results to display",
                                                                                         store: ds
		                                          })
		});

               grid.addListener('rowdblclick', open_contract_details_from_grid)

               grid.render();

	       ds.load({ params: {start:0, limit:20} })

	}

</script>

<div id="agreements_grid" style=""></div>

My issue is that I always seem to get the first page of results. The grid returns total_rows and the page number correctly but fails to retrieve the correct JSON for the page.

The developers have checked the backend code and pinged this one back over the fence to me. But I'm at a loss as to why this has stopped working in 2.0.

Any help would be appreciated. Thanks.

[smathis]

I see my first mistake.

Posting this in the Ext 1.x forum. My bad. Could someone please move it over to the Ext 2.x Help forum?

Sorry about the confusion. I didn't see that there were two separate forums.

[smathis]

What I've been able to figure out thus far is that the remote paging does not appear to be sending the 'start' and 'limit' parameters. So every time it goes to the server it's hitting the HttpProxy url ("/agreements.json") but because there are no start/limit params it's not getting anything back.

If I set the parameters to default to "0" and "20" (respectively) on the backend, it comes back with the first page of results always, even though the toolbar shows the correct page number.

Does anyone know if there's an issue with the Paging Toolbar and the HttpProxy in 2.0?

I've gone through all the source code for Ext.PagingToolbar and even for Ext.Toolbar and Ext.Button. My next step is to search through the HttpProxy code to make sure there isn't a parameter I'm missing.

If anyone has any ideas or experience with this, please let me know. Ext 1.1 did not pass my earlier POC but I'm thinking if I can get the 2.0 grid (with features like grouping and the expander row) I'll be able to make a better pitch to my management team.

So any help would be great, especially considering that part of my POC is that Ext would speed up development. I'm willing to try just about anything within my capabilities at the moment to get this POC done.

P.S. Our backend is Ruby on Rails. Not sure if that helps. Maybe the PagingToolbar is posting the params instead of sending them via GET?

[jay@moduscreate.com]

take a look at how your calls are being made via firebug:"

http://tdg-i.com/img/extjs/paging_gr...ia_firebug.swf

[smathis]

Thanks DJLI!

That screencast was very helpful. Are there any more of those available?

I went into HttpProxy and looked through all that code. I will say this about ExtJS. I often learn much more from rifling through the code than reading the Documentation. Not sure why that is.

Back to topic...

So, I went to turn on ext-all-debug again so I could fiddle with some code and I noticed that I still had ext-base as my adapter. Previously, we were using the prototype adapter (Rails...). I remember turning that on earlier in the week in a desperate attempt to get the grids to do anything.

Then I went in and threw some console debugs and alerts in different places and I found that the start/limit were being sent as parameters through HttpProxy. And, lo and behold, the grids magically worked again.

I don't know why this is. But I'm guessing the backend developers had some sort of Prototype dependant code on their end.

I know it doesn't make sense but it appears to be working now, which is a big improvement.

Thanks again, DJLI. That's a useful tip with Firebug.

[kmarsh]

Not sure why, but I had this exact same problem. Paginated grids was working fine with JQuery/adapter but after I switched to ext-base they stopped working. Of course, I didn't realize WHY they stopped working until I read this thread and switched back to JQuery.

Thanks!
Kevin

[jay@moduscreate.com]

Thanks DJLI!

That screencast was very helpful. Are there any more of those available?

I went into HttpProxy and looked through all that code. I will say this about ExtJS. I often learn much more from rifling through the code than reading the Documentation. Not sure why that is.

Back to topic...

So, I went to turn on ext-all-debug again so I could fiddle with some code and I noticed that I still had ext-base as my adapter. Previously, we were using the prototype adapter (Rails...). I remember turning that on earlier in the week in a desperate attempt to get the grids to do anything.

Then I went in and threw some console debugs and alerts in different places and I found that the start/limit were being sent as parameters through HttpProxy. And, lo and behold, the grids magically worked again.

I don't know why this is. But I'm guessing the backend developers had some sort of Prototype dependant code on their end.

I know it doesn't make sense but it appears to be working now, which is a big improvement.

Thanks again, DJLI. That's a useful tip with Firebug.

You're definitely welcome. There are only a few screencasts available. I could work on more if folks wanted me to. : shrugs :

[tryanDLS]

It's not likely that jQuery vs Ext base is real cause of your issue. Examine the requests being sent in both cases with Firebug - are the same? Is one sending GET vs POST - one of which is not being handled by the server?