/* * Ext JS Library 1.0.1 * Copyright(c) 2006-2007, Ext JS, LLC. * licensing@extjs.com * * http://www.extjs.com/license */Ext.onReady(function(){ // create the Data Store var ds = new Ext.data.Store({ // load using script tags for cross domain, if the data in on the same domain as // this page, an HttpProxy would be better proxy: new Ext.data.HttpProxy({ url: 'JSON_Transactions.ASP' }), // create reader that reads the Topic records reader: new Ext.data.JsonReader({ root: 'rows', totalProperty: 'totalcount', id: 0 }, [ {name: 'quantity', mapping: 'quantity', type: 'int'} , {name: 'partnumber', mapping: 'partnumber'} ]), // turn on remote sorting remoteSort: true }); ds.setDefaultSort('quantity', 'asc'); // the column model has information about grid columns // dataIndex maps the column to the specific data field in // the data store var cm = new Ext.grid.ColumnModel([ { header: 'quantity', dataIndex: 'quantity' } , { header: 'partnumber', dataIndex: 'partnumber' } ]); // by default columns are sortable cm.defaultSortable = true; // create the editor grid var grid = new Ext.grid.Grid('grid-example', { ds: ds, cm: cm, selModel: new Ext.grid.RowSelectionModel({singleSelect:true}), enableColLock:false, loadMask: true }); // make the grid resizable, do before render for better performance var rz = new Ext.Resizable('grid-example', { wrap:true, minHeight:200, pinned:true, handles: 's' }); rz.on('resize', grid.autoSize, grid); // render it grid.render(); var gridFoot = grid.getView().getFooterPanel(true); // add a paging toolbar to the grid's footer var paging = new Ext.PagingToolbar(gridFoot, ds, { pageSize: 10, displayInfo: true, displayMsg: 'Displaying records {0} - {1} of {2}', emptyMsg: "No records to display" }); // trigger the data store load ds.load({params:{start:0, limit:10}});});