ExtJS 4 Gridpanel several styles

Simple table

Sort, show a column, read local data

Local data
var datas = [
[' 1 ', ' Gao ', ' Man '], [' 2 ', ' Gao ', ' Man '], [' 3 ', ' Gao ', ' man ']
];
Create a panel
Ext.create (' Ext.grid.Panel ', {
Title: ' Easy Grid ',
width:400,
HEIGHT:300,
RenderTo:Ext.getBody (),
Frame:true,
Viewconfig: {
Forcefit:true,
Striprows:true
},
Store: {//Configure Data Agent

Fields: [' id ', ' name ', ' gender '],
Proxy: {
Type: ' Memory ',
Data:datas,
Reader: ' array '//data reader for data read

},
Autoload:true
},
Columns: [{//Custom column information
Header: ' ID ',
Width:30,
Dataindex: ' id ',//bind field in fields
Sortable:true
}, {
Header: ' Name ',
WIDTH:80,
Dataindex: ' Name ',
Sortable:true
}, {
Header: ' Gender ',
WIDTH:80,
Dataindex: ' Gender ',
Sortable:true
}

]

})

Table columns:

Line number, bool line is converted to whether, date formatted output (Date,top day), Number data type formatted output (change,volume), Action column (Action column)

Code

Ext.tip.QuickTipManager.init ();

Ext.create (' Ext.data.Store ', {
StoreId: ' Samplestore ',
Fields: [{
Name: ' Framework ',
Type: ' String '
}, {
Name: ' Rocks ',
Type: ' Boolean '
}, {
Name: ' Volume ',
Type: ' Number '
}, {
Name: ' Topday ',
Type: ' Date '
}, {
Name: ' Change ',
Type: ' Number '
}, {
Name: ' Date ',
Type: ' Date '
}, {
Name: ' Price ',
Type: ' Number '
}

],
Data: {
' Items ': [{
"Framework": "Ext JS 1",
"Rocks": true,
"Symbol": "Goog",
"Date": ' 2011/04/22 ',
"Change": 0.8997,
"Volume": 3053782,
"Topday": ' 04/11/2010 ',
"Price": 1000.23

}, {
"Framework": "Ext JS 2",
"Rocks": true,
"Symbol": "Goog",
"Date": ' 2011/04/22 ',
"Change": 0.8997,
"Volume": 3053782,
"Topday": ' 04/11/2010 ',
"Price": 1000.23

}, {
"Framework": "Ext JS 3",
"Rocks": true,
"Symbol": "Goog",
"Date": ' 2011/04/22 ',
"Change": 0.8997,
"Volume": 3053782,
"Topday": ' 04/11/2010 ',
"Price": 1000.23

}]
},
Proxy: {
Type: ' Memory ',
Reader: {
Type: ' JSON ',
Root: ' Items '
}
}
});

Ext.create (' Ext.grid.Panel ', {
Title: ' Boolean Column Demo ',
Store:Ext.data.StoreManager.lookup (' Samplestore '),
Columns: [
Ext.create (' Ext.grid.RowNumberer ', {text: ' line number ', width:40}),
{
Text: ' Framework ',
Dataindex: ' Framework ',
width:100
}, {
Xtype: ' Booleancolumn ',
Text: ' Rocks ',
Truetext: ' Yes ',
Falsetext: ' No ',
Dataindex: ' Rocks '
}, {
Text: ' Date ',
Dataindex: ' Date ',
Xtype: ' Datecolumn ',
Format: ' Y year m month D Day '
}, {
Text: ' Change ',
Dataindex: ' Change ',
Xtype: ' Numbercolumn ',
Format: ' 0.000 '
}, {
Text: ' Volume ',
Dataindex: ' Volume ',
Xtype: ' Numbercolumn ',
Format: ' 0,000 '
}, {
Text: ' Top day ',
Dataindex: ' Topday ',
Xtype: ' Datecolumn ',
Format: ' l '
}, {
Text: ' Current price ',
Dataindex: ' Price ',
Renderer:Ext.util.Format.usMoney
}, {
Header: ' Operation ',
Xtype: ' Actioncolumn ',//Action column
WIDTH:100,
Items: [{
Icon: ' E.gif ',//Edit image Address

ToolTip: ' edit ',//mouse over display text using this function, must be Ext.tip.QuickTipManager.init ();
Handler:function (grid, RowIndex, Colindex) {
var rec = Grid.getstore (). GetAt (RowIndex);
Alert ("Edit" + rec.get (' framework '));
}
}, {
Icon: ' D.gif ',
ToolTip: ' Delete ',
Handler:function (grid, RowIndex,
Colindex) {
var rec = Grid.getstore (). GetAt (RowIndex);
Alert ("Terminate" + rec.get (' framework '));
}
}]

}, {

}
],
HEIGHT:200,
width:800,
RenderTo:Ext.getBody ()
});

