PDA

View Full Version : Ext.Grid databinding not displaying when large field content ?



BluePhoenixNC
18 Jul 2009, 7:04 PM
Hi all,
I am in desperate need of some help, I used the basic databinding example and modified a bit.
I use a JSON store and one field is actually quite large, but when I have a little content in there it all works, as soon as I put large content into the field the entire table shows up empty
I am sorry if it sounds confusing, but I do not know how else to explain the problem I am pasting the code:
Databinding grid:

<script type='text/javascript' language='javascript'>
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* [email protected]
* http://www.extjs.com/license
*/
Ext.onReady(function(){

// create the Data Store
var store = new Ext.data.JsonStore({
root: 'results',
totalProperty: 'total',
idProperty: 'id',
remoteSort: true,
proxy: new Ext.data.HttpProxy({url: 'include/get-news.php'}),
fields: [
{name: 'id', mapping: 'id'},
{name: 'datum', mapping: 'date', type: 'date', dateFormat: 'Y-m-d'},
{name: 'headline', mapping: 'headline'},
{name: 'subheadline', mapping: 'subheadline'},
{name: 'content', mapping: 'content'},
{name: 'featured', mapping: 'featured'},
{name: 'created', mapping: 'created', type: 'date', dateFormat: 'Y-m-d h:i:s'},
{name: 'modified', mapping: 'modified', type: 'date', dateFormat: 'Y-m-d h:i:s'},
{name: 'active', mapping: 'active'}
]

});
store.setDefaultSort('date', 'desc');

function renderBoolean(value) {
return String.format("{0}",(value==1)?'Yes':'No');
};

// create the grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: "ID", dataIndex: 'id', sortable: true},
{header: "Date", dataIndex: 'datum', renderer: Ext.util.Format.dateRenderer('l M dS, Y'), sortable: true},
{header: "Headline", dataIndex: 'headline', sortable: true},
{header: "Featured", dataIndex: 'featured', renderer:renderBoolean, sortable: true},
{header: "Active", dataIndex: 'active', renderer:renderBoolean, sortable: true},
{header: "Posted", dataIndex: 'created', renderer: Ext.util.Format.dateRenderer('l M dS, Y H:i:s'), sortable: true},
{header: "Modified", dataIndex: 'modified', renderer: Ext.util.Format.dateRenderer('l M dS, Y H:i:s'), sortable: true}
],
sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
viewConfig: {
forceFit: true
},
height:210,
split: true,
region: 'north',
//trackMouseOver:false,
bbar: new Ext.PagingToolbar({
pageSize: 5,
store: store,
displayInfo: true,
displayMsg: 'Displaying News {0} - {1} of {2}',
emptyMsg: "No News to display"
})

});

// define a template to use for the detail view
var bookTplMarkup = [
'<div id="News-Detail">',
'<div id="News-Head">',
'<h1>{headline}</h1>',
'<div><b>Created: </b>{created}<br /><b>Last Modified: </b>{modified}</div>',
'<br clear="all" />',
'</div>',
'<h2>{subheadline}</h2>',
'{content}',
'</div>'
];
var bookTpl = new Ext.Template(bookTplMarkup);

var ct = new Ext.Panel({
renderTo: 'binding-example',
frame: true,
title: 'News and Events',
width: '99%',
height: 400,
layout: 'border',
items: [
grid,
{
id: 'detailPanel',
region: 'center',
autoScroll: true,
bodyStyle: {
background: '#ffffff',
padding: '7px'
},
html: 'Please select an article to see additional details.'
}
]
})
grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {

var detailPanel = Ext.getCmp('detailPanel');
bookTpl.overwrite(detailPanel.body, r.data);
});
store.load({params:{start:0, limit:5}});
});
</script>

<div id="binding-example"></div>

Returned JSON that works:

({"total":"2","results":[{"id":"2","date":"1999-05-06","headline":"test","subheadline":"test2","content":"123","featured":"0","created":"2009-05-05 00:00:00","modified":"2009-07-18 11:54:53","active":"0"},{"id":"1","date":"1999-05-05","headline":"test","subheadline":"test","content":"test","featured":"0","created":"2009-05-05 00:00:00","modified":"2009-07-18 11:53:59","active":"0"}]})

Returned JSON that fails:

