Friday, January 15, 2010

extjs & jquery & Oracle Apex

To get the grid "dynamic" try somthing like (assuming that you use the jQuery adapter) this:

Ext.onReady(function() {
 jQuery("table.standardalternatingrowcolors",this).each(function(){
 var table = this;
 // create the data array
 var myData = new Array();
 jQuery('tr[td]',table).each(function(){
   var tr = new Array();
   jQuery('td', this).each(function(){  
     tr[tr.length] = jQuery(this).html();
   });
   myData[myData.length] = tr;
 });
 // create the metadata array
 var myHeaders = new Array;
 jQuery('tr[th]',table).each(function(){
   jQuery('th', this).each(function(){  
     var header = {};
     header["name"] = jQuery(this).attr('id');
     header["dataIndex"] = jQuery(this).attr('id');
     header["header"] = jQuery(this).html();
     header["sortable"] = true;
     header["width"] = 90;
     myHeaders[myHeaders.length] = header;
   });
 });
 
  var ds = new Ext.data.Store({
   proxy: new Ext.data.MemoryProxy(myData),
   reader: new Ext.data.ArrayReader({id: 0}, myHeaders)
  });
  ds.load();
 
  var colModel = new Ext.grid.ColumnModel(myHeaders);
  jQuery(table).attr(id,'x');
  var grid = new Ext.grid.GridPanel({el: 'grid-example', ds: ds, cm: colModel});
  grid.render();
  grid.getSelectionModel().selectFirstRow();
  jQuery(table).show();
 
 }); // replace each table on the page
 
});

No comments: