我正在使用 sencha 日历进行预订，当我加载页面时，它会给我一个错误:未捕获类型错误:如果我单击控制台跟踪，则无法读取未定义的属性“indexOf”，它将重定向到 ext-4.1.0 .全部
控制台错误
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”，那么控制台错误将被删除，但在这种情况下某些功能将无法使用。
最佳答案
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,
});
关于javascript - sencha 日历错误未捕获类型错误 : Cannot read property 'indexOf' of undefined on page load，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30092589/