sencha 日历错误未捕获类型错误：无法读取页面加载时未定义的属性“indexOf”
Posted
技术标签:
【中文标题】sencha 日历错误未捕获类型错误：无法读取页面加载时未定义的属性“indexOf”【英文标题】：sencha calendar error uncaught type error : Cannot read property 'indexOf' of undefined on page load 【发布时间】：2015-05-07 05:27:37 【问题描述】：我正在使用 sencha 日历进行预订，当我加载页面时，它会给我一个错误未捕获类型错误：如果我单击控制台跟踪，则无法读取未定义的属性“indexOf”，而不是重定向到 ext-4.1.0 .all
控制台错误
Ext.String.urlAppendext-4.1.0.all.js:21 Ext.apply.urlAppendext-4.1.0.all.js:21 Ext.define.buildUrlext-4.1.0.all.js:21 Ext.define.buildRequestext-4.1.0.all.js:21 Ext.define.doRequestext-4.1.0.all.js:21 Ext.define.readext-4.1.0.all.js:21 Ext.define.loadext-4.1.0.all.js:21 b.implement.callParentext-4.1.0.all.js:21 Ext.define.loadgrouping.js:373 App.Scheduler.createGridgrouping.js:50 App.Scheduler.initgrouping.js:42 (anonymous function)ext-4.1.0.all.js:21 Ext.util.Event.Ext.extend.isEventext-4.1.0.all.js:21 Ext.util.Event.Ext.extend.fireext-4.1.0.all.js:21 Ext.apply.readyEvent.e.fireext-4.1.0.all.js:21 Ext.apply.fireReadyEventext-4.1.0.all.js:21 (anonymous function)
我的 grouping.js 代码
Ext.ns('App');
Ext.Loader.setConfig( enabled : true, disableCaching : true );
//Ext.Loader.setPath('Sch', '../../js/Sch');
Ext.require([
'Sch.panel.SchedulerGrid',
'Ext.data.*',
'Ext.grid.*'
]);
Ext.onReady(function()
Ext.QuickTips.init();
Sch.preset.Manager.registerPreset('Scheduler',
// timeColumnWidth : 90,
displayDateFormat : 'M Y',
shiftIncrement : 2, //increment date for next and previous
shiftUnit : "DAY",
timeResolution :
unit : "DAY",
increment : 1
,
headerConfig :
middle :
unit : "DAY",
dateFormat : 'D d M'
,
top :
unit : "MONTH",
dateFormat : 'M Y'
);
App.Scheduler.init();
);
App.Scheduler =
// Initialize application
init : function()
this.grid = this.createGrid();
this.grid.on('eventcontextmenu', this.onEventContextMenu, this);
//this.grid.on('beforeeventadd', this.onBeforeEventAdd, this);
var programTemplate = new Ext.XTemplate(
'<span class="startTime">[Ext.Date.format(values.StartDate, "g:i")]</span>' +
'<span class="programName">text</span>' +
'<span class="duration">[values.duration < 3600 ? ((values.duration / 60) + "min") : ((Math.round(10*values.duration/3600)/10) + "h")]</span>'
);
,
//for delete the Booking
onEventContextMenu: function (s, rec, e)
e.stopEvent();
if (!s.ctx)
s.ctx = new Ext.menu.Menu(
items: [
text: 'Cancel Booking',
iconCls: 'icon-delete',
handler : function()
if(s.ctx.rec.getEndDate() < new Date() || s.ctx.rec.getStartDate() < new Date())
alert ('You Cant Cancel The Old Booking Record');
else
var r=confirm("Would you like to Cancel Room Booking . \n Room No:" + s.ctx.rec.getResourceId() + " Booking Date = " +Ext.Date.format(s.ctx.rec.getStartDate(), 'm/d/Y') + ' To ' + Ext.Date.format(s.ctx.rec.getEndDate(), 'm/d/Y'));
if (r==true)
// activeInactiveBooking();
// dwrMainCommand.activeInactiveBooking(s.ctx.rec.data.Id,'1', async:false,
// callback : function(data)
// alert(data);
s.eventStore.remove(s.ctx.rec);
//
// );
]
);
s.ctx.rec = rec;
s.ctx.showAt(e.getXY());
,
//end delete Booking
//for the drop event
/* allowModify : function(s, r)
// Don't allow modifications while "fake loading" is happening
return false;
,*/
//end for the drop event
createGrid : function()
Ext.define('Resource',
extend : 'Sch.model.Resource',
fields: [
'Category',
'Type'
]
);
var roomList = getRoomAndRoomType();
var resourceStore = Ext.create('Sch.data.ResourceStore',
groupField : 'Category',
sorters: ['Category','Name'],
model : 'Resource',
data : roomList,
);
var bookRoom = getBookRoom();
var eventStore = Ext.create('Sch.data.EventStore',
url :'http://localhost:8080/DNARMS_NEW/main.htm?hotelId=6',
data : bookRoom,
);
//var myDate = new Date();
var nextDate = new Date();
nextDate.setDate(new Date().getDate()+6);
var g = Ext.create("Sch.panel.SchedulerGrid",
height : 635,
// width : 815,
renderTo : 'grid-grouping'+$('#hiddenHotelId').val(),
//renderTo : 'grid-grouping',
multiSelect : false,
title : 'Booking - Schedule',
startDate : new Date(),
endDate : nextDate,
rowHeight : 30,
readOnly: false,
viewPreset : 'Scheduler',
allowOverlap : false,
border : true,
dragConfig: null,
dropConfig: null,
tooltipTpl : new Ext.XTemplate('Name : [Ext.Date.format(values.StartDate, "m/d/Y")] - [Ext.Date.format(values.EndDate, "m/d/Y")]').compile(),
// Constrain events within their current day
getDateConstraints: function (resourceRecord, eventRecord)
if (eventRecord)
var date = eventRecord instanceof Date ? eventRecord : eventRecord.getStartDate();
//tick = ta.getAt(Math.floor(ta.getTickFromDate(date)));
return
start : eventRecord.getStartDate(),
end : eventRecord.getEndDate()
;
,
/*eventRenderer : function(ev, res, tplData)
alert(ev);
return ev.getName();
,*/
eventRenderer : function (item, r, tplData, row)
var bgColor = '';
if(item.get('Name').search("Un-Availabe") >= 0)
bgColor='red';
else
if(item.get('Name').search("Reserved") >= 0)
bgColor='silver';
else
if(item.get('Name').search("Check-In") >= 0)
bgColor='gray';
tplData.style = "background-color:" + bgColor +";"+"color:" + " black";
return item.get('Name');
,
headerConfig :
middle :
unit : "DAY",
dateFormat : 'D d M'
,
top :
unit : "MONTH",
dateFormat : 'M Y'
,
timeResolution :
unit : "DAY",
increment : 1
,
features : [
ftype : 'grouping',
groupHeaderTpl : 'name',
hideGroupedHeader : true
],
// Setup your static columns
columns : [
header : 'Projects', width:100, dataIndex : 'Category',
header : 'Room', sortable:true, width:140, dataIndex : 'Name'
],
store : resourceStore,
resourceStore : resourceStore,
eventStore : eventStore,
tbar : [
iconCls : 'icon-previous',
scale : 'medium',
handler : function()
g.shiftPrevious();
,
text : 'Week',
toggleGroup : 'presets',
enableToggle : true,
pressed : false,
iconCls : 'icon-calendar',
handler : function()
var newdate = new Date();
newdate.setDate(new Date().getDate()+6);
g.switchViewPreset('Scheduler', new Date(), newdate);
,
text : '10 Days',
toggleGroup : 'presets',
enableToggle : true,
pressed : false,
iconCls : 'icon-calendar',
handler : function()
var newdate = new Date();
newdate.setDate(new Date().getDate()+9);
g.switchViewPreset('Scheduler', new Date(), newdate);
,
text : '2 Week',
toggleGroup : 'presets',
enableToggle : true,
pressed : false,
iconCls : 'icon-calendar',
handler : function()
var newdate = new Date();
newdate.setDate(new Date().getDate()+13);
g.switchViewPreset('Scheduler', new Date(), newdate);
,
'->',
iconCls : 'icon-next',
scale : 'medium',
handler : function()
g.shiftNext();
],
listeners :
eventcontextmenu : this.onEventContextMenu,
//For the Booking Confirmation
beforeeventadd : function(s,ev)
if(Ext.Date.format(ev.getEndDate(), 'm/d/Y') < Ext.Date.format(new Date(), 'm/d/Y') || Ext.Date.format(ev.getStartDate(), 'm/d/Y') < Ext.Date.format(new Date(), 'm/d/Y'))
alert ('You Cant Book Room of Old Date');
return false;
else
var endDate = ev.getEndDate();
endDate.setDate(endDate.getDate()-1);
var r=confirm("Would you like to Book Room. \n Booking Date = "
+Ext.Date.format(ev.getStartDate(), 'm/d/Y') + ' To ' + Ext.Date.format(endDate, 'm/d/Y'));
if (r==true)
submitForm('main.htm','weekCalander,roomId,roomName,startDateWeekCal,endDateWeekCal,hotelIdWeekCal','1,'+ev.getResourceId()+','+ev.getResourceId()+','+Ext.Date.format(ev.getStartDate(), 'm/d/Y')+','+Ext.Date.format(endDate, 'm/d/Y')+','+$('#hiddenHotelId').val());
else
return false;
,
eventDrop: function(view,records,isCopy,eOpts)
var mapObj = new Object();
dwrMainCommand.getBookingDataByBookingId(records[0].getId(),
async:false,
callback : function(data)
if(data != null)
mapObj.noOfGuest = data[0][31];
mapObj.convectionId = data[0][35];
,
);
mapObj.hotelId = $('#hiddenHotelId').val();
mapObj.roomId = records[0].getResourceId();
mapObj.bookingId = records[0].getId();
mapObj.startDate = Ext.Date.format(records[0].getStartDate(), 'm/d/Y');
mapObj.endDate = Ext.Date.format(records[0].getEndDate(), 'm/d/Y');
dwrMainCommand.updateRoomPriceByRoom(mapObj,
async:false,
callback : function(data)
if(data != null)
alert('Booking Id : ' + records[0].getId() + ' New Price: ' + data.price +' local Tax:' + data.localTax + ' State Tax:' + data.stateTax);
,
);
,
beforeeventresize : function(s, r)
return false;
,
eventresizeend: function(s, records,opt)
return false;
/*records.data.EndDate
records.data.StartDate
records.data.ResourceId
records.data.Name
records.data.Id
*/
/*var r=confirm("Change Booking Date from: " + Ext.Date.format( records.data.StartDate, 'm/d/Y') + " To :" + Ext.Date.format( records.data.EndDate, 'm/d/Y'));
if (r==true)
alert("ID=" + records.data.Id);
alert("ID=" + records.data.ResourceId);
alert("ID=" + records.data.Name);
alert("ID=" + records.data.StartDate);
alert("ID=" + records.data.EndDate);
return true;
else
//resourceStore.load();
//eventStore.load();
return false;
*/
);
resourceStore.load();
eventStore.load();
return g;
;
现有代码是否有任何更改，然后请建议我。再想一想，如果我删除了“resourceStore.load”和“eventStore.load”而不是控制台错误将被删除，但在这种情况下某些功能将无法使用。
【问题讨论】：
【参考方案1】：just put following code to initialize eventStore and resource store.
var resourceStore = Ext.create('Sch.data.ResourceStore',
groupField : 'Category',
sorters: ['Category','Name'],
model : 'Resource',
sucess:true,
proxy:
type: 'ajax',
url: '',
reader:
root: 'data',
type: 'json'
,
data : roomList,
);
eventStore = Ext.create('Sch.data.EventStore',
sucess:true,
proxy:
type: 'ajax',
url: '',
reader:
root: 'data',
type: 'json'
,
data : bookRoom,
);
【讨论】：
以上是关于sencha 日历错误未捕获类型错误：无法读取页面加载时未定义的属性“indexOf”的主要内容，如果未能解决你的问题，请参考以下文章
错误未捕获类型错误：无法读取完整日历上未定义的属性“hasTime”
未捕获的类型错误：无法在完整日历中读取未定义的属性（读取“hasTime”）