PDA

View Full Version : How to display records in one grid from multiple ajax responses



trupti.patil
13 Jun 2012, 4:20 AM
Hello,

I want to show the records in one grid from multiple ajax responses.

i.e. I have two REST API's and I want to combine their data and to show in one grid.

Is it possible?

Thank you,
Trupti

jay@moduscreate.com
13 Jun 2012, 4:35 AM
you will need to merge the data into one data store.

trupti.patil
13 Jun 2012, 4:44 AM
can you please tell me how to combine data in one store from two different API's?

scottmartin
13 Jun 2012, 5:58 AM
You can simply load data from into first store:



// main app store
var mainStore = new Ext.data.Store({});

// loader store for new data; append records to main
var loadStore = new Ext.data.Store({
listeners: {
'load': function(store, records, successful) {
mainStore.loadData(records,true); // append records to main
}
});


Regards,
Scott

trupti.patil
13 Jun 2012, 9:46 PM
Thank you Scott...

As suggested by you, I have modified my code and this is how I am doing it. However, it is not working.


var mainStore = new Ext.data.Store({});

var Hoststore = Ext.create('Ext.data.Store', {
pageSize: 25,
model: 'EventThread',
remoteSort: false,
sortInfo: {
field: 'EventDate',
direction: 'ASC'
},
proxy: {
type: 'ajax',
url: WCF_url+'Platform/Host/Logs',
defaultHeaders: header,
reader: new Ext.data.XmlReader({
totalProperty: 'totalCount',
root:'ArrayOfLogEntry',
record: 'LogEntry',
id:'EventId',
fields: ['Source','Description','EventDate','Level']
})
},
listeners: {
'load': function(store, records, successful) {
mainStore.loadData(records,true); // append records to main
}
}
});

var Companionstore = Ext.create('Ext.data.Store', {
pageSize: 25,
model: 'EventThread',
remoteSort: false,
sortInfo: {
field: 'EventDate',
direction: 'ASC'
},
proxy: {
type: 'ajax',
url: WCF_url+'Platform/Companion/Logs',
defaultHeaders: header,
reader: new Ext.data.XmlReader({
totalProperty: 'totalCount',
root:'ArrayOfLogEntry',
record: 'LogEntry',
id:'EventId',
fields: ['Source','Description','EventDate','Level']
})
},
listeners: {
'load': function(store, records, successful) {
mainStore.loadData(records,true); // append records to main
}
}
});


var grid = Ext.create('Ext.grid.Panel', {
width: width-5,
height: 400,
title: '<font class="header-font">Event Log</font>',
store: mainStore,
features: [filters],
disableSelection: true,
loadMask: true,
viewConfig: {
id: 'gv',
trackOver: false,
stripeRows: false,
emptyText:'No records to display',
plugins: [{
ptype: 'preview',
bodyField: 'excerpt',
expanded: true,
pluginId: 'preview'
}]
},
columns:[{text: "EventSource",dataIndex: 'Source',width: 100,sortable: false,filter: {
type: 'list',
options: ['Measurement','Host','Campanion','UI']
}},
{text: "Description",dataIndex: 'Description',flex: 1,sortable: true},
{text: "EventType",dataIndex: 'Level',width: 70,align: 'right',filter: {
type: 'list',
options: ['Information','Warning','Error']
} },
{text: "DateTime",dataIndex: 'EventDate',width: 150,sortable: true,renderer: Ext.util.Format.dateRenderer('m/d/Y h:i:s A'),filter: {type: 'datetime'}}
],
bbar: Ext.create('Ext.PagingToolbar', {
store: mainStore,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
items:[
'-', {
text: 'Clear Filter Data',
handler: function () {
grid.filters.clearFilters();
}
}]
})
//renderTo: 'container_content'
});
//store.loadPage(1);
Hoststore.loadPage(1);
Companionstore.loadPage(1);
mainStore.loadPage(1);

Please help me and let me know where I am wrong.

Thank you,
Trupti

redraid
14 Jun 2012, 4:36 AM
You main store without model and dont load main store - remove this line "mainStore.loadPage(1);".
Also you can add records to main store in load callback -


function addToMainStore(records, operation, success) {
if (success) {
mainStore.loadData(records);
}
}

Hoststore.loadPage(1, {
callback: addToMainStore
});

Companionstore.loadPage(1, {
callback: addToMainStore
});

trupti.patil
20 Jun 2012, 9:52 PM
Thank you all for the quick replies.

I did it with your help.

Following is the code:
var grid = Ext.create('Ext.grid.Panel', {
width: width-5,
height: 400,
title: '<font class="header-font">Event Log</font>',
store: mainStore,
features: [filters],
disableSelection: false,
loadMask: true,
viewConfig: {
id: 'gv',
trackOver: false,
stripeRows: false,
emptyText:'No records to display',
plugins: [{
ptype: 'preview',
bodyField: 'excerpt',
expanded: true,
pluginId: 'preview'
}]
},
columns:[{text: "EventSource",dataIndex: 'Source',width: 100,sortable: true,filter: {
type: 'list',
options: ['Measurement','Application','Host','Companion','UI']
}},
{text: "Description",dataIndex: 'Description',flex: 1,sortable: true},
{text: "EventType",dataIndex: 'Level',width: 70,align: 'right',filter: {
type: 'list',
options: ['Information','Warning','Error']
} },
{text: "DateTime",dataIndex: 'EventDate',width: 150,sortable: true,renderer: Ext.util.Format.dateRenderer('m/d/Y h:i:s A')}
],
bbar: Ext.create('Ext.PagingToolbar', {
store: mainStore,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
items:[
'-', {
text: 'Clear Filter Data',
handler: function () {
grid.filters.clearFilters();
}
}]
})
});

store1.loadPage(1);
store2.loadPage(1);
store3.loadPage(1);

However, I have one problem in paging. For paging, if I give the value as mainStore to store(see above in green color), then it is not displaying total pages and current page number. But If I give any one of the store as value like store1 or store2 or store3 to paging store then it displays proper paging.

Please help me how can I do it?

Thank you,
Trupti