如何将 sencha touch 应用程序与具有 PHP 后端的 mysql 数据库连接？

Question

我知道这可能已经在其他地方得到了解答，但我仍然卡住了，我已经检查了很多资源。我已经有了我的 sencha 列表视图、模型和存储设置以及带有 PHP + json 转换的 mysql 数据库。但它仍然不会将结果显示到我的列表视图中。我的 sencha 应用程序运行完全没有错误。通过大量研究，我发现我在商店 class 中定义根属性肯定是做错了什么。以下是我的 PHP + json 代码，其中包含 mysql 查询以从数据库中获取数据：

<?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) . ');';
}
?>

我的模型class:

    Ext.define('App.model.Team',{
        extend: 'Ext.data.Model',

        config: {
            fields: [{name: 'home_team_name', type: 'string' }]
        },
    });

我的店铺class:

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

我的列表视图 class:

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',
    }
});

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

Answer 1

假设您正在获取正确的 json 表单服务器；有时向列表添加高度和宽度可能会有所帮助。

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

Answer 2

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

我认为你应该使用 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',
     }
  });

Answer 3

经过多方观察，我发现问题实际上是在 PHP 到 json 的转换（改编自 sencha touch 文档）以及我如何处理商店中的回调 class.

有效的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);
}
}
?>

在商店 class 中，我必须将 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,   
    }
});

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

如何将 sencha touch 应用程序与具有 PHP 后端的 mysql 数据库连接？

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

php

mysql

json

sencha-touch