PDA

View Full Version : onRowselect loadData in another JsonStore



jlg
20 Jul 2010, 7:01 AM
Hi,

Help needed in loading data in the Listview when a row is selected in Gridpanel.


I have two panel
TaskGrid
TaskHistoryPanel
When a user selects a row in the TaskGrid i want the history information to be shown in the TaskHistoryPanel. When i do that, my ajax method is called and the server successfully returns the JSON message. But when it is processed by the Ext.StoreMgr.get('taskHistoryStore').loadData(response.responseText) I get "Record is undefined". Can someone help me resolve this problem.





<script type="text/javascript">
Ext.ns('WpmApp');

WpmApp.TaskStore = function(config){
var config = config || {};
Ext.applyIf(config, {
reader: new Ext.data.JsonReader({
root: 'tasks.data',
successProperty: 'tasks.success',
id: 'id'
}, [
{name: 'processId', mapping: 'processId'},
{name: 'workflowId', mapping: 'workflowId'},
{name: 'activityId', mapping: 'activityId'},
{name: 'taskSeqNo', type: 'number', mapping: 'seqNo'},
{name: 'taskId', mapping: 'id'},
{name: 'taskName', mapping: 'name'},
{name: 'taskPerfomer', mapping: 'performer'},
{name: 'taskStatus', mapping: 'status'},
{name: 'taskAction', mapping: 'action'},
{name: 'taskCreationDate', type: 'date', dateFormat: 'd.m.Y H:i:s', mapping: 'creationDate'},
{name: 'taskDueDate', type: 'date', dateFormat: 'd.m.Y H:i:s', mapping: 'dueDate'},
{name: 'taskCompletedDate', type: 'date', dateFormat: 'd.m.Y H:i:s', mapping: 'completedDate'}
]),
proxy: new Ext.data.HttpProxy({
url: '/iperoom/wpmservice'
}),
sortInfo:{field: 'taskCreationDate', direction: "DESC"},
groupField:'taskSeqNo',
autoLoad: false,
autoDestroy: true
});
WpmApp.TaskStore.superclass.constructor.call(this, config);
};
Ext.extend(WpmApp.TaskStore, Ext.data.GroupingStore);

WpmApp.TaskHistoryStore = function(config){
var config = config || {};
Ext.applyIf(config, {
reader: new Ext.data.JsonReader({
root: 'taskhistorylist.data',
successProperty: 'taskhistorylist.success',
id: 'id',
fields: [
{name: 'id', mapping: 'id'},
{name: 'action', mapping: 'action'},
{name: 'actionTo', mapping: 'actionTo'},
{name: 'actionTime', type: 'date', dateFormat: 'd.m.Y H:i:s', mapping: 'actionTime'},
{name: 'actionPerformer', type: 'number', mapping: 'actionPerformer'}
]
}),
proxy: new Ext.data.HttpProxy({
url: '/iperoom/wpmservice'
}),
autoLoad: false,
autoDestroy: true
});
WpmApp.TaskHistoryStore.superclass.constructor.call(this, config);
};
Ext.extend(WpmApp.TaskHistoryStore, Ext.data.JsonStore);
Ext.reg('taskhistorystore', WpmApp.TaskHistoryStore);
WpmApp.TaskGrid = Ext.extend(Ext.grid.GridPanel, {
initComponent: function(){
Ext.apply(this, {
store: new WpmApp.TaskStore({
storeId: 'taskStore'
}),
cm: new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{id:'taskId', header: "Task Id", width: 0, hidden:true, sortable: false, dataIndex: 'taskId'},
{header: "Process Id", width: 0, hidden:true, sortable: false, dataIndex: 'processId'},
{header: "Workflow Id", width: 0, hidden:true, sortable: false, dataIndex: 'workflowId'},
{header: "Activity Id", width: 0, hidden:true, sortable: false, dataIndex: 'activityId'},
{header: "Step", width: 20, sortable: false, dataIndex: 'taskSeqNo', groupRenderer:function(v, x,r){return r.data.taskName}},
{header: "Task Name", width: 120, sortable: false, dataIndex: 'taskName'},
{header: "Performer", width: 120, sortable: true, dataIndex: 'taskPerfomer'},
{header: "Status", width: 60, sortable: true, dataIndex: 'taskStatus'},
{header: "Action", width: 60, sortable: true, dataIndex: 'taskAction'},
{header: "Creation Date", width: 80, sortable: true, renderer: Ext.util.Format.dateRenderer('d/m/Y H:i'), dataIndex: 'taskCreationDate'},
{header: "Due Date", width: 80, sortable: true, renderer: Ext.util.Format.dateRenderer('d/m/Y H:i'), dataIndex: 'taskDueDate'},
{header: "Completed Date", width: 80, sortable: true, renderer: Ext.util.Format.dateRenderer('d/m/Y H:i'), dataIndex: 'taskCompletedDate'}
]),
sm: new Ext.grid.RowSelectionModel(
{singleSelect: true}
),
view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Performers" : "Performer"]})'
}),
height : 360,
collapsible: true,
animCollapse: false,
title: 'Task Details',
iconCls: 'icon-grid',
frame: true

});
WpmApp.TaskGrid.superclass.initComponent.call(this);
}
});
Ext.reg('taskgrid', WpmApp.TaskGrid);
WpmApp.TaskHistoryPanel = Ext.extend(Ext.Panel, {
initComponent: function(){
Ext.apply(this, {
height: 360,
width: 400,
collapsible: true,
animCollapse: true,
collapsed:true,
title: 'Task History',
frame: true,
layout: 'fit',
items: new Ext.list.ListView({
multiSelect: false,
singleSelect: false,
emptyText: 'Please click on the task to view history',
reserveScrollOffset: true,
store: new WpmApp.TaskHistoryStore({
storeId: 'taskHistoryStore'
}),
columns: [
{id:'id', header: "Id", width: 0, hidden:true, dataIndex: 'id'},
{header: 'Action', dataIndex: 'action'},
{header: 'Action By', dataIndex: 'actionPerformer'},
{header: 'Date', renderer: Ext.util.Format.dateRenderer('d/m/Y H:i'), dataIndex: 'actionTime'},
{header: 'Action To', dataIndex: 'actionTo'}
],
})
});
WpmApp.TaskHistoryPanel.superclass.initComponent.call(this);
}
});
Ext.reg('taskhistorypanel', WpmApp.TaskHistoryPanel);

