Originally Posted by
craig2005
sorry, i don't understand what that is or what you mean.
I meant something like the example below. Please investigate and ask further questions basing on this example.
Example
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
class MyEvent : Event
{
public string Test1 { get; set; }
public string Test2 { get; set; }
}
protected void Page_Load(object sender, EventArgs e)
{
this.CalendarPanel1.EventStore.AddStandardFields();
this.CalendarPanel1.EventStore.Reader[0].Fields.Add(new RecordField("Test1"));
this.CalendarPanel1.EventStore.Reader[0].Fields.Add(new RecordField("Test2"));
if (!X.IsAjaxRequest)
{
Store store = this.CalendarPanel1.EventStore;
store.DataSource = new List<object>
{
new MyEvent()
{
Title = "My event",
CalendarId = 1,
StartDate = DateTime.Now,
EndDate = DateTime.Now.AddDays(1),
EventId = 1,
Test1 = "I'm first",
Test2 = "I'm second"
}
};
store.DataBind();
}
}
</script>
<!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>Ext.Net Example</title>
<script type="text/javascript">
var CompanyX = {
getCalendar: function() {
return CompanyX.CalendarPanel1;
},
getStore: function() {
return CompanyX.EventStore1;
},
getWindow: function() {
return CompanyX.EventEditWindow1;
},
updateTitle: function(startDt, endDt) {
var msg = '';
if (startDt.clearTime().getTime() == endDt.clearTime().getTime()) {
msg = startDt.format('F j, Y');
} else if (startDt.getFullYear() == endDt.getFullYear()) {
if (startDt.getMonth() == endDt.getMonth()) {
msg = startDt.format('F j') + ' - ' + endDt.format('j, Y');
} else {
msg = startDt.format('F j') + ' - ' + endDt.format('F j, Y');
}
} else {
msg = startDt.format('F j, Y') + ' - ' + endDt.format('F j, Y');
}
this.Panel1.setTitle(msg);
},
setStartDate: function(picker, date) {
this.getCalendar().setStartDate(date);
},
rangeSelect: function(cal, dates, callback) {
this.record.show(cal, dates);
this.getWindow().on('hide', callback, cal, { single: true });
},
dayClick: function(cal, dt, allDay, el) {
this.record.show.call(this, cal, {
StartDate: dt,
IsAllDay: allDay
}, el);
},
record: {
add: function(win, rec) {
win.hide();
rec.data.IsNew = false;
CompanyX.getStore().add(rec);
CompanyX.ShowMsg('Event ' + rec.data.Title + ' was added');
},
update: function(win, rec) {
win.hide();
rec.commit();
CompanyX.ShowMsg('Event ' + rec.data.Title + ' was updated');
},
remove: function(win, rec) {
this.getStore().remove(rec);
win.hide();
CompanyX.ShowMsg('Event ' + rec.data.Title + ' was deleted');
},
edit: function(win, rec) {
win.hide();
CompanyX.getCalendar().showEditForm(rec);
},
resize: function(cal, rec) {
rec.commit();
CompanyX.ShowMsg('Event ' + rec.data.Title + ' was updated');
},
move: function(cal, rec) {
rec.commit();
CompanyX.ShowMsg('Event ' + rec.data.Title + ' was moved to ' + rec.data.StartDate.format('F jS' + (rec.data.IsAllDay ? '' : ' \\a\\t g:i a')));
},
show: function(cal, rec, el) {
CompanyX.getWindow().show(rec, el);
},
saveAll: function() {
CompanyX.getStore().submitData();
}
}
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" Namespace="CompanyX" />
<ext:Viewport runat="server" Layout="fit">
<Items>
<ext:CalendarPanel ID="CalendarPanel1" runat="server" Height="500">
<EventStore runat="server" />
<GroupStore ID="GroupStore1" runat="server">
<Groups>
<ext:Group CalendarId="1" Title="Home" />
<ext:Group CalendarId="2" Title="Work" />
<ext:Group CalendarId="3" Title="School" />
<ext:Group CalendarId="4" Title="Other" />
</Groups>
</GroupStore>
<Listeners>
<EventClick Fn="CompanyX.record.show" Scope="CompanyX" />
<DayClick Fn="CompanyX.dayClick" Scope="CompanyX" />
<RangeSelect Fn="CompanyX.rangeSelect" Scope="CompanyX" />
<EventMove Fn="CompanyX.record.move" Scope="CompanyX" />
<EventResize Fn="CompanyX.record.resize" Scope="CompanyX" />
<BeforeRender Handler=" var form = this.get(this.id + '-edit');
form.get('left-col').add({id: 'TextField1', fieldLabel: 'LEFT', xtype:'textfield', dataIndex: 'Test1'});
form.get('right-col').add({id: 'TextField2', fieldLabel: 'RIGHT', xtype:'textfield', dataIndex: 'Test2'});" />
</Listeners>
</ext:CalendarPanel>
</Items>
</ext:Viewport>
<ext:EventEditWindow
ID="EventEditWindow1"
runat="server"
Hidden="true"
GroupStoreID="GroupStore1">
<Listeners>
<EventAdd Fn="CompanyX.record.add" Scope="CompanyX" />
<EventUpdate Fn="CompanyX.record.update" Scope="CompanyX" />
<EditDetails Fn="CompanyX.record.edit" Scope="CompanyX" />
<EventDelete Fn="CompanyX.record.remove" Scope="CompanyX" />
</Listeners>
</ext:EventEditWindow>
</form>
</body>
</html>
