PDA

View Full Version : Paging Toolbar Issues pt 2



alejandroNNU
12 Feb 2014, 8:37 AM
Hello everyone,

I made a thread about this some days ago and some of you were kind enough to respond but unfortunately I still haven't been able to solve my issue (to scottmartin: my server response now includes a 'total records' element but still nothing) so I thought I'd lay out my code as comprehensively as possible in hopes of someone being able to tell me whats wrong.

My issue is that my pagingtoolbar is not working for my xml store, it works fine with a json store, but not with the xml one for some reason, the toolbar does not detect any records even though the grid populates just fine, here is my code:

I get an XML document from AJAX (response.responseXML) that looks like this:

<result>
<total_count>462</total_count>
<seconds_took>11.944</seconds_took>
<rows>
<row>data..</row>
<row>data...</row>
<row>data...</row>
</rows>
</result>

Which I load into the store:


procResult: function(response) {

var s = Ext.data.StoreManager.lookup('SyslogStore');
s.loadRawData(response.responseXML);

}

Store:


Ext.define('SyslogApp.store.SyslogStore', {
extend: 'Ext.data.Store',


requires: [
'SyslogApp.model.SyslogModel'
],


constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: false,
model: 'SyslogApp.model.SyslogModel',
storeId: 'MyXmlStore',
groupField: 'sysid',
pageSize: 20,
proxy: {
type: 'ajax',
reader: {
type: 'xml',
totalProperty: 'total_count',
record: 'row'
}
}
}, cfg)]);
}
});


Grid & Toolbar:


{
xtype: 'gridpanel',
flex: 1,
height: 318,
itemId: 'syslogGrid',
width: 1130,
title: 'Logs',
store: 'SyslogStore',
columns: [
{
xtype: 'gridcolumn',
width: 213,
dataIndex: 'syslog_timestamp',
text: 'Timestamp'
},
{
xtype: 'gridcolumn',
dataIndex: 'app_name',
text: 'App Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'username',
text: 'Username'
},
{
xtype: 'gridcolumn',
dataIndex: 'usermac',
text: 'User MAC'
},
{
xtype: 'gridcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
var str = value;
metaData.tdAttr = 'data-qtip="' + str + '"';
return str;
},
width: 615,
dataIndex: 'message',
text: 'Message',
tooltip: 'testing'
}
]
},
{
xtype: 'label',
height: 10,
hidden: true,
itemId: 'timerMethodValue',
width: 10,
text: ''
},
{
xtype: 'label',
hidden: true,
itemId: 'timeFrameValue',
text: ''
},
{
xtype: 'label',
hidden: true,
itemId: 'totalResults',
text: ''
}
],
dockedItems: [
{
xtype: 'pagingtoolbar',
dock: 'bottom',
flex: 1,
width: 360,
displayInfo: true,
store: 'SyslogStore'
}
]
});


What shows up:

47901

the grid populates just fine but the toolbar detects nothing, I tried it out with a dummy JSON store and it worked so I know the problem is with this XML store, if you could please take a moment to go through the code and let me know of ANY possible reason why the toolbar isn't detecting anything that would be amazing, I honestly don't know what else to try.

scottmartin
12 Feb 2014, 10:04 AM
Your XML does not seem to match your config, but see if this helps:

Of course it will always send 3 records in this test case since it is static, but you get the idea.



<?xml version="1.0" encoding="UTF-8"?>
<result>
<total_count>3</total_count>
<seconds_took>11.944</seconds_took>
<rows>
<row>
<field_one>Field one data here - record 1</field_one>
<field_two>Field two data here - record 1</field_two>
<field_tre>Field tre data here - record 1</field_tre>
</row>
<row>
<field_one>Field one data here - record 2</field_one>
<field_two>Field two data here - record 2</field_two>
<field_tre>Field tre data here - record 2</field_tre>
</row>
<row>
<field_one>Field one data here - record 3</field_one>
<field_two>Field two data here - record 3</field_two>
<field_tre>Field tre data here - record 3</field_tre>
</row>
</rows>
</result>




Ext.define('MyModel', {
extend : 'Ext.data.Model',

fields : [
{
name : 'field_one',
type : 'string'
},
{
name : 'field_two',
type : 'string'
},
{
name : 'field_tre',
type : 'string'
}
]
});

