json - Sencha Touch 变量缺失错误

Question

为了更多地了解 Sencha Touch，我正在为我们的大学构建一个日历 web 应用程序。我有一些有效的脚本，但问题是当我尝试使用来自 Events.php 的 JSON 数据更新 listPanel 时。我正在从页面获取数据，但更新命令没有更新 listPanel，而是由于某种我无法解决的原因，要求输入已注释掉的 events 变量。现在，如果我取消注释该变量，它将解析该变量中的 JSON，但对于我来说，我不知道为什么。

这是 index.html

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Student Calendar</title>
    <link rel="stylesheet" href="css/ext-touch.css" type="text/css"/>   
    <script type="text/javascript" src="js/ext-touch.js"></script>  
    <script type="text/javascript" src="js/calendar.js"></script>   
    <link rel="stylesheet" href="css/calendar.css" type="text/css"/>
</head>
<body>

<textarea id="eventList" class="x-hidden-display">
    <ul id="eventsItems">
        <tpl for=".">
        <li class="date">
        {date}
        <li>
        <tpl for="events">
        <li>{title} - {location}</li>
        </tpl>
        </tpl>
    </ul>
</textarea>

<textarea id="eventList" class="x-hidden-display">
    <ul id="eventsDescriptionList">
        <tpl for=".">
        <li class="date">
        {date}
        <li>
        <tpl for="events">
        <li>{title} - {location}</li>
        </tpl>
    </ul>
</textarea>

<textarea id="eventDescription" class="x-hidden-display">
        <tpl for=".">
            <p>{title}</p>
            <p>{description}</p>
            <p>{location}</p>
            <p>{startTime}</p>

        </tpl>

</textarea>


</body>
</html>

这是 calendar.js

Ext.setup({
        onReady:function(){

            eventListTemplate = Ext.XTemplate.from("eventList");
            descriptionTemplate = Ext.XTemplate.from("eventDescription");

            eventTapHandler = function(eventer,tapped){
                tapID = tapped.id;  
                /*Pass Into The Ajax Portion for getting a events description*/
                Ext.Ajax.request({
                params:{
                    /*params are available inside of the Ajax request*/
                    needs:eventDescription,
                    panel:"descript",
                    id:tapID,
                    fails:rootPanel
                },
                url: 'Events.php',
                method:'POST',
                success: function(response, opts) {
                    /*Ext.uitl.JSON.decode() is used to change the response text to a JSON object*/
                    opts.params.needs.update(Ext.util.JSON.decode(response.responseText));
                },
                failure: function(response, opts) {
                  alert("Sorry There Was An Error");
                  opts.params.fails.setCard(0);
                }
                });             
                rootPanel.setCard(1);       
            }

            eventBackHandler = function(){

                rootPanel.setCard(0);
            }

            backButton = {
                text:'Back',
                ui:'back',
                cls:'.backable',
                handler:eventBackHandler
            }

            toolBarBack = new Ext.Toolbar({
            dock:'top',
            title:'Event Desciption',
            cls:'toolBar',          
            items:[backButton],

            });

            listPanel = new Ext.Panel({
            tpl:eventListTemplate,
            scroll:'vertical',
            tester:function()
            {
                alert('MAGIC');
            },
            getEvent:function(){
                var currentPanel = this;
                Ext.Ajax.request({
                    params:{
                        /*params are available inside of the Ajax request*/
                        panel:"list",
                        needs:currentPanel,
                        fails:rootPanel
                    },
                    url: 'Events.php',
                    method:'POST',
                    success: function(response, opts) {                 
                    var data = Ext.util.JSON.decode(response.responseText);
                    //opts.params.needs.tester();
                        /*Ext.uitl.JSON.decode() is used to change the response text to a JSON object*/
                        opts.params.needs.update(data);
                    },
                    failure: function(response, opts) {
                      alert("Sorry There Was An Error");
                    }
                });


            },
            listeners: {el: {tap: eventTapHandler,delegate: '.touchable'}}

            });

            eventDescription = new Ext.Panel({
            tpl:descriptionTemplate,
            scroll:'vertical',          
            dockedItems:[toolBarBack]
            });         


            rootPanel = new Ext.Panel({
            fullscreen:true,
            layout:"card",
            animation: 'fade',
            items:[listPanel,eventDescription]
            });

            //Offending Variable
            //var events = [{id:1,title:'this is a title',location:'here and now',startTime:'Right behind you'},{id:2,title:'this is a title2',location:'here and now2',startTime:'Right behind you2'}]



            //alert("done");
            listPanel.getEvent();





        }

    });

