使用Sencha从JSON创建ListView

时间:2012-04-20 00:00:38

标签: json list sencha-touch sencha-architect

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

服务的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
. . .

1 个答案:

答案 0 :(得分:0)

您的视图中没有数据存储,您可以在下面执行

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