Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > Introduction to the use of several styles of Extjs4 GridPanel_extjs

Introduction to the use of several styles of Extjs4 GridPanel_extjs

WBOY
Release： 2016-05-16 17:36:11
Original
1542 people have browsed it

Simple form

Sort, display a certain column, read local data

Copy code The code is as follows:

//Local data
var datas = [
['1', 'gao', 'man'], ['2', 'gao', 'man'], ['3', 'gao', 'man']
];
//Create panel
Ext.create('Ext.grid.Panel', {
title: 'easy grid',
width: 400,
height: 300,
renderTo: Ext.getBody(),
frame: true,
viewConfig: {
forceFit: true,
stripRows: true
},
store: {//Configuration data proxy

fields: ['id', 'name', 'gender'],
proxy: {
type: 'memory',
data: datas,
reader: 'array' //The data reader reads data

},
autoLoad: true
},
columns: [{ //Custom column information
header: 'id' ,
width: 30,
dataIndex: 'id', //Fields in bound fields
sortable: true
}, {
header: 'name',
width : 80,
dataIndex: 'name',
sortable: true
}, {
header: 'gender',
width: 80,
dataIndex: 'gender',
sortable: true
}

]

})

Table column:
row number, bool row conversion, date format formatted output (date, top day), number data type formatted output (change, volume), Action column (operation column)

Code;

Copy code The code is as follows:

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: 'Row 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', //To use this function for text displayed by mouseover, 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 picture below is the details of the callback function triggered by clicking the operation (edit, delete) button.

The following demonstrates the custom rendering function

Effect:

Copy code The code is as follows:

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: 'RowNumber', width: 40 }),
{
text: 'custom',
dataIndex: ' custom',
renderer: customFunction //Call custom function to render
}
],
height: 200,
width: 800,
renderTo: Ext.getBody()
});

Selection mode: Selection

Selection modes are divided into three categories:

1, row selection (default)

2. Cell selection

3. Checkbox selection (checkbox group)

Demo cell selection code:

Just add

Copy the code to the above code configuration section. The code is as follows:

tbar: [
{
text: 'Get the selected cell',
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 the selection mode to cell selection

row selection:

Effect:

Copy code The code is as follows:

tbar: [
{
text: 'Get the selected rows',
handler: function () {

var rows = grid.getSelectionModel().getSelection(); //getSelection(); Get the currently selected record array
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', //The selection mode is row selection
simpleSelect: true, //Simple Enable selection function
multiSelect: true, // Enable multi-line selection
enableKeyNav: true //Enable keyboard navigation



Check box selection:

Effect:

Copy code The code is as follows:

tbar: [
                                                                                                                                                                                                        
var rows = grid.getSelectionModel().getSelection(); //getSelection(); Get the currently selected record array
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 of grid
var number = s.indexof (row) 1; // Get line number 1 because the line number starts from 0

                             msg.push('Select the Date column of row 'number':' myDate.toLocaleString());

                                                                                                                                                                                                                     ;

                                                                                                                                                     simpleSelect: true, //Simple selection function is turned on

multiSelect: true, / / Enable multi-line selection

enableKeyNav: true //Enable keyboard navigation




Table feature: Feature


Table summary Ext.grid.feature.Summary



Summary value calculation is calculated based on each column of the table. The calculation method is determined by the specified summaryType. The default is
5 types in the picture above.
This example applies sum and average

Copy code

The code is as follows:


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',  //进行汇总的列名
                    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',  //进行汇总的列名
                    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) {
{0}', value);

                                                                                                                                                              


Table grouping: Ext.grid.feature.Grouping


Code:


Copy code The code is as follows: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: 'Group by this field',
showGroupsText: 'Display group',
groupHeaderTpl: 'Class: {name} ({rows.length})', //Template for group display
startCollapsed: true //Set whether the initial group is collapsed
} )
],
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 by this field" under different columns and the table will Change grouping rules immediately.



Group summary of table: Ext.grid.feature.GroupSummary

The code only needs to change the above Grouping to GroupingSummary

Form plugin: plugin

Cell Editing Ext.grid.plugin.CellEditing

Code:


Copy code The code is as follows: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: 'RowNumber', width: 40 }),
{
header: ' name',
width: 80,
dataIndex: 'name',
editor: {//Define field
xtype: 'textfield',
allowBlank: false,

}
}
,
{
header: 'birthday',
width: 100,
dataIndex: 'birth',
xtype: 'datecolumn',
editor: {//Definition fields
xtype: 'datefield',
format: 'Y-m-d',
allowBlank: false
}
}
,
{
header: 'salary',
width: 100,
dataIndex: 'salary', xtype: 'numbercolumn',
editor: {//Define fields
xtype: 'numberfield',
format: '$0,000',
allowBlank: false
}
}
]


})



Table row editor Ext.grid.plugin.RowEditing

The code only needs:Change CellEditing to RowEditing

To obtain the modified data, ajax requests the server and responds.

Copy the code The code is as follows:

grid.on('edit', onEdit, this); //Add edit event and get data
                                                                                                                                                                         ')); //get() parameter is the field name.
                                                                                                                                                                                                          . 🎜>


Copy code

The code is as follows:
listeners: { load: function(store) { var index = 0; store.each(function(record) { if(record.data.column_name == '1') { //replace column_name with your column name, '1' Replace with your value grid.selModel.selectRow(index,true);
}
index ;
})
}
}


Related labels：
style
source：php.cn
Previous article：A simple summary of jQuery usage tips_jquery Next article：Detailed introduction to the main configuration parameters of Extjs4 GridPanel_extjs
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
From 2024-04-29 11:01:01
0
2
2032
How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
From 2024-04-23 00:22:19
0
11
2196
The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
From 2024-04-19 15:37:47
0
1
1850
There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
From 2024-04-18 23:52:34
0
1
1742
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
1763
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template