1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
| /*!
* Ext JS Library 3.2.1
* Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.onReady(function(){
// NOTE: This is an example showing simple state management. During development,
// it is generally best to disable state management as dynamically-generated ids
// can change across page loads, leading to unpredictable results. The developer
// should ensure that stable state ids are set for stateful components in real apps.
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
// create the data store
var store = new Ext.data.GroupingStore({
// load using HTTP
proxy: new Ext.data.HttpProxy({
url: 'http://localhost/Action_Plan_Site/Action_Plan_Site/taskExport.xml'
}),
// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader({
// records will have an "task" tag
record: 'task',
id: 'Task_Id',
totalRecords: '@total'
}, [
// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
{name: 'Task_Id', type: 'int'},
{name: 'Action_Id', type: 'int'},
{name: 'Cntry_Name'},
{name: 'Task_Owner_email'},
{name: 'Task_Desc'},
{name: 'SEM_Id'},
{name: 'Task_Comment1'},
{name: 'Task_Status_Cd'},
{name: 'Task_Update_dt'},
{name: 'Task_Target_dt'}
]),
sortInfo:{field: 'Task_Id', direction: "ASC"},
groupField: 'Action_Id'
});
// manually load local data
store.load();
// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'Task_Id',header: 'Task Id', width: 160, sortable: true, dataIndex: 'Task_Id'},
{header: 'Action Id', width: 75, sortable: true, dataIndex: 'Action_Id'},
{header: 'Country Name', width: 75, sortable: true, dataIndex: 'Cntry_Name'},
{header: 'Owner Email', width: 75, sortable: true, dataIndex: 'Task_Owner_email'},
{header: 'Description', width: 75, sortable: false, dataIndex: 'Task_Desc'},
{header: 'SEM Id', width: 75, sortable: true, dataIndex: 'SEM_Id'},
{header: 'Comment', width: 75, sortable: false, dataIndex: 'Task_Comment1'},
{header: 'Status', width: 75, sortable: true, dataIndex: 'Task_Status_Cd'},
{header: 'Last Update', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'Task_Update_dt'},
{header: 'Target Date', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'Task_Target_dt'}
],
view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}),
stripeRows: true,
autoExpandColumn: 'Description',
height: 200,
width: 1000,
collapsible: true,
animCollapse: false,
iconCls: 'icon-grid',
fbar : ['->', {
text:'Clear Grouping',
iconCls: 'icon-clear-group',
handler : function(){
store.clearGrouping();
}
}],
title: 'Tasks array',
// config options for stateful behavior
stateful: true,
stateId: 'grid'
});
// render the grid to the specified div in the page
grid.render('grid-example');
}); |
