使用 Sencha 从 JSON 创建 ListView答案

【问题标题】：Creating a ListView from JSON with Sencha使用 Sencha 从 JSON 创建 ListView
【发布时间】：2012-04-20 00:00:38
【问题描述】：

我刚开始使用 Architect 玩 Sencha Touch，我正在尝试使用 PHP 将 MySQL 数据库中的列表填充到 JSON。我让 Architect 生成脚本，但我似乎无法让它在运行时填充/显示数据。我确信我遗漏了一些东西，所以我们将不胜感激。下面是支持代码sn-ps。

提供的 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();
?>

自动生成的 app.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'
            }
        ]
    }
});

商店（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'
            }
        }
    }
});

ViewPort.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
. . .

【问题讨论】：

标签： json list sencha-touch sencha-architect

【解决方案1】：

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

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

【讨论】：