PDA

View Full Version : [CLOSED] How I can create a CalendarPanel in client side?



supera
May 18, 2012, 3:02 PM
Hi!

I wish create a CalendarPanel in client side (Javascript).

How I can do this? I'm getting this error: 'Run time error: Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class: Ext.calendar.data.MemoryCalendarStore '.

I trying this:



<%@ Page Language="vb" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

<script type="text/javascript">

var CompanyX = {
getCalendar: function () {
return CompanyX.CalendarPanel1;
},
getWindow: function () {
return CompanyX.EventWindow1;
},
dayClick: function (cal, dt, allDay, el) {
this.record.show.call(this, cal, {
StartDate: dt,
IsAllDay: allDay
}, el);
},
record: {
show: function (cal, rec, el) {
CompanyX.getWindow().show(rec, el);
},
edit: function (win, rec) {
win.hide();
rec.commit();
CompanyX.getCalendar().showEditForm(rec);
}
}
};

Ext.onReady(function () {
Ext.create("Ext.net.Viewport", {
id: "Viewport1",
renderTo: Ext.get("Form1"),
items: [{
id: "CalendarPanel1",
xtype: "calendarpanel",
activeItem: 1,
calendarStore: Ext.create("Ext.calendar.data.MemoryCalendarStore", {
storeId: "CalendarStore1",
autoMsg: false,
autoLoad: true,
proxy: {
data: [{
"id": 1,
"title": "Importante",
"desc": null,
"color": 1
}, {
"id": 2,
"title": "Comercial",
"desc": null,
"color": 2
}, {
"id": 3,
"title": "Pessoal",
"desc": null,
"color": 3
}],
type: 'memory'
}
}),
eventStore: Ext.create("Ext.calendar.data.MemoryEventStore", {
storeId: "EventStore1",
autoLoad: true,
proxy: {
data: [{
"title": "My event",
"cid": 1,
"start": "2012-04-17T09:00:00",
"end": "2012-04-17T10:00:00"
}],
type: 'memory'
}
}),
listeners: {
dayclick: {
scope: CompanyX,
fn: CompanyX.dayClick
},
eventclick: {
scope: CompanyX,
fn: CompanyX.record.show
}
}
}],
layout: "fit"
});
Ext.create("Ext.calendar.form.EventWindow", {
id: "EventWindow1",
renderTo: Ext.get("Form1"),
resizable: false,
titleTextAdd: "Adicionar Novo.",
titleTextEdit: "Editar evento",
calendarStore: window.CompanyX.CalendarStore1,
listeners: {
editdetails: {
scope: CompanyX,
fn: CompanyX.record.edit
}
}
});
});
</script>

</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" Namespace="CompanyX" />
<form id="form1" runat="server">
<div>

</div>
</form>
</body>
</html>

Daniil
May 18, 2012, 4:35 PM
Hi,

The CalendarPanel is an extension. So, you need to register its resources manually.

protected void Page_Load(object sender, EventArgs e)
{
ResourceManager.RegisterControlResources<CalendarPanel>();
}

supera
May 18, 2012, 4:51 PM
Works fine!

Thanks a lot, Daniil!