Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit ea7ef04

Browse files
author
harrydeluxe
committed
Add Multiple grid sorting example.
1 parent da1dc5f commit ea7ef04

File tree

2 files changed

+159
-0
lines changed

2 files changed

+159
-0
lines changed

‎example/grid/multiplesort.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5+
<title>Multiple grid sorting example</title>
6+
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/extjs-4.1.1-gpl/resources/css/ext-all.css" />
7+
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/extjs-4.1.1-gpl/examples/shared/example.css" />
8+
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/extjs-4.1.1-gpl/examples/ux/css/CheckHeader.css" />
9+
<link rel="stylesheet" type="text/css" href="../../ux/grid/plugin/MultipleSort.css" />
10+
</head>
11+
<body>
12+
<h1>Multiple grid sorting example</h1>
13+
<p>The js is not minified so it is readable. See <a href="multiplesort.js">sortmenu.js</a>.</p>
14+
<div id="editor-grid"></div>
15+
<script type="text/javascript" src="http://extjs.cachefly.net/extjs-4.1.1-gpl/bootstrap.js"></script>
16+
<script type="text/javascript" src="multiplesort.js"></script>
17+
</body>
18+
</html>

‎example/grid/multiplesort.js‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
Ext.Loader.setConfig({
2+
enabled: true,
3+
paths: {
4+
'Ext.ux': 'http://extjs.cachefly.net/extjs-4.1.1-gpl/examples/ux',
5+
'Ext.ux.grid.plugin': '../../ux/grid/plugin'
6+
}
7+
});
8+
9+
Ext.require([
10+
'Ext.grid.*',
11+
'Ext.data.*',
12+
'Ext.util.*',
13+
'Ext.ux.CheckColumn',
14+
'Ext.ux.grid.plugin.MultipleSort'
15+
]);
16+
17+
Ext.onReady(function(){
18+
// Define our data model
19+
Ext.define('Employee', {
20+
extend: 'Ext.data.Model',
21+
fields: [
22+
'name',
23+
'email',
24+
{ name: 'start', type: 'date', dateFormat: 'n/j/Y' },
25+
{ name: 'salary', type: 'float' },
26+
{ name: 'active', type: 'bool' }
27+
]
28+
});
29+
30+
// Generate mock employee data
31+
var data = (function() {
32+
var lasts = ['Jones', 'Smith', 'Lee', 'Wilson', 'Black', 'Williams', 'Lewis', 'Johnson', 'Foot', 'Little', 'Vee', 'Train', 'Hot', 'Mutt'],
33+
firsts = ['Fred', 'Julie', 'Bill', 'Ted', 'Jack', 'John', 'Mark', 'Mike', 'Chris', 'Bob', 'Travis', 'Kelly', 'Sara'],
34+
lastLen = lasts.length,
35+
firstLen = firsts.length,
36+
usedNames = {},
37+
data = [],
38+
s = new Date(2007, 0, 1),
39+
now = new Date(),
40+
41+
getRandomInt = function(min, max) {
42+
return Math.floor(Math.random() * (max - min + 1)) + min;
43+
},
44+
45+
generateName = function() {
46+
var name = firsts[getRandomInt(0, firstLen - 1)] + ' ' + lasts[getRandomInt(0, lastLen - 1)];
47+
if (usedNames[name]) {
48+
return generateName();
49+
}
50+
usedNames[name] = true;
51+
return name;
52+
};
53+
54+
while (s.getTime() < now.getTime()) {
55+
var ecount = getRandomInt(0, 3);
56+
for (var i = 0; i < ecount; i++) {
57+
var name = generateName();
58+
data.push({
59+
start : Ext.Date.add(Ext.Date.clearTime(s, true), Ext.Date.DAY, getRandomInt(0, 27)),
60+
name : name,
61+
email: name.toLowerCase().replace(' ', '.') + '@sencha-test.com',
62+
active: getRandomInt(0, 1),
63+
salary: Math.floor(getRandomInt(35000, 85000) / 1000) * 1000
64+
});
65+
}
66+
s = Ext.Date.add(s, Ext.Date.MONTH, 1);
67+
}
68+
69+
return data;
70+
})();
71+
72+
// create the Data Store
73+
var store = Ext.create('Ext.data.Store', {
74+
// destroy the store if the grid is destroyed
75+
autoDestroy: true,
76+
model: 'Employee',
77+
proxy: {
78+
type: 'memory'
79+
},
80+
data: data,
81+
sorters: [{
82+
property: 'start',
83+
direction: 'ASC'
84+
}]
85+
});
86+
87+
var multiplesort = Ext.create('Ext.ux.grid.plugin.MultipleSort', {
88+
autoHide: true,
89+
items: [
90+
{
91+
xtype: 'tbtext',
92+
text: 'Sorting order:',
93+
reorderable: false
94+
},
95+
{
96+
text: 'Salary',
97+
sortData: {
98+
property: 'salary'
99+
}
100+
}
101+
]
102+
});
103+
104+
var grid = Ext.create('Ext.grid.Panel', {
105+
store: store,
106+
dockedItems: [multiplesort],
107+
plugins: [multiplesort],
108+
renderTo: 'editor-grid',
109+
width: 600,
110+
height: 400,
111+
title: 'Employee Salaries',
112+
frame: true,
113+
multiSelect: true,
114+
columns: [{
115+
header: 'Name',
116+
dataIndex: 'name',
117+
flex: 1
118+
}, {
119+
header: 'Email',
120+
dataIndex: 'email',
121+
width: 160
122+
}, {
123+
xtype: 'datecolumn',
124+
header: 'Start Date',
125+
dataIndex: 'start',
126+
width: 90
127+
}, {
128+
xtype: 'numbercolumn',
129+
header: 'Salary',
130+
dataIndex: 'salary',
131+
format: '$0,0',
132+
width: 90
133+
}, {
134+
xtype: 'checkcolumn',
135+
header: 'Active?',
136+
dataIndex: 'active',
137+
width: 60
138+
}]
139+
});
140+
141+
});

0 commit comments

Comments
 (0)