2011-01-19 14 views
0

Sencha Touchの詳細については、私たちの大学のカレンダーWebアプリケーションを作成しています。私はいくつかのスクリプトが動作しますが、問題はEventPDFのJSONデータでlistPanelを更新しようとするときです。私はページからデータを取得していますが、更新コマンドはlistPanelを更新していないので、何かの理由で私の指を置くことができないのは、コメントアウトされたイベント変数を求めることです。今、私はその変数のコメントを解除すると、その変数のJSONを解析しますが、私の人生のために私は理由が分かりません。ここで Sencha Touch変数Missing error

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

がevents.phpのSQLとデータベース名は無実

を保護するために変更されているされて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(); 





     } 

    }); 

です
<? 
$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で閲覧のApp here

を表示することができます。

答えて

1

リストをJSONデータソースにバインドするもっと効果的な方法は、リストのすべてのAJAXと非同期更新を処理するExt.data.Proxyを使用することです。

は、私はあなたのアプリケーションを証明するために書き換えの自由を撮影した:

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

少しラフと準備:

<!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を消費します。しかし、それは次のようになります:http://cl.ly/46dH & http://cl.ly/46Rl

あなたの質問に対する技術的な答えはありません。しかし、それは機能しますか?

+0

ありがとう私はちょうど私のsencha-touch.jsを更新し、あなたの事例を得ました。私はExt.data.Proxyを使って私の書き直しをしようと思っています。私が理解していないことは、この情報がAPI内で見つからないということです。また、質問に答える限り、私のスクリプトはそれがどうなるのかまだ分かりませんが、私はこの質問に答えようと考えています。ちょうど私はあなたの仕事を使うのではなく、私の書き直しをするつもりですので、心配はありません。どうもありがとうございました。 –

+0

あなたが「イベント」を参照する唯一の場所はテンプレートにありますが、あなたのものがうまくいかなかった理由を掘り下げませんでした。私の推測によれば、それらに渡される構造は何とか期待通りではありませんでした。 –