这里是events.php sql和数据库名都改了，保护无辜

<?
$dbname = "magicalDatabase";
require_once("../../../db_setup.inc");
If($_POST['panel'] == "list" )
{
    $currentMonth = date("m");
    $currentYear = date("Y");
    mysql_real_escape_string($currentMonth);
    mysql_real_escape_string($currentYear);
    $sql = "SELECT * FROM magicalcalendar WHERE calendar_start_year = '$currentYear' AND calendar_start_month = '$currentMonth' AND calendar_channel_guid = 'CurrentStudentsMain' ORDER BY calendar_start_month, calendar_start_day ASC";

    $results = mysql_query($sql)or die(mysql_error()."------".__LINE__."-----$sql");



    $dayCounts[01] = 31;
    $dayCounts[02] = 29;
    $dayCounts[03] = 31;
    $dayCounts[04] = 30;
    $dayCounts[05] = 31;
    $dayCounts[06] = 30;
    $dayCounts[07] = 31;
    $dayCounts[08] = 31;
    $dayCounts[09] = 30;
    $dayCounts[10] = 31;
    $dayCounts[11] = 30;
    $dayCounts[12] = 31;
    for($j=1;$j<$dayCounts[$currentMonth];$j++)
    {   
        if($j<10)
        {
        $responce['0'.$j]['date'] = date(M)." - $j";
        }
        else{       
        $responce[$j]['date'] = date(M)." - $j";
        }
    }
    while($event = mysql_fetch_array($results))
    {       
        $responce[$event['calendar_start_day']]['events'][$event['calendar_id']]['id'] = $event['calendar_id'];
        $responce[$event['calendar_start_day']]['events'][$event['calendar_id']]['title'] = $event['calendar_subject'];
        $responce[$event['calendar_start_day']]['events'][$event['calendar_id']]['location'] = $event['calendar_location'];
        $responce[$event['calendar_start_day']]['events'][$event['calendar_id']]['startTime'] = $event['calendar_start_month']."-".$event['calendar_start_day']."-".$event['calendar_start_year'];      
    }

    echo json_encode($responce);

}

If($_POST['panel'] == "descript")
{

    $id = $_POST['id'];
    mysql_real_escape_string($id);
    $sql = "SELECT * FROM magicalcalendar WHERE calendar_id = $id";

    $results = mysql_query($sql)or die(mysql_error()."------".__LINE__."-----$sql");

    $i=0;

    while($event = mysql_fetch_array($results))
    {

        $responce['id'] = $event['calendar_id'];
        $responce['description'] = $event['calendar_text'];
        $responce['title'] = $event['calendar_subject'];
        $responce['location'] = $event['calendar_location'];
        $responce['startTime'] = $event['calendar_start_day']."-". $event['calendar_start_month']."-".$event['calendar_start_year'];        
        $i++;
    }

    echojson_encode($responce);
}





?>

这是发送的 JSON 数据的示例