WpmApp.WpmDashboard = Ext.extend(Ext.Panel, {
initComponent: function(){
Ext.applyIf(this, {
layout: 'border',
height: 400,
margins:'0 0 5 5',
cmargins:'0 5 5 5',
items: [{
xtype: 'taskgrid',
itemId: 'taskGridPanel',
layout: 'fit',
border: false,
region: 'center'
},{
xtype: 'taskhistorypanel',
itemId: 'taskHistoryPanel',
layout: 'fit',
border: false,
region: 'east'
}]
})
WpmApp.WpmDashboard.superclass.initComponent.call(this);
},
initEvents: function(){
WpmApp.WpmDashboard.superclass.initEvents.call(this);
var taskGridSm = this.getComponent('taskGridPanel').getSelectionModel();
taskGridSm.on('rowselect', this.onTaskGridRowSelect, this);
},
onTaskGridRowSelect: function(sm, rowIdx, rec){
var loadMask = new Ext.LoadMask(Ext.getBody(), {
msg: "Loading task history. Please wait..."
});
loadMask.show();
/*
Ext.StoreMgr.get('taskHistoryStore').reload({
params: {
action: 'retrieveTaskHistory',
processId: rec.data.processId,
workflowId: rec.data.workflowId,
activityId: rec.data.activityId,
taskId: '0000000000000000'
}
});
loadMask.hide();
*/

Ext.Ajax.request({
url: '/iperoom/wpmservice',
params: {
action: 'retrieveTaskHistory',
processId: rec.data.processId,
workflowId: rec.data.workflowId,
activityId: rec.data.activityId,
taskId: '0000000000000000'
},
method: 'GET',
success: function(response) {
loadMask.hide();
var jsonData = Ext.util.JSON.decode(response.responseText);
Ext.StoreMgr.get('taskHistoryStore').loadData(response.responseText);

},
failure: function() {
loadMask.hide();
Ext.Msg.alert('Status', 'Unable to show task history at this time. Please try again later.');
}
})
}
});
Ext.reg('wpmdashboard', WpmApp.WpmDashboard);
Ext.onReady(function() {
var wpmDashboard = new WpmApp.WpmDashboard({
renderTo: 'wpm-dashboard'
});
Ext.StoreMgr.get('taskStore').load({
params: {
action: 'retrieveTasks',
processId: '<%=request.getParameter(WPMParam.PARAM_PROCESS_ID)%>',
workflowId:'<%=request.getParameter(WPMParam.PARAM_WORKFLOW_ID)%>',
activityId:'0000000000000000',
taskId:'0000000000000000',
}
});
});
</script>