MasterJrock.com

Last week, I’ve just added Ext-JS in my toolbox. Ext-js is probably one the best DOM scripting library I know and I’m going to use for all of my Magento projects from now on.

Reading from its examples, below is my basic table grid example using a standard data.

The data seems a little simple but in a real-world scenario, pages with this data would make it heavy online. Therefore, an alternative way to load data is to use it via AJAX with a json formatted data which will succeed this post, but first on to the basics.

First, Download Ext-js library from their website.

Second, create important header calls:

Third, make a javascript call inside the html body (or in the header at your discretion):

var data = [your json formated array data];

var store = new Ext.data.ArrayStore({ fields: [your field arrays] });

store.loadData(data); // load the var "data"

var grid = new Ext.grid.GridPanel({  //Declare the grid panel
    store: store, //your var "store"
    columns: [your column arrays],
    viewConfig: { forceFit: true}, // force to fit all columns inside the grid
    stripeRows: true, // creates css background on table rows
    height: 210,
    width: 947,
    stateful: true,
    stateId: 'grid', //id of the ext-js var "grid"
    title: '[your header title on top of your table grid]'
});

grid.render('gridView'); // render the var "grid" at the specified html element id

And now the demo would be like this.

Tagged as ext-js, grid, Grid.Panel, javascript + Categorized as Ext-js