如何通过PHP后端将sencha touch应用程序与mysql数据库连接


How to connect a sencha touch application with mysql database with a PHP backend?

我知道这个问题可能在其他地方得到了答案,但我仍然被卡住了,我已经检查了很多来源。我已经有了我的sencha列表视图、模型和存储设置,以及一个带有PHP+json转换的mysql数据库。但它仍然不会在我的列表视图中显示结果。我的sencha应用程序运行时没有任何错误。经过大量的研究,我发现我在定义存储类中的根属性时肯定做错了什么。以下是我使用mysql查询从数据库中获取数据的PHP+json代码:

<?php
header('Content-Type: text/javascript; charset=UTF-8');
ini_set("display_errors", true);
ini_set("html_errors", true);
//checking connection and connecting to a database
require_once('connection/config.php');
//Connect to mysql server
    $link = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD);
    if(!$link) {
        die('Failed to connect to server: ' . mysql_error());
    }
    //Select database
    $db = mysql_select_db(DB_DATABASE);
    if(!$db) {
        die("Unable to select database");
    }
//variables initialization
$out = "";
$action = "";
$data = "";
//check if read is set from the Teams class
if (isset($_REQUEST["action"])){
    $action = $_REQUEST["action"];
}
switch ($action) {
    case "read": $out = read_this();
    break;
}
echo utf8_encode($out);
//using function read_this() to retrieve teams from the tb_teams table then convert into json data
function read_this(){
    $result=mysql_query("SELECT home_team_name FROM tb_teams")
    or die("There are no records to display ... 'n" . mysql_error());
    $num = mysql_num_rows($result);
    $i = 0;
    $eData = array("count" => $num, "fixtures" => array());
    while ($row = mysql_fetch_assoc($result)){
        $eData["fixtures"][$i] = $row;
        $i++;
    }
    return $_REQUEST['callback'] . '(' . json_encode($eData) . ');';
}
?>

我的型号类别:

    Ext.define('App.model.Team',{
        extend: 'Ext.data.Model',
        config: {
            fields: [{name: 'home_team_name', type: 'string' }]
        },
    });

我的店铺类别:

Ext.define('App.store.Teams',{
    extend: 'Ext.data.Store',
    config: {
        model: 'App.model.Team',
        sorters: 'home_team_name',
        grouper: function(record) {
            return record.get('home_team_name')[0];
        },
        proxy: {
            type: 'scripttag',
            url: 'http://127.0.0.1/backend/store.php',
            reader: {
                type: 'json',
                root: 'fixtures'
            },
            extraParams: {
                action: 'read'
            }   
        }   
    }
});

我的列表视图类:

Ext.define('App.view.TeamList',{
    extend: 'Ext.List',
    xtype: 'teamlist',
    config: {
            title: 'Teams',
            //loading data from Teams store into a List item and apply some properties
            grouped: true,
            indexBar: true,
            itemTpl: '{ home_team_name }',
            store: 'Teams',
    }
});

请有人告诉我到底哪里做错了?提前谢谢。

我没有足够的声誉发表评论。

我认为你应该用itemTpl: '{ name}'代替itemTpl: '{ home_team_name }'。因为您在模型中将name声明为字段。

Ext.define('App.view.TeamList',{
      extend: 'Ext.List',
      xtype: 'teamlist',
      config: {
        title: 'Teams',
        //loading data from Teams store into a List item and apply some properties
        grouped: true,
        indexBar: true,
        itemTpl: '{ name}',
        store: 'Teams',
     }
  });

经过多次观察,我发现问题实际上在于PHP到json的转换(改编自sencha touch文档)以及我如何处理存储类中的回调。

一个工作的PHP代码:

<?php
header('Content-Type: text/javascript; charset=UTF-8');
ini_set("display_errors", true);
ini_set("html_errors", true);
//checking connection and connecting to a database
require_once('connection/config.php');
//Connect to mysql server
    $link = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD);
    if(!$link) {
        die('Failed to connect to server: ' . mysql_error());
    }
    //Select database
    $db = mysql_select_db(DB_DATABASE);
    if(!$db) {
        die("Unable to select database");
    }
//variables initialization
$out = "";
$action = "";
//check if read is set from the Teams class
if (isset($_REQUEST["action"])){
    $action = $_REQUEST["action"];
}
switch ($action) {
    case "read": $out = read_this();
    break;
}
echo utf8_encode($out);
//using function read_this() to retrieve teams from the tb_teams table then convert into json data
function read_this(){
    $result=mysql_query("SELECT home_team_name FROM tb_teams")
    or die("There are no records to display ... 'n" . mysql_error());
    $arr = array();
while($obj = mysql_fetch_object($result)) {
    $arr[] = $obj;
}
$callback = $_REQUEST['callback'];
if ($callback) {
    header('Content-Type: text/javascript');
    return $callback . '(' . json_encode($arr) . ');';
} else {
    header('Content-Type: application/x-json');
    return json_encode($arr);
}
}
?>

在store类中,我必须将autoLoad设置为true,以实现json数据的自主读取:

Ext.define('App.store.Teams',{
    extend: 'Ext.data.Store',
    config: {
        model: 'App.model.Team',
        sorters: 'home_team_name',
        grouper: function(record) {
            return record.get('home_team_name')[0];
        },
        proxy: {
            type: 'scripttag',
            url: 'http://127.0.0.1/backend/store.php',
            reader: {
                type: 'json',
                root: 'fixtures'
            },
            extraParams: {
                action: 'read'
            }   
        }
        autoLoad true,   
    }
});

再次感谢所有试图提供帮助的人。我希望这能为其他伙伴节省很多时间。

假设您得到了正确的json表单服务器;有时,在列表中添加高度和宽度可能会有所帮助。

width: "95%",
height: "95%",