The tables in ExtJS are powerful, including the ability to sort, cache, drag, hide a column, automatically display line numbers, column totals, cell editing, and more.
The table is defined by the class Ext.grid.GridPanel, inherits from the panel, and its xtype is grid. In ExtJS, table grid must contain column definition information and specify the data storage store for the table. The column information of the table is defined by the class Ext.grid.ColumnModel, and the data memory of the table is defined by Ext.data.Store, and the data storage is divided into Jsonstore, Simplestroe and Groupingstore according to the analytic data.
Let's first look at the simplest form of code to use:
Copy Code code as follows:
Ext.onready (function () {
var data=[[1, ' easyjweb ', ' easyjf ', ' www.baidu.com '],
[2, ' Jfox ', ' Huihoo ', ' www.jb51.net '],
[3, ' Jdon ', ' Jdon ', ' s.jb51.net '],
[4, ' Springside ', ' springside ', ' tools.jb51.net ']];
var store=new Ext.data.SimpleStore ({data:data,fields:["id", "name", "organization", "homepage"]});
var Grid = new Ext.grid.GridPanel ({
Renderto: "Hello",
Title: "China Java Open source product and team",
height:150,
width:600,
Columns:[{header: "Project Name", Dataindex: "Name"},
{Header: "Development team", Dataindex: "Organization"},
{header: "url", Dataindex: "Homepage"}],
Store:store,
Autoexpandcolumn:2
});
});
To execute the above code, you can get a simple table, as shown in the following illustration:
In the code above, the first line "var data= ..." is used to define the data to be displayed in the table, which is a [[] two-dimensional array; the second line "var store= ..." is used to create a data store, which is gridpanel need to use configuration properties, The data storage store is responsible for converting all kinds of data (such as two-dimensional arrays, JSON object arrays, XML literals) into ExtJS data recordset records, and we will give a special introduction to the data storage store in the next chapter. Third line "var Grid = new Ext.grid.GridPanel (...)" Responsible for creating a table containing columns that are described by the columns configuration properties, columns is an array, each row of data elements describes a column of information in the table, and the table column information contains the column header display text (header), the column corresponding to the recordset field (Dataindex), and whether the column can be sorted (sorable), the rendering function (renderer) of the column, width (widths), formatted information (format), etc., in the above Liezi only use header and Dataindex.
Let's take a look at the table sorting and hidden column features, a simple change to the above code, the contents are as follows:
Copy Code code as follows:
Ext.onready (function () {
var data=[[1, ' easyjweb ', ' easyjf ', ' www.baidu.com '],
[2, ' Jfox ', ' Huihoo ', ' www.jb51.net '],
[3, ' Jdon ', ' Jdon ', ' s.jb51.net '],
[4, ' Springside ', ' springside ', ' tools.jb51.net ']];
var store=new Ext.data.SimpleStore ({data:data,fields:["id", "name", "organization", "homepage"]});
var colm=new Ext.grid.ColumnModel ([{header: "Project name", Dataindex: "Name", Sortable:true},
{Header: "Development team", Dataindex: "organization", Sortable:true},
{header: "url", Dataindex: "homepage"}]);
var Grid = new Ext.grid.GridPanel ({
Renderto: "Hello",
Title: "China Java Open source product and team",
HEIGHT:200,
width:600,
Cm:colm,
Store:store,
Autoexpandcolumn:2
});
});
Using the new Ext.grid.ColumnModel directly to create the Lie Xin definition information for the table, in the "Project name" and "Development team" column we added a property sortable true to indicate that the column can be sorted, execute the above code, and we can get a support press " Project name or development team table, as shown in Figure xxx.
(sorted by project name)
(The small button behind the sortable list header can eject the Action menu)
(You can specify which columns to hide)
In addition, each column of data rendering can also be defined by themselves, such as the table above, we want users to click on the site in the table directly open the open source team's Web site, that is, to add a hyperlink to the list of URLs. The following code implements this functionality:
Copy Code code as follows:
function Showurl (value)
{
Return "" +value+ "";
}
Ext.onready (function () {
var data=[[1, ' easyjweb ', ' easyjf ', ' www.baidu.com '],
[2, ' Jfox ', ' Huihoo ', ' www.jb51.net '],
[3, ' Jdon ', ' Jdon ', ' s.jb51.net '],
[4, ' Springside ', ' springside ', ' tools.jb51.net ']];
var store=new Ext.data.SimpleStore ({data:data,fields:["id", "name", "organization", "homepage"]});
var colm=new Ext.grid.ColumnModel ([{header: "Project name", Dataindex: "Name", Sortable:true},
{Header: "Development team", Dataindex: "organization", Sortable:true},
{header: "url", Dataindex: "homepage", Renderer:showurl}]);
var Grid = new Ext.grid.GridPanel ({
Renderto: "Hello",
Title: "China Java Open source product and team",
HEIGHT:200,
width:600,
Cm:colm,
Store:store,
Autoexpandcolumn:2
});
});
[HTML]
The above code does not differ much from the previous example, except that the "URL" column is defined with a renderer attribute, that is, {header: "url", Dataindex: "homepage", Renderer:showurl}. Showurl is a custom function that returns an HTML fragment containing a <a> tag based on the passed-in value parameter. Run the code above to display the results as shown in the following figure:
Custom column rendering functions enable you to display all the information you need in a cell, except for the HTML that the browser can handle.
Besides the level two array, can the table display data in other formats? The answer is yes, if our table data is defined in the following form:
[Code]
var data=[{id:1,
Name: ' Easyjweb ',
Organization: ' EASYJF ',
Homepage: ' Www.baidu.com '},
{Id:2,
Name: ' Jfox ',
Organization: ' Huihoo ',
Homepage: ' Www.jb51.net '},
{Id:3,
Name: ' Jdon ',
Organization: ' Jdon ',
Homepage: ' S.jb51.net '},
{Id:4,
Name: ' Springside ',
Organization: ' Springside ',
Homepage: ' Tools.jb51.net '}
];
That means the data becomes a one-dimensional array, and each element in the array is an object that contains attributes such as name, Organization, homepage, ID, and so on. To make the table display the above data, it is very simple, just change the store to use Ext.data.JsonStore, the code is as follows:
Copy Code code as follows:
var store=new Ext.data.JsonStore ({data:data,fields:["id", "name", "organization", "homepage"]});
var colm=new Ext.grid.ColumnModel ([{header: "Project name", Dataindex: "Name", Sortable:true},
{Header: "Development team", Dataindex: "organization", Sortable:true},
{header: "url", Dataindex: "homepage", Renderer:showurl}]);
var Grid = new Ext.grid.GridPanel ({
Renderto: "Hello",
Title: "China Java Open source product and team",
HEIGHT:200,
width:600,
Cm:colm,
Store:store,
Autoexpandcolumn:2
});
The above code gets the same result as the previous one. Of course, tables can also display XML-formatted data, assuming the above data is stored in Hello.xml files as follows:
Copy Code code as follows:
<?xml version= "1.0" encoding= "UTF-8"?><dataset> <row> <id>1</id> <name>easyjweb </name> <organization>EasyJF</organization>
To display this XML data in ExtJS form grid, we just need to adjust the contents of the store section to the following:
Copy Code code as follows:
var store=new Ext.data.Store ({
URL: "Hello.xml",
Reader:new Ext.data.XmlReader ({
Record: "Row"},
["id", "name", "organization", "homepage"])
});
The rest of the section does not have to change, the complete code is as follows:
Copy Code code as follows:
function Showurl (value)
{
Return "<a href= ' http://" +value+ "' target= ' _blank ' >" +value+ "</a>";
}
Ext.onready (function () {
var store=new Ext.data.Store ({
URL: "Hello.xml",
Reader:new Ext.data.XmlReader ({
Record: "Row"},
["id", "name", "organization", "homepage"])
});
var colm=new Ext.grid.ColumnModel ([{header: "Project name", Dataindex: "Name", Sortable:true},
{Header: "Development team", Dataindex: "organization", Sortable:true},
{header: "url", Dataindex: "homepage", Renderer:showurl}]);
var Grid = new Ext.grid.GridPanel ({
Renderto: "Hello",
Title: "China Java Open source product and team",
HEIGHT:200,
width:600,
Cm:colm,
Store:store,
Autoexpandcolumn:2
});
Store.load ();
});
The Store.laod () is used to load the data, and the form generated by the above code is exactly the same as the preceding one.
