Getting started with table control in ExtJs

The table function of extjs is very powerful, including sorting, caching, dragging, hiding a column, automatically displaying row numbers, column summary, cell editing, and other practical functions. the table is composed of Ext. grid. defined by GridPanel, inherited from Panel, and its xtype is grid. in Extjs, table Grid must contain column definition information and specify the table's data storage Store. the column information of a table is composed of Ext. grid. columnModel, while table data storage is defined by Ext. data. store definition. Data Storage is divided into JsonStore, simleStore, and GroupingStore based on different parsed data. we know that to use Extjs must introduce his library, so we want to introduce the following files: ext-all.css ext-base.js ext-all.js PS: the author uses extjs3.0 version, how to load the plug-in? Rest assured that extjs has its own Loading Method: Ext. onReady (function () {// coding ...} let's look at a simple example code: copy the code Ext. onReady (function () {var cm = new Ext. grid. columnModel ([{header: 'number', dataIndex: 'id'}, {header: 'name', dataIndex: 'name'}, {header: 'description', dataIndex: 'desc'}]); // data definition var data = [['1', 'name1', 'desc1'], ['2', 'name1 ', 'scn2 '], ['3', 'name1', 'scn3'], ['4', 'name1', 'scn4 '], ['5 ', 'name1', 'desc5']; // data source definition var ds = new Ext. data. store ({proxy: new Ext. data. memoryProxy (data), reader: new Ext. data. arrayReader ({}, [{name: 'id'}, {name: 'name'}, {name: 'desc'}])}); ds. load (); var grid = new Ext. grid. gridPanel ({renderTo: Ext. getBody (), ds: ds, cm: cm, width: 300, autoHeight: true });});