{

"05":{"events":{
    "2856":{"id":"2856","title":"BSM Leadership Retreat","location":"Lake O' The Pines","startTime":"01-05-2011"}}},

"06":{"events":{
    "2957":{"id":"2957","title":"Women's Basketball","location":"Brownwood, TX","startTime":"01-06-2011"},
    "2958":{"id":"2958","title":"Men's Basketball","location":"Brownwood, TX","startTime":"01-06-2011"}}},

"08":{"events":{
    "2959":{"id":"2959","title":"Women's Basketball","location":"Alpine, Tx","startTime":"01-08-2011"},
    "2960":{"id":"2960","title":"Men's Basketball","location":"Alpine, TX","startTime":"01-08-2011"}}},

"11":{"events":{
    "3052":{"id":"3052","title":"Theatre Auditions!","location":"Black Box Theatre","startTime":"01-11-2011"}}},

"12":{"events":{
    "3054":{"id":"3054","title":"Welcome Back Party","location":"New Student Lounge","startTime":"01-12-2011"}}},

"13":{"events":{
    "2961":{"id":"2961","title":"Women's Basketball","location":"Pineville, LA","startTime":"01-13-2011"},
    "2962":{"id":"2962","title":"Men's Basketball","location":"Pineville, LA","startTime":"01-13-2011"}}},

"14":{"events":{
    "3055":{"id":"3055","title":"Organizations Meeting","location":"Cornish Great room","startTime":"01-14-2011"}}},

"15":{"events":{
    "2963":{"id":"2963","title":"Women's Basketball","location":"Clinton, MS","startTime":"01-15-2011"},
    "2964":{"id":"2964","title":"Men's Basketball","location":"Clinton, MS","startTime":"01-15-2011"}}},

"20":{"events":{
    "2965":{"id":"2965","title":"Women's Basketball","location":"ETBU\/Ornelas Gymnasium","startTime":"01-20-2011"},
    "2966":{"id":"2966","title":"Men's Basketball","location":"Ornelas Gym\/ETBU","startTime":"01-20-2011"}}},

"21":{"events":{
    "3056":{"id":"3056","title":"Karen Peck and New River","location":"Marshall Convention Center Auditorium","startTime":"01-21-2011"},
    "3057":{"id":"3057","title":"Chamber Ensemble Recital","location":"Woods Great Room in OSC","startTime":"01-21-2011"}}},

"22":{"events":{
    "2967":{"id":"2967","title":"Women's Basketball","location":"ETBU\/Ornelas Gymnasium","startTime":"01-22-2011"},
    "2968":{"id":"2968","title":"Men's Basketball","location":"Ornelas Gym\/ETBU","startTime":"01-22-2011"}}},

"27":{"events":{
    "2969":{"id":"2969","title":"Women's Basketball","location":"Clarksville, AR","startTime":"01-27-2011"},
    "2970":{"id":"2970","title":"Men's Basketball","location":"Clarksville, AR","startTime":"01-27-2011"},
    "3058":{"id":"3058","title":"CASL Conference","location":"Ornelas Student Center","startTime":"01-27-2011"}}},

"28":{"events":{
    "2857":{"id":"2857","title":"ABIDE - A Reflective Prayer Conference","location":"TBD","startTime":"01-28-2011"},
        "3059":{"id":"3059","title":"CASL Conference","location":"Ornelas Student Center","startTime":"01-28-2011"},
        "3060":{"id":"3060","title":"ABIDE","location":"TBD","startTime":"01-28-2011"}}},

"29":{"events":{"2971":{"id":"2971","title":"Women's Basketball","location":"Richardson, TX","startTime":"01-29-2011"},
    "2972":{"id":"2972","title":"Men's Basketball","location":"Richardson, TX","startTime":"01-29-2011"},
    "3061":{"id":"3061","title":"CASL Conference","location":"Ornelas Student Center","startTime":"01-29-2011"},
    "3062":{"id":"3062","title":"SAI Province Day","location":"JGMB and EDW","startTime":"01-29-2011"}}}
}

您也可以在此处查看应用程序

最好在移动设备或台式机的 Safari 浏览器中查看。

score 1 · Accepted Answer

将列表绑定到 JSON 数据源的一种更有效的方法是使用 Ext.data.Proxy 来处理所有 AJAX 和列表的异步更新。

我冒昧地重写了您的应用程序来演示：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Scratch</title>
        <script src="lib/touch/sencha-touch-debug.js" type="text/javascript"></script>
        <link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />

        <script>

            Ext.setup({
                onReady:function(){

                    //DATA

                    Ext.regModel('Event', {
                        fields: [
                            {name:'id'},
                            {name:'title'},
                            {name:'location'},
                            {name:'startTime'}
                        ],
                    });


                    Ext.regStore('events', {
                        model: 'Event',
                        autoLoad: true,
                        proxy: {
                            type: 'ajax',
                            url: 'events.json',
                            reader: {
                                type: 'json',
                                root: 'events'
                            }
                        },
                        getGroupString: function(record) {
                            return record.get('startTime');
                        }
                    });


                    //UI

                    eventListToolbar = new Ext.Toolbar({
                        title: 'Events'
                    });
                    eventList = new Ext.List({
                        store: 'events',
                        itemTpl: Ext.XTemplate.from("eventList"),
                        listeners: {
                            selectionchange: function (selectionModel, records) {
                                if (records[0]) {
                                    eventDescription.update(records[0].data);
                                    eventDescriptionToolbar.setTitle(records[0].get('title'))
                                    rootPanel.setActiveItem(eventDescriptionPanel, {type:'slide'});
                                }
                            }
                        },
                        grouped:true
                    });
                    eventListPanel = new Ext.Panel({
                        dockedItems: [eventListToolbar],
                        items: [eventList]
                    });

                    eventDescriptionToolbar = new Ext.Toolbar({
                        items: {
                            text:'Back',
                            ui: 'back',
                            listeners: {
                                tap: function () {
                                    rootPanel.setActiveItem(eventListPanel, {type:'slide', direction:'right'});
                                }
                            }
                        }
                    });
                    eventDescription = new Ext.Panel({
                        tpl: Ext.XTemplate.from("eventDescription"),
                        padding:20,
                    });
                    eventDescriptionPanel = new Ext.Panel({
                        dockedItems: [eventDescriptionToolbar],
                        items: [eventDescription],
                    });

                    rootPanel = new Ext.Panel({
                        fullscreen:true,
                        layout:"card",
                        items:[
                            eventListPanel,
                            eventDescriptionPanel
                        ]
                    });

                }

            });

        </script>

    </head>
    <body>

        <textarea id="eventList" class="x-hidden-display">
            {title} - {location}
        </textarea>

        <textarea id="eventDescription" class="x-hidden-display">
            <p>{title}</p>
            <p>{description}</p>
            <p>{location}</p>
            <p>{startTime}</p>
        </textarea>

    </body>
