Question

我有一个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。

Answer 1

您需要使用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);
        }
    })]
}
});

Sencha List显示没有数据

1 个答案: