使用 Sencha 从 JSON 创建列表视图

Question

我刚刚开始使用Architect使用Sencha Touch，我正在尝试使用PHP到JSON从MySQL数据库填充列表。我让架构师进行脚本生成，但我似乎无法让它在运行时填充/显示数据。我确定我错过了一些东西，所以一些帮助将不胜感激。以下是支持的代码片段。

服务的 PHP：

<?php//MySQL Database Connect
include 'andaerologin.php';

mysql_select_db("andaero");
$sql = mysql_query("select * from regulatory_list");

$output = array();
/* used "key" as name */
$output['listTitle'] = 'Regulatory_Guidance_Library';
$output['targetKey'] = 'bodyContent';

while ($row = mysql_fetch_assoc($sql)) {
    $output['items'][] = $row;
}

header('Cache-Control: no-cache, must-revalidate');
header('Content-type: application/json');
echo(json_encode($output));

mysql_close();
?>

自动生成的应用.js：

Ext.Loader.setConfig({
    enabled: true
});

Ext.application({
    models: [
        'ListDefaultModel'
    ],
    stores: [
        'ACListStore'
    ],
    views: [
        'ViewPort'
    ],
    name: 'MyApp',

    launch: function() {

        Ext.create('MyApp.view.ViewPort', {fullscreen: true});
    }

});

生成的模型（ListDefaultModel.js）：

Ext.define('MyApp.model.ListDefaultModel', {
    extend: 'Ext.data.Model',
    config: {
        idProperty: 'listDefaultModel',
        fields: [
            {
                allowNull: false,
                name: 'label',
                type: 'string'
            },
            {
                name: 'title',
                type: 'string'
            },
            {
                name: 'discription',
                type: 'string'
            }
        ]
    }
});

The Store （ACListStore）：

Ext.define('MyApp.store.ACListStore', {
    extend: 'Ext.data.Store',
    requires: [
        'MyApp.model.ListDefaultModel'
    ],

    config: {
        model: 'MyApp.model.ListDefaultModel',
        storeId: 'ACListStore',
        proxy: {
            type: 'ajax',
            url: 'http://192.168.1.34/andaero/php/regulatory_list.php',
            reader: {
                type: 'json',
                rootProperty: 'items'
            }
        }
    }
});

视口中的列表容器.js：

. . .
xtype: 'list',
cls: [
      'list-Container'
       ],
        itemTpl: [
                '<div>',
                 '<h1>label {script}</h1>',
                 '<h2>title {script}</h2>',
                 '<p>description {script}</p>',
                 '<hr/>',
                 '</div>'
         ],
          scrollToTopOnRefresh: false,
          grouped: true
. . .

Answer 1

不是视图中的数据存储，您可以在下面执行

... 
xtype: 'list'
cls: ['list-Container'],
store: MyApp.store.ACListStore
itemTpl:'....'
...