为了更多地了解Sencha Touch，我正在为我们的大学构建一个日历webapp。我有一些脚本可以工作，但问题是我尝试使用Events.php中的JSON数据更新listPanel。我从页面获取数据，但更新命令没有更新listPanel，而是由于某种原因，我无法指责我要求注释掉的事件变量。现在，如果我取消注释该变量，它将解析该变量中的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"}}}
}
您还可以查看应用here
最好在safari中查看移动设备或桌面设备。
答案 0 :(得分：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＆amp; http://cl.ly/46Rl
从技术上讲，这不是你问题的答案。但这有用吗？