Sencha Touch Variable Missing error

2023-02-05 19:08 问答作者：

In an effort to learn more about Sencha Touch I am building a calendar webapp for our university. I have some scripts that work but the problem is when I try to update the listPanel with the JSON data from Events.php. I am getting the data from the page but the update command is not updating the listPanel and instead for some reason that I can't put my finger on is asking for the events variable which is commented out. Now if I uncomment that variable it will parse the JSON in that variable but for the life of me i have no idea why.

Here is the the 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>

Here is the 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();





        }

    });

Here is the events.php Sql and database names have been changed to protect the innocent

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





?>

Here is an example of the JSON data being sent

{

"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"}}}
}

Also you can view the app here

It's best viewed in safari either mobile or desktop.

A much more effective way to bind, say, a list to a JSON data source is to use a Ext.data.Proxy which will take care of all the AJAX and asynchronous updating of the list.

I've taken the liberty of rewriting your app to demonstrate:

<!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>

This consumes JSON that looks like this:

{"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"}
]}

Slightly rough and ready. But it looks like: http://cl.ly/46dH & http://cl.ly/46Rl

Not technically an answer to your question. But does that work?

继续阅读：json sencha-touch

Sencha Touch Variable Missing error

更多精彩内容

精彩评论

最新问答

屏幕镜像是指什么？

渭南市医院治不孕？

从月销过万到月销不足2500，POLO换代后为何这么惨？？

中老年客户该如何理财？？

不孕内分泌检查项目？

问答排行榜

Is it allowed to ask users to enter credit card details for own payment method?

Escaping "<" in Perl-generated XML

王昌瑞《潜梦追凶》剧组庆生新锐演员未来可期？

imessage会显示已读吗？

微信重新建群怎么建？