Ext. grid. Panel table Feature, ext. grid. panel

Ext. grid. Panel table Feature, ext. grid. panel

Ext. grid. feature. Feature is a special plug-in for Ext. grid. Panel. It provides a basic template method that can be extended. Subclasses include:

1. Ext. grid. feature. RowBody table row body

The row-body feature appends the tr tag to the table and spans all columns of the original table. It is useful when displaying descriptive special information in the table, the row body is hidden by default. To show that the row body must overwrite the getAdditionalData method, the Code is as follows:

// Ext. grid. feature. rowBody example Ext. onReady (function () {// create table data var datas = [["Zhang San", 2500, "Zhang San's resume ...... "], [" Li Si ", 1500," Li Si's resume ...... "], [" Wang Wu ", 3500," Wang Wu's resume ...... "], [" Qian Liu ", 4000," Qian Liu's resume ...... "]; // Create a grid table component // create a Grid table component Ext. create ('ext. grid. panel ', {title: 'ext. grid. feature. rowBody example ', renderTo: Ext. getBody (), width: 300, frame: true, store: {fields: ['name', 'salary ', 'initduce'], proxy: {type: 'memory ', data: datas, reader: 'array' // Ext. data. reader. array parser}, autoLoad: true}, features: [Ext. create ('ext. grid. feature. rowBody ', {getAdditionalData: function (data, idx, record, orig) {var headerCt = this. view. headerCt, colspan = headerCt. getColumnCount (); // obtain the number of columns in the Table. return {rowBody: record. get ('initduce '), // specify the row body content rowBodyCls: 'rowbodycolor', // specify the row body style rowBodyColspan: colspan // specify the number of columns across rows} ;}})], columns: [// configure the Ext table. create ('ext. grid. rowNumberer ', {text: 'line number', width: 35}), {header: "name", flex: 1, dataIndex: 'name'}, {header: "salary", flex: 1, dataIndex: 'salary '}]});})

The effect is as follows:

2. Ext. grid. feature. Summary table Summary

The table Summary feature displays a summary row at the bottom of the table, as shown below:

(1) Calculation of the summary value: the summary value needs to be calculated based on each column in the table. The calculation method is determined by the summaryType configuration item in column. The built-in Summary

Calculation types include

Count: count;

Sum: sum;

Min: minimum value;

Max: calculates the maximum value;

Average: calculates the average value.

(2) summary is worth rendering: The parameters passed into the summaryRenderer function are rendered by using the summaryRenderer function:

Total value of value {Object;

Data {Object}: contains all the total data worth rows;

Field {String}: field name for summation Calculation

The sample code is as follows:

// Ext. grid. feature. summary example Ext. onReady (function () {create table data var datas = [["Zhang San", 2500], ["Li Si", 1500], ["Wang Wu", 3200], ["", 7500]; create the grid table component Ext. create ("Ext. grid. panel ", {title:" Ext. grid. feature. summary example ", renderTo: Ext. getBody (), width: 300, frame: true, store: {fields: ["name", "salary", "introduce"], proxy: {type: "memory ", data: datas, reader: "array"}, autoLoad: true}, features: [{ftype: "summary"}], columns: [{header: "name ", flex: 1, dataIndex: "name", summaryType: "count", summaryRenderer: function (value) {return "Total employees: <font color = \ "red \"> "+ value +" </font> ";}},{ header:" salary ", flex: 1, dataIndex: "salary", summaryType: "average", summaryRenderer: function (value) {return "average salary: <font color = \ "red \"> "+ value +" </font> ";}},]}) ;});

The effect is as follows:

3. Ext. grid. feature. Grouping table Group

4. Ext. grid. feature. GroupingSummary Group Summary