</html>

这会使用如下所示的 JSON：

{"events":[
    {"id":"2856","title":"BSM Leadership Retreat","location":"Lake O' The Pines","startTime":"01-05-2011"},
    {"id":"2957","title":"Women's Basketball","location":"Brownwood, TX","startTime":"01-06-2011"},
    {"id":"2958","title":"Men's Basketball","location":"Brownwood, TX","startTime":"01-06-2011"},
    {"id":"2959","title":"Women's Basketball","location":"Alpine, Tx","startTime":"01-08-2011"},
    {"id":"2960","title":"Men's Basketball","location":"Alpine, TX","startTime":"01-08-2011"},
    {"id":"3052","title":"Theatre Auditions!","location":"Black Box Theatre","startTime":"01-11-2011"},
    {"id":"3054","title":"Welcome Back Party","location":"New Student Lounge","startTime":"01-12-2011"},
    {"id":"2961","title":"Women's Basketball","location":"Pineville, LA","startTime":"01-13-2011"},
    {"id":"2962","title":"Men's Basketball","location":"Pineville, LA","startTime":"01-13-2011"},
    {"id":"3055","title":"Organizations Meeting","location":"Cornish Great room","startTime":"01-14-2011"},
    {"id":"2963","title":"Women's Basketball","location":"Clinton, MS","startTime":"01-15-2011"},
    {"id":"2964","title":"Men's Basketball","location":"Clinton, MS","startTime":"01-15-2011"},
    {"id":"2965","title":"Women's Basketball","location":"ETBU\/Ornelas Gymnasium","startTime":"01-20-2011"},
    {"id":"2966","title":"Men's Basketball","location":"Ornelas Gym\/ETBU","startTime":"01-20-2011"},
    {"id":"3056","title":"Karen Peck and New River","location":"Marshall Convention Center Auditorium","startTime":"01-21-2011"},
    {"id":"3057","title":"Chamber Ensemble Recital","location":"Woods Great Room in OSC","startTime":"01-21-2011"},
    {"id":"2967","title":"Women's Basketball","location":"ETBU\/Ornelas Gymnasium","startTime":"01-22-2011"},
    {"id":"2968","title":"Men's Basketball","location":"Ornelas Gym\/ETBU","startTime":"01-22-2011"},
    {"id":"2969","title":"Women's Basketball","location":"Clarksville, AR","startTime":"01-27-2011"},
    {"id":"2970","title":"Men's Basketball","location":"Clarksville, AR","startTime":"01-27-2011"},
    {"id":"3058","title":"CASL Conference","location":"Ornelas Student Center","startTime":"01-27-2011"},
    {"id":"2857","title":"ABIDE - A Reflective Prayer Conference","location":"TBD","startTime":"01-28-2011"},
    {"id":"3059","title":"CASL Conference","location":"Ornelas Student Center","startTime":"01-28-2011"},
    {"id":"3060","title":"ABIDE","location":"TBD","startTime":"01-28-2011"},
    {"id":"2971","title":"Women's Basketball","location":"Richardson, TX","startTime":"01-29-2011"},
    {"id":"2972","title":"Men's Basketball","location":"Richardson, TX","startTime":"01-29-2011"},
    {"id":"3061","title":"CASL Conference","location":"Ornelas Student Center","startTime":"01-29-2011"},
    {"id":"3062","title":"SAI Province Day","location":"JGMB and EDW","startTime":"01-29-2011"}
]}

有点粗糙，准备好了。但它看起来像：http ://cl.ly/46dH & http://cl.ly/46Rl

从技术上讲，这不是您问题的答案。但这行得通吗？

json - Sencha Touch 变量缺失错误

1 回答 1

Related

Reference