({"total":"2","results":[{"id":"2","date":"1999-05-06","headline":"test","subheadline":"test2","content":"Fusce vitae dapibus eros. Maecenas dolor lorem; suscipit at lobortis vel, ornare et libero. Etiam orci tellus, molestie eu commodo at, aliquet sed leo? Duis interdum facilisis feugiat. In nulla elit, tempor eu viverra sed, luctus ut justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam volutpat nisl adipiscing justo fermentum blandit. Sed mattis elementum arcu. Nunc ornare vehicula dolor id sagittis. Praesent luctus ligula aliquam nunc lobortis aliquet. Nulla elit lorem, vulputate sed aliquet ut, molestie quis tellus. In neque orci, rutrum sit amet elementum eu, pretium eu ante.
","featured":"0","created":"2009-05-05 00:00:00","modified":"2009-07-18 11:54:53","active":"0"},{"id":"1","date":"1999-05-05","headline":"test","subheadline":"test","content":"test","featured":"0","created":"2009-05-05 00:00:00","modified":"2009-07-18 11:53:59","active":"0"}]})

I know I have somewhere messed up, but I can't find the error.

Any help is greatly appreciated.

Thanks

20 Jul 2009, 2:07 AM
what browser?

steffenk
20 Jul 2009, 2:28 AM
when in doubt i use jsonlint to verify the json data
http://www.jsonlint.com/

however it shows an error in your json:
syntax error, unexpected TINVALID, expecting '{' or '[' at line 1
Parsing failed

Another possibility is the FF-plugin JSONView
https://addons.mozilla.org/de/firefox/addon/10869

20 Jul 2009, 2:30 AM
steffen, it could be a vBulletin pasteing error. (new line) remove the new line and you'll see it's valid JSON, other than the stuff being wrapped in parenthesis.

steffenk
20 Jul 2009, 2:36 AM
ok, just wanted to show a way to verify - it can save much time.

For this example i don't see a reason as the data isn't such big, i already deal with really big data without problems.

20 Jul 2009, 2:38 AM
Ah - i understand :). I asked (earlier) what browser, because sometimes IE does not show certain items if they are not sized properly with the framework.

steffenk
20 Jul 2009, 2:39 AM
the good old IE does ever fail? :D

BluePhoenixNC
20 Jul 2009, 4:32 AM
OH ... no.... I do not use Internet Exploder.
It failed in both browsers I tested with: FF3 and Safari.
I too, thought the data isn't that big (main issue was the 'content' field).
So for now I found a workaround, I just make 2 ajax calls, one to get the grid and then another one on rowselect. that seems to be working.
However one ajax call should be enough that's what the 'binding' is supposed to do, or not?

Thanks for all the replies.

steffenk
20 Jul 2009, 6:21 AM
However one ajax call should be enough that's what the 'binding' is supposed to do, or not?

Thanks for all the replies.

sure, it should work with one call. Large data shouldn't be a problem at all.

Try to debug where it fails. Is the data in store? Any JS errors?

BluePhoenixNC
20 Jul 2009, 8:07 AM
That is the weird thing, I use Firebug, and I am not getting any JS errors. The returned JSON string is identical to the one working, the only difference here is the larger 'content' field within one row.
So I am at wits end here. I am pretty sure I am overlooking something, but can't figure out what it is.

mjlecomte
20 Jul 2009, 8:15 AM
Have you included load and exception listeners on your store to see which one is firing?

BluePhoenixNC
20 Jul 2009, 8:30 AM
mjlecomte:
Now you are talking wa-hay above my head. I am just starting with Ext, and as basis I took the databinding example and modified it to my needs (s. source posted in thread start).
So I am not certain that I understand what you mean, sorry..for keeping the thread going. But I would really like to see why I am failing there.

steffenk
20 Jul 2009, 8:48 AM
what he mean is putting these lines to your store:


listeners: {
load: function(store, records, options){
//do stuff
},
loadexception: function(store, records, options){
// do stuff
}
}

mjlecomte
21 Jul 2009, 4:53 AM
mjlecomte:
Now you are talking wa-hay above my head. I am just starting with Ext, and as basis I took the databinding example and modified it to my needs (s. source posted in thread start).
So I am not certain that I understand what you mean, sorry..for keeping the thread going. But I would really like to see why I am failing there.

As the example shows just above, these are listeners for the store that fire when something happens. Instead of "loadexception" event that was used prior to Ext 3.x, it is now recommended to use "exception" event.

There is a link to FAQs my signature. There is one for Grids, and in that a section on troubleshooting, which discusses these events. By using these events you can narrow in where the source of your problem is. So add the events as described and post back which one fired, (you can just put in a console.log in the handling function to echo something).

mjlecomte
21 Jul 2009, 4:55 AM
// create the Data Store
var store = new Ext.data.JsonStore({
root: 'results',
totalProperty: 'total',
idProperty: 'id',
remoteSort: true,
proxy: new Ext.data.HttpProxy({url: 'include/get-news.php'}),
fields: [
{name: 'id', mapping: 'id'},
{name: 'datum', mapping: 'date', type: 'date', dateFormat: 'Y-m-d'},
{name: 'headline', mapping: 'headline'},
{name: 'subheadline', mapping: 'subheadline'},
{name: 'content', mapping: 'content'},
{name: 'featured', mapping: 'featured'},
{name: 'created', mapping: 'created', type: 'date', dateFormat: 'Y-m-d h:i:s'},
{name: 'modified', mapping: 'modified', type: 'date', dateFormat: 'Y-m-d h:i:s'},
{name: 'active', mapping: 'active'}
],
listeners: {
load: function(){
console.info('load event fired');
},
exception: function(){
console.info('exception event fired');
}
}
});