1. 首頁
  2. 問答
  3. Sencha Touch可變失蹤錯誤

Sencha Touch可變失蹤錯誤

2011-01-19 84 views
0

爲了更多地瞭解Sencha Touch，我正在爲我們的大學建立一個日曆webapp。我有一些腳本可以工作，但問題是當我嘗試使用Events.php中的JSON數據更新listPanel時。我從頁面獲取數據，但更新命令沒有更新listPanel，而是出於某種原因，我無法忍受正在請求的事件變量被註釋掉。現在，如果我取消註釋該變量，它將解析該變量中的JSON，但對於我的生活，我不知道爲什麼。Sencha Touch可變失蹤錯誤

這裏是中的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"}}} 
}

還可以查看應用程序here

它在Safari瀏覽移動或桌面。

來源

2011-01-19 Aaron Blakeley

回答

1

將一個列表綁定到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

從技術上講，不是你的問題的答案。但是這有用嗎？

來源

2011-01-20 02:28:03

+0

謝謝我剛剛更新了我的sencha-touch.js並獲得了您的示例工作。我打算用Ext.data.Proxy重寫我的。我不明白的是，這些信息在API中根本找不到。另外就回答這個問題而言，我仍然不確定爲什麼我的腳本按照它的方式行事，但我會考慮回答這個問題。只是供參考我將重寫我的不只是使用你的工作，所以不用擔心。非常感謝你。 – 2011-01-21 16:11:23

相關問題

 相關問題