Ext.onReady(function () {

var store = new Ext.data.Store({
model : 'MyModel',
pageSize : 2,
proxy : {
type : 'ajax',
url : 'data.xml',
reader : {
type : 'xml',
totalProperty : 'total_count',
record : 'row'
}
}
});

store.load();

Ext.create('Ext.grid.Panel', {
title : 'Grid',
store : store,
columns : [
{ text : 'Field 1', dataIndex : 'field_one', flex : 1 },
{ text : 'Field 2', dataIndex : 'field_two', flex : 1 },
{ text : 'Field 3', dataIndex : 'field_tre', flex : 1 }
],
height : 200,
width : 600,

renderTo : Ext.getBody(),

dockedItems : [
{
xtype : 'pagingtoolbar',
dock : 'bottom',
displayInfo : true,
store : store
}
]
});

});

alejandroNNU
12 Feb 2014, 12:06 PM
Scott, could you specify how my xml does not match my config? what part exactly? what the xml actually looks like is:

47905

I just put <row>data...</row> in the first post to save time, is that what you were referring to?

Model:


Ext.define('SyslogApp.model.SyslogModel', {
extend: 'Ext.data.Model',


fields: [
{
name: 'sysid'
},
{
name: 'syslog_timestamp'
},
{
name: 'message'
},
{
name: 'host'
},
{
name: 'app_name'
},
{
name: 'tags'
},
{
name: 'username'
},
{
name: 'usermac'
}
]
});


So this looks pretty much like your example right? Or did I miss any other changes? The only difference I see is that your store gets data directly from url: 'data.xml' and then you just store.load(); while I have to get my xml document elsewhere first and then I have to store.loadRawData(xmlDocument); would that change anything?

scottmartin
12 Feb 2014, 12:16 PM
I was talking about the pseudo you posted above:



<result>
<total_count>462</total_count>
<seconds_took>11.944</seconds_took>
<rows>
<row>data..</row>
<row>data...</row>
<row>data...</row>
</rows>
</result>


Your image presents a better picture of what you data is.

When trying to debug someone's code, it is helpful to get the real info instead of us having to piece things together from snippets and partial information. That is what I meant ;)

alejandroNNU
12 Feb 2014, 12:18 PM
Yeah that was dumb, sorry about that haha, do you have any thoughts on what might be happening?

alejandroNNU
12 Feb 2014, 12:37 PM
Ok so guess what, i just tried creating an XML store that reads from a data.xml file and then call store.load() just like your example and it works perfectly fine, so it definitely has something to do with the fact that I have to store.loadRawData(xmlDocument) in the other store, that's the only thing that can be causing the issue, what the heck? could this be a bug?

scottmartin
12 Feb 2014, 12:58 PM
Have a look at the code, load the API and have a look at store.loadData(), store.loadRawData() and store.load()
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.Store-method-load (click on view source on the far right)

You will notice the store.load() calls: loadToPrefetch()
http://docs.sencha.com/extjs/4.2.2/source/Store.html#Ext-data-Store-method-load
http://docs.sencha.com/extjs/4.2.2/source/Store.html#Ext-data-Store-method-loadToPrefetch

You will see the info regarding the total and paging.

Scott.

alejandroNNU
12 Feb 2014, 1:18 PM
Ok, yes I see what you mean, I just don't really know where to go from here, does this mean it won't work with store.loadRawData() then? do I have to save the xml document somewhere so that I can use store.load()? or can I use loadRawData with loadToPrefetch somehow? I'm sorry this is just still pretty new to me :-/

scottmartin
12 Feb 2014, 1:24 PM
Where is your data coming from? Are you loading each page of data from a remove server? just use store.load() or set autoLoad: true in the store config.

scottmartin
12 Feb 2014, 1:33 PM
Here is a quick JSON example of paging with memory data, where all of data is loaded but paged.
https://fiddle.sencha.com/#fiddle/1gi

alejandroNNU
12 Feb 2014, 1:56 PM
The thing is I can't do store.load(), the way I get my data is I send a query through AJAX and then I get a "response" object from the server:

http://www.w3schools.com/ajax/ajax_xmlhttprequest_response.asp

so I take the response.responseXML (which is the 'page' of xml data I need) from the object, and the only way (I know of) to put that xml data into a store is by using store.loadRawData(response.responseXML). In order to use store.load I would have to give the proxy a url, point it to the location of the xml so it knows where to read from correct? But in my case I just have the response object I get from the server, I don't have anywhere to point it to, or am I doing this wrong?