Question

I’ve been trying to get a DataView (aka Ext.view.View) to work with a remote store for a while but I can’t get it to work.

So I went back to the drawing board and tried to build a simple one based on the Sencha doc’s dataview component (from this page).

When I run the code with the default sample non-remote store it works fine. As soon as I turn the store to an ajax data store it stops working.

Here’s the code I have:

Ext.define("Admin.TestDataView",{

    extend : 'Ext.DataView'

    ,initComponent: function()
    {

        Ext.regModel('Image', {
            Fields: [
                {name:'src', type:'string'},
                {name:'caption', type:'string'}
            ]
        });

        this.thestore = Ext.create('Ext.data.Store', {
            id:'imagesStore',
            model: 'Image',

            // data commented out and replaced with a proxy:
            /* 
            data: [
                {src:'http://www.sencha.com/img/20110215-feat-drawing.png', caption:'Drawing & Charts'},
                {src:'http://www.sencha.com/img/20110215-feat-data.png', caption:'Advanced Data'},
                {src:'http://www.sencha.com/img/20110215-feat-html5.png', caption:'Overhauled Theme'},
                {src:'http://www.sencha.com/img/20110215-feat-perf.png', caption:'Performance Tuned'}
            ],
            */      
            proxy: {
                type: 'ajax',
                url : '/test/somedata',
                reader: {
                    type: 'json',
                    root: 'results'
                }
            },
            autoLoad:true
        });



        var imageTpl = new Ext.XTemplate(
            '<tpl for=".">',
                '<div style="thumb-wrap">',
                  '<img src="{src}" />',
                  '<br/><span>{caption}</span>',
                '</div>',
            '</tpl>'
        );

        Ext.apply(this, {
            store: Ext.data.StoreManager.lookup('imagesStore'),
            tpl: imageTpl,
            itemSelector: 'div.thumb-wrap',
            emptyText: 'No images available',
            renderTo: Ext.getBody()
        });

        this.callParent(arguments);

    }
});

As you can see this essentially the sample code from the doc, with a remote store instead of the inline data.

The /test/somedata url is a simple codeiginiter controller method like this:

function somedata()
{
    $data =array(
        'success'=>true,
        'results'=> array(
                array('src'=>'http://www.sencha.com/img/20110215-feat-drawing.png', 'caption'=>'Drawing & Charts'),
                array('src'=>'http://www.sencha.com/img/20110215-feat-data.png', 'caption'=>'Advanced Data'),
                array('src'=>'http://www.sencha.com/img/20110215-feat-html5.png', 'caption'=>'Overhauled Theme'),
                array('src'=>'http://www.sencha.com/img/20110215-feat-perf.png', 'caption'=>'Performance Tuned')
        ));
    echo(json_encode($data));   

}

All seems fine. The Firebug console shows the correct request and the data is returned correctly (i’ve got plenty of other controller returning data for other things and they work fine)..

Except the view is empty.

Where it gets interesting is, if I add a prepareData method to the dataview subclass like so:

,prepareData: function(data)
{
    console.log("prepareData(%o)",data);    
    return data;
}

With the inline data, firebug shows this:

With the ajax store, firebugs shows this:

One interesting point is that the prepareData method is called 4 times, which indicates that in both cases, 4 records are loaded, but with the remote store the record data is empty..

Any idea? What am I doing wrong?

Answer 1

After digging up in the different objects created with firebug, something looked odd with the model.

Turns out there’s a typo in the Ext doc..

In the model, the doc has Fields […], that should be fields

    Ext.regModel('Image', {
        fields: [  // <-- here
            {name:'src', type:'string'},
            {name:'caption', type:'string'}
        ]
    });

I guess when using the inline data, the model isn’t used in the same fashion as with the remote store (The model is still needed with the inline data as taking it out will throw an error on the reader).