Wednesday, December 10, 2008

ExtJS Grid in Apex (with pagination)

Check out the ExtJS Grid with Pagination on my demo site
So how does it work?
This is brief, because it's after midnight.
  • Use a Named Column (row template) for the Report to build the grid array data - see page source code for output.
  • The query needs to return the data in a JSON escaped format, so use a "SQL Query (PL/SQL  function returning a SQL query)" with generic column names The function call looks like:
begin
return json_api.grid_query
  (p_region_id => 4367612871540792
  ,p_query =>'select * from geo_domains'
  );
end;
  • The query returned limits the rows and JSON escapes the data, much the same way as Apex does internally (hint: dbms_sql). Also - I set pagination to none, as its handled by my code.
  • Pressing next data set on the displayed page fires off a AJAX request (application process) which passes the region_id as well as start, limit and callback function values.
  • This executes a database package to re-run the query and return a paginated rowset. You can see the returned data format using Firebug.
  • The grid updates the data using builtin ExtJS functionality.
Next example will be an updatable grid - also near completion.
Nighty night - Mark

4 comments:

Sujay Dutta, PMP said...

I love your work with ExtJS - Apex integration!!!! It's fabulous!!!

Anonymous said...

Good example. I made the same with dbms_xmlgen package and xml.
Wich oracle features have you used to implement json_api?

dean said...
This comment has been removed by the author.
dean said...

Any Chance I can view your apex dev site to view how you setup?