Tables are frequently used in web development and are a very important component. Therefore, extjs is doing well in this aspect, as a key component, I would like to share with you and discuss it together.
Ext. Grid. gridpanel is a grid-based panel component that presents the main interactive interfaces of the grid.
Store: Data Record model (behavior unit) the model holding the data records (rows)
Column Model: How to display column makeup
View: Encapsulates the user interface
Selection Model: Select the Behavior Model Selection Behavior
Note:
The following example shows how to use the Ext. Grid. gridpanel class:
:
Grid. js
// Use Ext. onready (function () {// defines data var datas = [[1, "easyjweb", "easyjf", "http://www.easyjf.com"], [2, "jfox ", "huihoo", "www, huihoo.com"], [3, "jdon", "jdon", "www.jdon.com"], [4, "springsite", "springsite ", "www.springsite.com"]; // create an arraystore to specify the Data configuration item var arraystore = new Ext. data. the array elements defined in arraystore ({data: datas, // fields automatically correspond to the fields: ["ID", "name ", "title", "url"]}); var grid = new Ext. grid. gridpanel ({Title: "China Java open source products and teams", store: arraystore, // each column below corresponds to the column name columns: [{header: "ID ", dataindex: "ID", width: 100 },{ header: "name", dataindex: "name", width: 150 },{ header: "title", dataindex: "title", width: 150}, {header: "url", dataindex: "url", width: 300, // you can set the URL of the URL to connect to the specified URL, the V in the function is the content of the current column Renderer: function (v) {return v. link ("<font color = 'red'>" + V + "</font>") ;}}); New Ext. viewport ({layout: "fit", items: Grid });});
Grid.html
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd"> <HTML>Ext. Grid. editorgridpanel is a new class that is extended based on gridpanel. It is used to edit cells in specified columns. The editable columns depend on the editor configuration.
You can insert an iscelleditable implementation in columnmodel to control whether certain columns can be edited. The value that is being edited depends on the value of the dataindex specified by the column pointing to the store. (In this case, if you use {@ link Ext. Grid. columnmodel # setrenderer Renderer (re-display data)}) to convert the data, this item must be clear.
When rendering a column, the ing relationship is "value is internal, plaintext is external", for example, {Ext. form. in the case of field # ComboBox}, the relationship between value and description will adopt the appropriate editor.
If the grid displays data in a more complex situation and is not necessarily symmetric with the store, you can use the beforeeditafteredit event to convert the data to achieve consistent data.
The following is an example:
Editgrid. js
// Use Ext. onready (function () {// define data var datas = [[1, "easyjweb", "easyjf", new date (), "http://www.easyjf.com"], [2, "jfox", "huihoo", new date (), "www, huihoo.com"], [3, "jdon", "jdon", new date (), "www.jdon.com"], [4, "springsite", "springsite", new date (), "www.springsite.com"]; // create an arraystore to specify to VaR arraystore = new Ext. data. arraystore ({// specify the data obtained from the preceding array: Data: datas, // The array elements defined in fields automatically correspond to the fields element of the previously defined array data: ["ID", "name", "title", "vdate", "url"]}); // create an editorgridpanelvar editgrid = new Ext. grid. editorgridpanel ({Title: "China Java open source products and teams", store: arraystore, // each column below corresponds to the column name columns: [{header: "ID ", dataindex: "ID", width: 100, Editor: New Ext. form. textfield ()}, {header: "name", dataindex: "name", width: 150}, {header: "title", dataindex: "title", width: 150 },{ header: "date", dataindex: "vdate", width: 100, Editor: New Ext. form. datefield (), // Renderer attribute. when processing a function, the function passes the text value of the current column for processing. Renderer: function (v) {return v. format ("Y-m-d") ;},{ header: "url", dataindex: "url", width: 300}]}); New Ext. viewport ({layout: "fit", items: editgrid });});Editgrid.html
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd"> <HTML>
Note: When selecting data, gridpanel and editorgridpanel clearly show how the above two examples can obtain data from the table.
Figure:
Let's talk about the use of these two components. Thank you!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