The following figure is the details of the callback function triggered by the click Action (Edit, delete) button.

The following shows a custom render function

Effect:

Ext.tip.QuickTipManager.init ();

function Customfunction (value, metadata) {
if (value > 10) {
Metadata.style = ' color:red ';

}
return value;

}

Ext.create (' Ext.data.Store ', {
StoreId: ' Samplestore ',
Fields: [{
Name: ' Custom ',
Type: ' Number '
}

],
Data: {
' Items ': [{

"Custom": 10

}, {

"Custom": 100

}, {

"Custom": 1000

}]
},
Proxy: {
Type: ' Memory ',
Reader: {
Type: ' JSON ',
Root: ' Items '
}
}
});

Ext.create (' Ext.grid.Panel ', {
Title: ' Boolean Column Demo ',
Store:Ext.data.StoreManager.lookup (' Samplestore '),
Columns: [
Ext.create (' Ext.grid.RowNumberer ', {text: ' line number ', width:40}),
{
Text: ' Custom ',
Dataindex: ' Custom ',
Renderer:customfunction//Call custom function to render
}
],
HEIGHT:200,
width:800,
RenderTo:Ext.getBody ()
});

Selection mode: Selection

The selection pattern is divided into three categories:

1, row selection (default)

2. Cell selection

3. check box selection (checkbox Group)

Demo Cell selection code:

Just in the Code configuration section above, add

Tbar: [
{
Text: ' Get selected cells ',
Handler:function () {

var cell = Grid.getselectionmodel (). GetCurrentPosition (); Getselectionmodel () Gets the current selection mode, GetCurrentPosition () Gets the currently selected cell
Alert (Ext.JSON.encode (cell));
}
}
],
SelType: ' Cellmodel '//Set selection mode for cell selection

Line Selection:

Effect:

Tbar: [
{
Text: ' Get the selected line ',
Handler:function () {

var rows = Grid.getselectionmodel (). GetSelection (); GetSelection (); Gets the currently selected array of records
var msg = [];
for (var i = 0; i < rows.length; i++) {

var row = Rows[i];
var mydate = new Date (row.get (' Date '));
Msg.push (' Date column of selected row: ' + mydate.tolocalestring ()); Convert time format

}
Alert (msg.join (' \ n '));

}
}
],
SelType: ' Rowmodel ',//Select mode for line selection
Simpleselect:true,//simple selection function open
Multiselect:true,//enable multi-line selection
Enablekeynav:true//Enable keyboard navigation

check box to select:

Effect:

Tbar: [
{
Text: ' Get the selected line ',
Handler:function () {

var rows = Grid.getselectionmodel (). GetSelection (); GetSelection (); Gets the currently selected array of records
var msg = [];
for (var i = 0; i < rows.length; i++) {

var row = Rows[i];
var mydate = new Date (row.get (' Date '));

var s = grid.getstore (); Get the data source for a grid
var number = S.indexof (row) + 1; Get line number +1 because the line number starts at 0

Msg.push (' Select the ' + number + ' row of the date column: ' + mydate.tolocalestring ());

}
Alert (msg.join (' \ n '));

}
}
],
SelType: ' Checkboxmodel ',//Select mode for line selection
Simpleselect:true,//simple selection function open
Multiselect:true,//enable multi-line selection
Enablekeynav:true//Enable keyboard navigation

Table Properties: Feature

Table Summary Ext.grid.feature.Summary

The total value calculation is calculated according to each column of the table, and the calculation method has the specified Summarytype decision. The default is

5 kinds.

This example applies sum and average

Ext.define (' TestResult ', {
Extend: ' Ext.data.Model ',
Fields: [' student ', {
Name: ' Mark ',
Type: ' int '
}]
});

