How do I make an Ext.Panel show a DataView using a JsonStore and XTemplate?

Question

This seems like it should be simple. Here is my data store declaration:

var dataStore = new Ext.data.JsonStore({
    autoLoad : true,
    url : '#mvclink(' json.getCostReportsJsonData ')#&layout_type=txt',
    root : 'data',
    id : 'dataStoreId',
    fields : ['project', 'cost']
});

The url is actually generated by ColdFusion, which calls the query and converts it to Json format. I think everything works correctly here, because the Json object comes back as:

{"recordcount":1,"columnlist":"project,cost","data":[{"project":"ABC","cost":2250}]}

I have dummy data in there for now, so just one row is returned.

Next, I declare an Ext.Panel with a DataView in it:

var myPanel = new Ext.Panel({
    layout : 'fit',
    id : 'myPanel',
    title : "My Panel",
    monitorResize : true,
    deferredRender : false,
    items : new Ext.DataView({
        store : dataStore,
        tpl : costReportTemplate
    }),
    renderTo : Ext.getBody()
});

The template referenced is an XTemplate:

var costReportTemplate = new Ext.XTemplate(
    '<tpl for=".">',
    '<p><b>{project}</b>: {cost:this.format}</p>',
    '</tpl>', {
    format : function (v) {
        var s = Ext.util.Format.usMoney(v);
        return s.substring(0, s.indexOf('.'));
    }
});

Upon rendering the page, I can see the panel, but it's completely empty, and I get no errors in Firebug. What am I doing wrong?

Answer 1

I figured it out! I hadn't used a dummy cost value with a decimal point, so the format function wasn't working properly. I wasn't getting any errors, though. I changed it to check if (s.indexOf('.') != -1) and everything is fine now.