0

我有一个 ProfileView 应该显示一些用户数据。这是我第一次尝试从 MySql 获取数据并将其显示在 Sencha 视图上。

风景

Ext.define('MyApp.view.Profile', {
extend : 'Ext.Panel',
xtype : 'profileview',

requires : ['Ext.List', 'Ext.data.Store'],

config : {
    layout: 'fit',
    title : 'Profiel',
    iconCls : 'user3',
    cls : 'home',
    scrollable : true,
    styleHtmlContent : true,
    html : ['<h1>Mijn Profiel</h1>'].join(""),
    items : [Ext.create('Ext.List', {
        title : 'Profile',
        docked : 'top',
        store : myStore,
        show : function(list, opts) {
            alert('list === ' + list);
            console.log('List Shown: ' + list);
        }
    })]
}

});

var myStore = Ext.create("Ext.data.Store", {
model : "MyApp.model.User",
proxy : {
    type : "ajax",
    url : "php/get_user.php",
    reader : {
        type : "json"
        // rootProperty : "users"
    }
},
autoLoad : true
});

数据正确返回，但没有显示任何内容，这是我试图弄清楚的。

响应

[{"ID":"19","USERNAME":"Annet","EMAIL":"annet@annet.nl"}]

我跳过了 rootProperty，因为它是单个用户。

该模型

Ext.define('MyApp.model.User', {
extend : 'Ext.data.Model',
config : {
    fields : [{
        name : 'ID',
        type : 'int'
    }, {
        name : 'USERNAME',
        type : 'string'
    }, {
        name : 'EMAIL',
        type : 'string'
    }]
}

});

那么，为什么列表没有显示任何内容？

更新

我检查以查看商店是否包含数据，并且确实如此

map: Object
ext-record-1: Class
_data: Object
EMAIL: "annet@annet.nl"
ID: 19
USERNAME: "Annet"
id: "ext-record-1"
__proto__: Object

为什么它没有被列表选中？我也尝试过 DataView。

4

1 回答 1

0

您需要使用itemTpl，我为您更改了代码。

Ext.define('MyApp.view.Profile', {
extend : 'Ext.Panel',
xtype : 'profileview',

requires : ['Ext.List', 'Ext.data.Store'],

config : {
    layout: 'fit',
    title : 'Profiel',
    iconCls : 'user3',
    cls : 'home',
    scrollable : true,
    styleHtmlContent : true,
    html : ['<h1>Mijn Profiel</h1>'].join(""),
    items : [Ext.create('Ext.List', {
        title : 'Profile',
        docked : 'top',
        itemTpl : '<div>{ID} <span> {USERNAME} </span> <span> {EMAIL} </span> </div>',
        store : myStore,
        show : function(list, opts) {
            alert('list === ' + list);
            console.log('List Shown: ' + list);
        }
    })]
}
});
于 2013-02-27T08:58:26.617 回答