如何使用 JsonStore 和 XTemplate 使 Ext.Panel 显示 DataView？答案

【问题标题】：How do I make an Ext.Panel show a DataView using a JsonStore and XTemplate?如何使用 JsonStore 和 XTemplate 使 Ext.Panel 显示 DataView？
【发布时间】：2012-05-13 04:57:50
【问题描述】：

这看起来应该很简单。这是我的数据存储声明：

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

url实际上是由ColdFusion生成的，它调用查询并将其转换为Json格式。我认为这里一切正常，因为 Json 对象返回为：

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

我现在有虚拟数据，所以只返回一行。

接下来，我声明一个带有 DataView 的 Ext.Panel：

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()
});

引用的模板是一个 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('.'));
    }
});

在渲染页面时，我可以看到面板，但它完全是空的，并且我在 Firebug 中没有收到任何错误。我做错了什么？

【问题讨论】：

我想通了！我没有使用带小数点的虚拟成本值，因此格式功能无法正常工作。不过，我没有收到任何错误。我更改它以检查是否 (s.indexOf('.') != -1) 并且现在一切正常。

标签： json extjs dataview jsonstore

【解决方案1】：

我想通了！我没有使用带小数点的虚拟成本值，因此格式功能无法正常工作。不过，我没有收到任何错误。我将其更改为检查if (s.indexOf('.') != -1)，现在一切都很好。

【讨论】：