var Grid = ext.create (' Ext.grid.Panel ', {
WIDTH:200,
height:140,
RenderTo:document.body,
Features: [{
Ftype: ' Summary '
}],
Store: {
Model: ' TestResult ',
Data: [{
Student: ' Student 1 ',
mark:84
}, {
Student: ' Student 2 ',
mark:72
}, {
Student: ' Student 3 ',
mark:96
}, {
Student: ' Student 4 ',
mark:68
}]
},
Columns: [{
Dataindex: ' Student ',
Text: ' Name ',
Summarytype: ' count ',//column name for summary
Summaryrenderer:function (value) {
Grid.getstore ()
Return Ext.String.format (' {0} student{1} ', value, value!== 1? ' s ': ');
}
}, {
Dataindex: ' Mark ',
Text: ' Mark ',
Summarytype: ' Average '
}]
})
var Grid = ext.create (' Ext.grid.Panel ', {
WIDTH:200,
height:140,
RenderTo:document.body,
Features: [{
Ftype: ' Summary '
}],
Store: {
Model: ' TestResult ',
Data: [{
Student: ' Student 1 ',
mark:84
}, {
Student: ' Student 2 ',
mark:72
}, {
Student: ' Student 3 ',
mark:96
}, {
Student: ' Student 4 ',
mark:68
}]
},
Columns: [{
Dataindex: ' Student ',
Text: ' Name ',
Summarytype: ' count ',//column name for summary
Summaryrenderer:function (value) {
Grid.getstore ()
Return Ext.String.format (' {0} student{1} ', value, value!== 1? ' s ': ');
}
}, {
Dataindex: ' Mark ',
Text: ' Mark ',
Summarytype: ' Average ',

,
Summaryrenderer:function (value) {
Grid.getstore ()
Return Ext.String.format (' average divided into: {0} ', value);

}]
})

table grouping: Ext.grid.feature.Grouping

Code:

Ext.define (' TestResult ', {
Extend: ' Ext.data.Model ',
Fields: [' Student ', ' class ', {
Name: ' Mark ',
Type: ' int '
}]
});

var Grid = ext.create (' Ext.grid.Panel ', {
width:400,
HEIGHT:300,
RenderTo:document.body,
Features: [
Ext.create (' Ext.grid.feature.Grouping ',
{

Groupbytext: ' Use this field to group ',
Showgroupstext: ' Show grouping ',
GROUPHEADERTPL: ' class: {name} ({rows.length}) ',//template for group display
Startcollapsed:true//Set initial grouping is not up
})
],
Store: {
Model: ' TestResult ',
GroupField: ' Class ',
Data: [{
Student: ' Student 1 ',
Class: ' 1 ',
mark:84
}, {
Student: ' Student 2 ',
Class: ' 1 ',
mark:72
}, {
Student: ' Student 3 ',
Class: ' 2 ',
mark:96
}, {
Student: ' Student 4 ',
Class: ' 2 ',
mark:68
}]
},
Columns: [{
Dataindex: ' Student ',
Text: ' Name ',
Summarytype: ' count ',//column name for summary
Summaryrenderer:function (value) {
Grid.getstore ()
Return Ext.String.format (' {0} student{1} ', value, value!== 1? ' s ': ');
}
}, {
Dataindex: ' Mark ',
Text: ' Mark ',
Summarytype: ' Average '
},
{dataindex: ' class ',
Text: ' Class '

}]
})

Click "Group with this field" under different columns and the table will change the grouping rules immediately.

grouped summaries of tables: Ext.grid.feature.GroupSummary

The code just needs to change the Grouping above into groupingsummary.

Form plugin: Plugin

cell Editing Ext.grid.plugin.CellEditing

Code:

var datas = [[' Gao ', Date (1922, 02, 03), 2000]];
Ext.create (' Ext.grid.Panel ', {

Title: ' Demo ',
Frame:true,
RenderTo:Ext.getBody (),
width:400,
HEIGHT:300,

Store: {
Fields: [' name ', ' birth ', ' salary '],
Data:datas,
Proxy: {
Type: ' Memory ',
Data:datas,
Reader: ' Array '
},
Autoload:true
},
Plugins: [
Ext.create (' Ext.grid.plugin.CellEditing ', {

Clickstoedit:1
})
],
SelType: ' Cellmodel ',
Columns: [Ext.create (' Ext.grid.RowNumberer ', {text: ' line number ', width:40}),
{
Header: ' Name ',
WIDTH:80,
Dataindex: ' Name ',
Editor: {//define Fields
Xtype: ' TextField ',
Allowblank:false,

}
}
,
{
Header: ' Birthday ',
WIDTH:100,
Dataindex: ' Birth ',
Xtype: ' Datecolumn ',
Editor: {//define Fields
Xtype: ' Datefield ',
Format: ' y-m-d ',
Allowblank:false
}
}
,
{
Header: ' Wages ',
WIDTH:100,
Dataindex: ' Salary ', xtype: ' Numbercolumn ',
Editor: {//define Fields
Xtype: ' Numberfield ',
Format: ' $0,000 ',
Allowblank:false
}
}
]

})

table Row Editor Ext.grid.plugin.RowEditing

Code only: Change cellediting to RowEditing

To get the modified data, AJAX requests the server to respond.

Grid.on (' edit ', onedit, this); Add edit events to get data
function OnEdit (e) {
Alert (e.record.get (' name ')); The get () parameter is the field name.
}

the checkbox column in Gridpanel Initializes whether or not it is selected based on the database value listeners: {
Load:function (store) {
var index = 0;
Store.each (function (record) {
if (record.data.column_name = = ' 1 ') {//column_name is replaced with your column name, ' 1 ' is replaced with your value
Grid.selModel.selectRow (index,true);
}
index++;
})
}
}