Extjs grid with pagination

Question

hi,
i just start learning how to integrate extjs with oracle apex.
i manage to create a normal extjs grid but got problem when trying to create
a grid with pagination.
lets say ihave 100 rows of data, and i want to show only 10 rows of data per page, so how should i do that?
i know i need to send a request to so that i will get data 1-10 for the first page, and then when i click next,
i will get data 11-20 and so on.
but i dont know how to make it happen. i cannot find any example on the net.
how to know what is the current data set, (is it 1-10 or 11-20) , so that i can pass the correct values for start, to the application
process?
hope someone here can help me.
thanks,
-aku
Edited by: akulala on Sep 5, 2010 6:25 AM

Answer 1

Hi Aku
As far as I recall, alot of this came from Mark Lancaster so I would advise googling for his blog and having a look there - it may well make a lot more sense than this does.
I normally build my ExtJS script up at page loaed time using a package and print it out using htp.prn. So for the pagination, I would print out something like this...
    htp.p('<script>var u = (window.location.href.indexOf("?") > 0) ? window.location.href.substring(0,window.location.href.indexOf("?")) : window.location.href;
           var baseURL = u.substring(0,u.lastIndexOf("/"));
           var gridURL = baseURL + ''/wwv_flow.show?p_flow_id='' + Ext.getDom(''pFlowId'').value + ''&p_flow_step_id=0&p_instance='' + '||
          'Ext.getDom(''pInstance'').value + ''&p_request=APPLICATION_PROCESS%3DejPaginate'';</script>');And then my store would be defined as something like this...
myStore = new Ext.data.Store({
              storeId: 'myStore',
              proxy: new Ext.data.ScriptTagProxy({
              url: gridURL,
              nocache: false,
              callbackParam: 'p_widget_num_return'
              baseParams: {'x01':'&APP_ID.', 'x02':'&APP_PAGE_ID.', 'x03':'xyz'},  //the xyz would be your region
                                                                                   //ID passed into the procedure I gave you in my previous post
              remoteSort: true,
              paramNames: {
              start: 'x04', // The parameter name which specifies the start row
              limit: 'x05', // The parameter name which specifies number of rows to return
              sort: 'x06',  // The parameter name which specifies the column to sort on
              dir: 'x07'    // The parameter name which specifies the sort direction
              reader: myReader
              });And my application process (ejPaginate in the above example) would look something like this...
BEGIN
  htp.p(wwv_flow.g_widget_num_return||'(');
  get_grid_json(p_app_id => wwv_flow.g_x01,
                    p_app_page_id => wwv_flow.g_x02,
                    p_region_id => TO_NUMBER(wwv_flow.g_x03),
                    p_start => NVL(wwv_flow.g_x04,0),
                    p_limit => NVL(wwv_flow.g_x05,10),
                    p_sort => wwv_flow.g_x06,
                    p_dir => wwv_flow.g_x07);
  htp.p(')');
END;Hope this helps you along.
Cheers
Ben