Ext.onReady(function(){
	
 
    var store = new Ext.data.Store({
        remoteSort: true,
        sortInfo: {field:'st', direction:'DESC'},
        autoLoad: {params:{start: 0 ,limit: 10 }},
        baseParams:{ApexDemandName:'JSON_GRID',ApexNameItem:'USER_SEARCH_STRING',ApexDataType:'json'},
        proxy: new Ext.data.ApexProxy(),

        reader: new Ext.data.JsonReader({
            root: 'strec',
            totalProperty: 'totalCount',
            idProperty: 'ST',
            fields: ['ST','STATE_NAME']
        })
    });
	
		
    var grid = new Ext.grid.GridPanel({
        renderTo: 'st-grid',
        width: 700 ,
        height: 500 ,
        frame:true,
        loadMask:true,
        title:'STATE',
        trackMouseOver:false,
		    autoExpandColumn: 'ST',
        store: store,

        columns: [new Ext.grid.RowNumberer({width:  30 }),{
            id: 'ST',
            header: "St",
            dataIndex: 'ST',
            width:  10 ,
            sortable:true
        },{
            header: "State name",
            dataIndex: 'STATE_NAME',
            width:  500 ,
            sortable:true
        }],

	    bbar: new Ext.PagingToolbar({
		    store: store,
		    pageSize: 10 ,
		    displayInfo:true
	    })

    });


 
});

Ext.data.ApexProxy = function(config){
    Ext.data.ApexProxy.superclass.constructor.call(this);
    Ext.apply(this, config);
};

Ext.extend(Ext.data.ApexProxy, Ext.data.DataProxy, {
    load : function(params, reader, callback, scope, arg){
        if(this.fireEvent("beforeload", this, params) !== false){
		        params = params || {};
		        var result;
				if (params.ApexDemandName !== undefined) {
				try {
					var get;
          var response;
					get = new htmldb_Get(null, document.getElementById("pFlowId").value, 'APPLICATION_PROCESS='+params.ApexDemandName,  0 );
          if (params.ApexNameItem !== undefined) {get.add(params.ApexNameItem, Ext.util.JSON.encode(params));}

          if(params.ApexDataType == 'json') {
             response = get.get();
					   result = reader.readRecords(Ext.util.JSON.decode(response));
          }else if(params.ApexDataType == 'xml'){
             response = get.get('XML');
					   result = reader.readRecords(response);
          }else{
             response = get.get();
					   result = reader.readRecords(response);
          }
          get = null;if (params.ShowResponse){alert(response);}
				} 
				catch (e) {
					this.fireEvent("loadexception", this, arg, this.response, e);
					callback.call(scope, null, arg, false);
					return;
				}
				callback.call(scope, result, arg, true);
				
			}else{callback.call(scope, null, arg, false);};
				
        }else{callback.call(scope, null, arg, false);}
    },

    update : function(params, records){
        
    }
});

declare
  obj json:= json(); 
  mylist json_list:=json_list();
  st_obj json;
  kol varchar2( 10 );
  qry VARCHAR2( 1000 ):='select a.ST, a.STATE_NAME from (SELECT rownum rn, b.* from ( select ST, STATE_NAME FROM DEMO_STATES ';
  qry_kol varchar2( 1000 ):= 'begin SELECT to_char(count(*)) into :kol FROM DEMO_STATES; end;';
  start_rows number;
  end_rows number;
  
  TYPE CurTyp  IS REF CURSOR;
  v_dstat_cursor    CurTyp;
  dstat_record      DEMO_STATES%ROWTYPE;
  
  main_param json;
  field VARCHAR2( 100 );
  direction VARCHAR2( 5 );
  start_page NUMBER;
  limit_row NUMBER;
begin

if :USER_SEARCH_STRING  is not null then
        select replace(:USER_SEARCH_STRING,'"','"') into :USER_SEARCH_STRING from dual;
        
        main_param:=json(:USER_SEARCH_STRING);
        field   :=json.to_varchar2(main_param.get('sort'));
        direction :=json.to_varchar2(main_param.get('dir'));
        start_page:=json.to_number(main_param.get('start'));
        limit_row :=json.to_number(main_param.get('limit'));
