Ext.grid.Panel not showing more than 16 rows? If more than none load at all...

[BadISBrad]

I've been looking in the forums and API guides everywhere trying to figure this thing out. I'm sure there is a simple reason why it's not working but here is my question/problem.

For some reason my Ext.grid.Panel will not display than 16 records if the stores autoLoad: false, and manually calling the Ext.data.Store.load(); Please follow my code below, hopefully someone can spot something. I am fairly new at this framework so please be forgiving in your comments!

I need to know if this is a problem with my grid view?
Or is a config in the store?
Or a combination of the two?
Or am I just way off track here.

If this all looks familiar it is basically the "Sencha's Guide AM Simple MVC architecture" example. Just modified for my own purposes.

I have a viewport

Ext.define('AM.view.Viewport', {    
extend: 'Ext.container.Viewport',

    items: [
        {
            xtype:'button',
            text: 'Refresh',
            action: 'load'
        },
        {
            xtype: 'ABE_GetStudentsGrid'


        }


    ]


});

The viewport to hold my my grid panel and a button to load the data, this is just a simple app for me to test some custom boilerplate stuff we are trying with REMObjects. Anyways, I have an Ext.grid.Panel defined as xtype: 'ABE_GetStudentsGrid'

Ext.define('AM.view.ABE_GetStudentsGrid', {    extend: 'Ext.grid.Panel',
    alias: 'widget.ABE_GetStudentsGrid',
    store: 'ABE_GetStudentsGrid',
    title: 'Students',
    scroll: true,
    height: '400',




    columns: [
        {header: 'StudentID', dataIndex: 'StudentID', flex: 1},
        {header: 'First Name', dataIndex: 'FirstName', flex: 1},
        {header: 'Last Name', dataIndex: 'LastName', flex: 1}
    ]


});

Then my store and model
Ignore the //Commented stuff, I was trying to try different configs to see if it would have any affect.

Ext.define('AM.store.ABE_GetStudentsGrid',{    extend: 'Ext.data.Store',
    model: 'AM.model.ABE_GetStudentsGrid',
    //buffered: true,


    //autoSync: true,


    proxy: {
        type: 'ajax',
        url: 'data/api.asp',
        reader:{
            type: 'json',
            root:'records',
            successProperty: 'success'
        }
        ,
        extraParams:{
                'Procedure': 'inters.ABE_GetStudentsGrid',
                'ROSessionGUID': 'pbrack',
                'TokenSearch': ''
        }


    }


});

and my model

Ext.define('AM.model.ABE_GetStudentsGrid',{    extend: 'Ext.data.Model',


    fields: ['StudentID', 'FirstName', 'LastName']


});

and finally my controller

Ext.define('AM.controller.ABE_GetStudentsGrid', {    extend:'Ext.app.Controller',
    stores: ['ABE_GetStudentsGrid'],
    models: ['ABE_GetStudentsGrid'],
    views:['ABE_GetStudentsGrid'],






    init: function() {
        this.control({
            'viewport > button[action=load]': {
                click: this.loadGrid
            }


        });
    },


    loadGrid: function(){


            console.log("Click is firing for grid load");
        this.getABE_GetStudentsGridStore().load();
        this.getABE_GetStudentsGridView()


    }


});

Now if I limit the asp page return only 16 records or less it displays perfectly. See screenshot of successful load.

Success.jpg

But if I let it ride through any more than that, like for instance in this shot I let it go to 20 records. It fails to load or paint the records on the grid! See screenshot

Failure.jpg

[BadISBrad]

I just wanted to attach the Json file too that this app is using.

{success: true, records: [{StudentID:1411200, FirstName: 'Elizabeth', LastName: 'Abrams'}, 
{StudentID:973008, FirstName: 'David', LastName: 'Adams'}, 
{StudentID:1376818, FirstName: 'Robert', LastName: 'Austin'}, 
{StudentID:974221, FirstName: 'Nicholas', LastName: 'Bailey'}, 
{StudentID:1377603, FirstName: 'Ryan', LastName: 'Bailey'}, 
{StudentID:1312321, FirstName: 'Raven', LastName: 'Banks'}, 
{StudentID:972935, FirstName: 'Casey', LastName: 'Barrow'}, 
{StudentID:1422072, FirstName: 'Timothy', LastName: 'Blair'}, 
{StudentID:1399854, FirstName: 'Albonne', LastName: 'Blakley'}, 
{StudentID:1376784, FirstName: 'Charles', LastName: 'Boswell'}, 
{StudentID:973820, FirstName: 'Shane', LastName: 'Bowne'}, 
{StudentID:1312452, FirstName: 'Coty', LastName: 'Bradshaw'}, 
{StudentID:1265755, FirstName: 'Leiza', LastName: 'Brainard'}, 
{StudentID:1316416, FirstName: 'Shane', LastName: 'Cail'}, 
{StudentID:1302784, FirstName: 'Mellisa', LastName: 'Cantrell'}, 
{StudentID:1302882, FirstName: 'Patricia', LastName: 'Cantu''}, 
{StudentID:1347179, FirstName: 'Jontae', LastName: 'Carter'}, 
{StudentID:1376799, FirstName: 'Houston', LastName: 'Chandler'}, 
{StudentID:1309806, FirstName: 'Marquis', LastName: 'Cofield'}]}

[skirtle]

You've got two single quotes at the end of this entry:

{StudentID:1302882, FirstName: 'Patricia', LastName: 'Cantu''},

[BadISBrad]

Oh lord, it didn't even occur to me that it might be a data issue. I'm used to working in more forgiving languages, I guess I need to write in some string cleaning function for users who can't tell a single quote apart from an apostrophe. Thank you very much for pointing that out. I haven't tested it yet but I'm sure will solve the issue because it is the 16th record. Exactly where it stopped working at.

Thanks again skirtle!