Ext.grid.Panel Table Properties Feature

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

1, Ext.grid.feature.RowBody table line body

The line body attribute adds a TR tag to the table, spans all the columns of the original table, is useful when displaying descriptive special information in the table, the line body is hidden by default, and if you need to show the line body must overwrite the Getadditionaldata method, the code is as follows:

Ext.grid.feature.RowBody Example Ext.onready (function () {///create tabular data var datas = [["Zhang San", 2500, "Zhang San Biography ..."],    ["John Doe", 1500, "John Doe's CV ..."], ["Harry", 3500, "Harry's CV ..."], ["Money Six", 4000, "Money Six's CV ..."];; "; Create grid table component//Create 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 ', ' introduce '] , 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 ();//Gets the number of columns in the table return {Rowbody:rec      Ord.get (' introduce '),//Specify Line body contents              Rowbodycls: ' Rowbodycolor ',//Specifies the row body style rowbodycolspan:colspan//Specifies the number of columns in the row body}; }}], columns: [//Config table column ext.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 attribute displays a summary row at the bottom of the table, as follows:

(1), Summary value calculation: Summary value needs to be calculated according to each column of the table, the calculation method is made by the Summarytype configuration item in column, the built-in summary

Calculation types include

Count: Counts;

sum: sum;

Min: To find the minimum value;

Max: Maximum value;

Average: Averaging

(2), Summary worth rendering: By using the Summaryrenderer function for rendering, the parameters passed into the Summaryrenderer function include:

Value{object} total value;

Data{object}: Contains all the aggregated data worth the row;

Field{string}: The name of the field for the sum calculation

The sample code is as follows:

Ext.grid.feature.Summary Example Ext.onready (function () {Create tabular data var datas = [["Zhang San", 2500], ["John Doe", 1500],    ["Harry", 3200], ["Money Six", 7500]];        Create 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"}, auto            Load:true}, features:[{ftype: "Summary"}], columns:[Configuration table column {header: "name", Flex:1,dataindex: "Name", Summarytype: "Count", summaryrenderer:function (value) {return "Total employees: &LT            ; 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 Grouping

4, Ext.grid.feature.GroupingSummary Group summary

Ext.grid.Panel Table Properties Feature