end if;

        start_rows:=nvl(start_page, 0 );
        end_rows:=nvl(start_rows+limit_row, 10 );

        if field is not null then   qry:=qry||' order by '||field;
          if direction is not null then  qry:=qry||' '||direction; end if;
        end if;
        qry:=qry||') b ) a where a.rn>:start_rows and a.rn<=:end_rows';
        
        EXECUTE IMMEDIATE qry_kol USING OUT kol;
        obj.put('totalCount',kol);

    BEGIN
        OPEN v_dstat_cursor FOR qry USING start_rows, end_rows;
        LOOP
          FETCH v_dstat_cursor INTO dstat_record;
          EXIT WHEN v_dstat_cursor%NOTFOUND;
          
           st_obj:= json();
           st_obj.put('ST',dstat_record.ST);
           st_obj.put('STATE_NAME',dstat_record.STATE_NAME);
           mylist.add_elem(st_obj.to_anydata);
           
        END LOOP;
    CLOSE v_dstat_cursor;
    EXCEPTION  WHEN OTHERS THEN 
               CLOSE v_dstat_cursor; 
    END;
     
    obj.put('strec',mylist);
    htp.p(obj.to_char());

end;

<link rel="stylesheet" type="text/css"href="/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/extjs/ext-all.js"></script>
<script type="text/javascript" src="&APP_IMAGES.ApexProxy.js"></script>
<script type="text/javascript" src="&APP_IMAGES.json-grid.js"></script>

<div id="st-grid"></div>

Ext.onReady(function(){

    var store = new Ext.data.Store({
        baseParams:{ApexDemandName:'XML_GRID',ApexDataType:'xml'},
        proxy: new Ext.data.ApexProxy(),

        reader: new Ext.data.XmlReader({
               record: 'Item',
               id: 'PRODUCT_ID',
               totalRecords: '@total'
           }, [
               'PRODUCT_NAME'
           ])
    });

    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {header: "PRODUCT", width:  500 , dataIndex: 'PRODUCT_NAME', sortable: true}
        ],
        renderTo:'example-grid',
        loadMask:true,
        width: 540 ,
        height: 200 
    });

    store.load();
});

owa_util.mime_header('text/xml', FALSE );
htp.p('Cache-Control: no-cache');
htp.p('Pragma: no-cache');
owa_util.http_header_close;

htp.p(' <DEMO_PRODUCT_INFO>');
htp.p('<Items>');

for ll in (
SELECT
'<Item>'||
'<PRODUCT_ID>'||to_char(PRODUCT_ID)||'</PRODUCT_ID>'||
'<PRODUCT_NAME>'||PRODUCT_NAME||'</PRODUCT_NAME>'||
'<PRODUCT_DESCRIPTION>'|| PRODUCT_DESCRIPTION||'</PRODUCT_DESCRIPTION>'||
'<CATEGORY>'|| CATEGORY||'</CATEGORY>'||
'<PRODUCT_AVAIL>'||PRODUCT_AVAIL||'</PRODUCT_AVAIL>'||
'<LIST_PRICE>'|| to_char(LIST_PRICE)||'</LIST_PRICE>'||
'<IMAGE_ID>'|| to_char(IMAGE_ID)||'</IMAGE_ID>'||
'</Item>' str
FROM DEMO_PRODUCT_INFO
)
loop
   htp.p(ll.str);
end loop;

htp.p('</Items>');
htp.p('</DEMO_PRODUCT_INFO>');

<link rel="stylesheet" type="text/css"href="/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/extjs/ext-all.js"></script>
<script type="text/javascript" src="&APP_IMAGES.ApexProxy.js"></script>
<script type="text/javascript" src="&APP_IMAGES.xml-grid.js"></script>

<div id="example-grid"></div>