我已下载'extensible-1.6.0-b1'，我正在尝试了解远程示例以使用我的应用程序自定义它。我用extjs 4.0.7编码。
我想知道如何在mvc应用程序中集成示例？有没有一个清晰架构的例子：商店+模型+控制器？
修改
这是我现在使用的代码：
Ext.define('Webdesktop.view.calendar.Calendar', {
extend : 'Ext.tab.Panel',
alias : 'widget.calendar_calendar',
//autoShow : true,
paths: {
'Extensible': 'extensible-1.6.0-b1/src',
'Extensible.example': 'extensible-1.6.0-b1/examples'
},
requires:([
'Ext.Viewport',
'Ext.layout.container.Border',
'Ext.data.proxy.Rest',
'Extensible.calendar.data.MemoryCalendarStore',
'Extensible.calendar.data.EventStore',
'Extensible.calendar.CalendarPanel'
]),
initComponent: function() {
var me = this;
var calendarStore = Ext.create('Extensible.calendar.data.MemoryCalendarStore', {
autoLoad: true,
proxy: {
type: 'ajax',
url: 'app/data/calendars.json',
noCache: false,
reader: {
type: 'json',
root: 'calendars'
}
}
});
var eventStore = new Ext.data.JsonStore({
autoLoad: true,
fields: [
{name: 'EventId', mapping:'id', type:'int'},
{name: 'CalendarId', mapping: 'cid', type: 'int'},
{name: 'Title', mapping: 'title'},
{name: 'StartDate', mapping: 'start', type: 'date', dateFormat: 'c'},
{name: 'EndDate', mapping: 'end', type: 'date', dateFormat: 'c'}
],
proxy : {
type : 'ajax',
api : {
read : GLOBAL_USER_PROFILE.apiUrl + '_module/calendar/_action/loadEvent'
},
extraParams : {
_module : 'calendar',
_action : 'loadEvent',
_db : '2d3964b9...e53a82'
},
reader : {
type : 'json',
root : 'evts'
},
writer : {
type : 'json',
encode : true
}
},
listeners: {
'write': function(store, operation){
var title = Ext.value(operation.records[0].data[Extensible.calendar.data.EventMappings.Title.name], '(No title)');
switch(operation.action){
case 'create':
Extensible.example.msg('Add', 'Added "' + title + '"');
break;
case 'update':
Extensible.example.msg('Update', 'Updated "' + title + '"');
break;
case 'destroy':
Extensible.example.msg('Delete', 'Deleted "' + title + '"');
break;
}
}
}
});
var cp = Ext.create('Extensible.calendar.CalendarPanel', {
id: 'calendar-remote',
region: 'center',
eventStore: eventStore,
calendarStore: calendarStore,
title: 'Remote Calendar'
});
Ext.apply(me, {
items : {
xtype : 'panel',
activeItem : 0,
layout: {
type: 'fit'
},
border : false, //FIXME: see class comment, bug
defaults : {
closable : false, //FIXME: see class comment, bug
border : false //FIXME: see class comment, bug
},
title : 'الاستقبال',
closable : true,
bodyPadding : 0,
items: [
cp
]
}
});
me.callParent();
}
});
json回来了：
{
"evts":[{
"EventId":"1",
"CalendarId":"0",
"Title":"$data",
"StartDate":"Mon May 13 2013 09:21:57 GMT+0100",
"EndDate":"Mon May 13 2013 09:21:57 GMT+0100",
"Duration":"0",
"Location":"",
"Notes":"",
"Url":"",
"IsAllDay":"0",
"Reminder":""
},{
"EventId":"2",
"CalendarId":"0",
"Title":"$data",
"StartDate":"Mon May 13 2013 09:21:57 GMT+0100",
"EndDate":"Mon May 13 2013 09:21:57 GMT+0100",
"Duration":"0",
"Location":"",
"Notes":"",
"Url":"",
"IsAllDay":"0",
"Reminder":""
}]
}
但是事件没有显示在日历中，我在Firebug中有这个错误：
TypeError: data[M.StartDate.name] is null
答案 0 :(得分：2)
我遇到了同样的问题我昨天解决了它，这是关于你的日期的格式是不正确的，这可能会帮助你： 所以这是我的观点：
Ext.define('Congectis.view.CalendarTry', {
extend: 'Ext.panel.Panel',
alias: 'widget.calendartry',
requires: [
'Ext.data.proxy.Rest',
'Extensible.calendar.data.MemoryCalendarStore',
'Extensible.calendar.CalendarPanel',
'Extensible.calendar.data.EventStore'
],
autoShow: true,
layout: 'fit',
Store: ['Evts'],
initComponent: function () {
var calendarStore = Ext.create('Extensible.calendar.data.MemoryCalendarStore', {
autoLoad: true,
proxy: {
type: 'ajax',
url: '../../../../../MVC/eLeave/data/event2.json',
noCache: false,
reader: {
type: 'json',
root: 'calendars'
}
}
});
var eventstore = Ext.create('Extensible.calendar.data.EventStore', {
autoLoad: true,
fields: [
{name: 'EventId', mapping: 'EventId', type: 'int'},
{name: 'CalendarId', mapping: 'CalendarId', type: 'int'},
{name: 'Title', mapping: 'Title'},
{name: 'StartDate', mapping: 'StartDate', type: 'date', dateFormat: 'm-d-Y'},
{name: 'EndDate', mapping: 'EndDate', type: 'date', dateFormat: 'm-d-Y'}
],
proxy: {
type: 'ajax',
url: '../../../../../MVC/eLeave/data/event1.json',
noCache: false,
reader: {
type: 'json',
root: 'data'
},
writer: {
type: 'json',
nameProperty: 'mapping'
},
listeners: {
exception: function (proxy, response, operation, options) {
var msg = response.message ? response.message : Ext.decode(response.responseText).message;
Ext.Msg.alert('Server Error', msg);
}
}
},
//option for generically messaging after CRUD persistence has succeeded.
listeners: {
'write': function (store, operation) {
var title = Ext.value(operation.records[0].data[Extensible.calendar.data.EventMappings.Title.name], '(No title)');
switch (operation.action) {
case 'create':
Extensible.example.msg('Add', 'Added "' + title + '"');
break;
case'update':
Extensible.example.msg('Update', 'Updated "' + title + '"');
break;
case'destroy':
Extensible.example.msg('Delete', 'Deleted "' + title + '"');
break;
}
}
}
});
this.items = [{
xtype: 'extensible.calendarpanel',
eventStore: eventstore,
calendarStore: calendarStore,
title: 'Calendrier des conges',
name: 'eLeave-calendar',
height: 500,
width: 500
}];
//Extensible.calendar.data.CalendarModel.reconfigure();
this.callParent(arguments);
}
});
这是我的json商店
{
"success": true,
"message": "Loaded data",
"data": [{
"id": 1001,
"cid": 1,
"start": "2015-03-18T10:00:00-07:00",
"end": "2015-03-28T15:00:00-07:00",
"title": "Vacation",
"notes": "Have fun"
}, {
"id": 1002,
"cid": 2,
"start": "2015-04-07T11:30:00-07:00",
"end": "2015-04-07T13:00:00-07:00",
"title": "Lunch with Matt",
"loc": "Chuy's",
"url": "http:\/\/chuys.com",
"notes": "Order the queso"
}, {
"id": 1003,
"cid": 3,
"start": "2015-04-07T15:00:00-07:00",
"end": "2015-04-07T15:00:00-07:00",
"title": "Project due"
}, {
"id": 1004,
"cid": 1,
"start": "2015-04-07T00:00:00-07:00",
"end": "2015-04-07T00:00:00-07:00",
"title": "Sarah's birthday",
"ad": true,
"notes": "Need to get a gift"
}, {
"id": 1005,
"cid": 2,
"start": "2015-03-26T00:00:00-07:00",
"end": "2015-04-16T23:59:59-07:00",
"title": "A long one...",
"ad": true
}, {
"id": 1006,
"cid": 3,
"start": "2015-04-12T00:00:00-07:00",
"end": "2015-04-13T23:59:59-07:00",
"title": "School holiday"
}, {
"id": 1007,
"cid": 1,
"start": "2015-04-07T09:00:00-07:00",
"end": "2015-04-07T09:30:00-07:00",
"title": "Haircut",
"notes": "Get cash on the way",
"rem": 60
}, {
"id": 1008,
"cid": 3,
"start": "2015-03-08T00:00:00-08:00",
"end": "2015-03-10T00:00:00-07:00",
"title": "An old event",
"ad": true
}, {
"id": 1009,
"cid": 2,
"start": "2015-04-05T13:00:00-07:00",
"end": "2015-04-05T18:00:00-07:00",
"title": "Board meeting",
"loc": "ABC Inc.",
"rem": 60
}, {
"id": 1010,
"cid": 3,
"start": "2015-04-05T00:00:00-07:00",
"end": "2015-04-09T23:59:59-07:00",
"title": "Jenny's final exams",
"ad": true
}, {
"id": 1011,
"cid": 1,
"start": "2015-04-09T19:00:00-07:00",
"end": "2015-04-09T23:00:00-07:00",
"title": "Movie night",
"note": "Don't forget the tickets!",
"rem": 60
}]
}
问题在于您的日期格式，希望对您有所帮助，祝您好运 `