Apr 24, 2014, 6:45 PM
Calendar Control : How to load data into custom field (combobox). in the following example
aspx
EventWindow.js
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Import Namespace="System.Collections.Generic" %>
<script runat="server">
class MyEventModel : EventModel
{
public int ID_PROF { get; set; }
public String RUT { get; set; }
public String NOMBRE_PACIENTE { get; set; }
}
protected void Page_Load(object sender, EventArgs e)
{
Model model = this.CalendarPanel1.EventStore.ModelInstance;
model.Fields.Add(new ModelField("ID_PROF"));
model.Fields.Add(new ModelField("RUT"));
model.Fields.Add(new ModelField("NOMBRE_PACIENTE"));
this.CalendarPanel1.EventStore.Model.Add(model);
if (!X.IsAjaxRequest)
{
EventStore store = this.CalendarPanel1.EventStore;
MyEventModel Meven = new MyEventModel();
Meven.Title = "Cita Morbilidad";
Meven.CalendarId = 1;
Meven.StartDate = DateTime.Now;
Meven.EndDate = DateTime.Now.AddDays(1);
Meven.EventId = 1;
Meven.NOMBRE_PACIENTE = "MARIO PEREZ";
Meven.RUT = "16349273-3";
store.Events.Add(Meven);
}
}
protected void EventStore_SubmitData(object sender, StoreSubmitDataEventArgs e)
{
MyEventModel[] events = JSON.Deserialize<MyEventModel[]>(e.Json);
X.Msg.Alert("Chupaloss", JSON.Serialize(events)).Show();
}
[DirectMethod(Namespace = "CompanyX")]
public void ShowMsg(string msg)
{
X.Msg.Notify("Message", msg).Show();
}
</script>
<script type="text/javascript">
Ext.calendar.template.BoxLayout.override({
getTodayText: function() {
var dt = Ext.Date.format(new Date(), 'l, F j, Y'),
todayText = this.showTodayText !== false ? this.todayText : '',
timeText = this.showTime !== false ? ' <span id="' + this.id + '-clock" class="ext-cal-dtitle-time">' +
//Ext.Date.format(new Date(), 'g:i a') + '</span>' : '',
Ext.Date.format(new Date(), 'H:i') + '</span>' : '',
separator = todayText.length > 0 || timeText.length > 0 ? ' — ' : '';
if (this.dayCount == 1) {
return dt + separator + todayText + timeText;
}
fmt = this.weekCount == 1 ? 'D j' : 'j';
return todayText.length > 0 ? todayText + timeText : Ext.Date.format(new Date(), fmt) + timeText;
}
});
Ext.calendar.view.Month.override({
initClock: function() {
if (Ext.fly(this.id + '-clock') !== null) {
this.prevClockDay = new Date().getDay();
if (this.clockTask) {
Ext.TaskManager.stop(this.clockTask);
}
this.clockTask = Ext.TaskManager.start({
run: function() {
var el = Ext.fly(this.id + '-clock'),
t = new Date();
if (t.getDay() == this.prevClockDay) {
if (el) {
el.update(Ext.Date.format(t, 'g:i a'));
// el.update(Ext.Date.format(t, 'H:i'));
}
}
else {
this.prevClockDay = t.getDay();
this.moveTo(t);
}
},
scope: this,
interval: 1000
});
}
}
});
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Ext.NET v2 Example</title>
<link rel="stylesheet" href="./Shared/resources/css/main.css" />
<script type="text/javascript" src="EventMappings.js"></script>
<script type="text/javascript" src="EventWindow.js"></script>
<script type="text/javascript" src="common.js"></script>
<style>
.ext-color-4, .ext-ie .ext-color-4-ad, .ext-opera .ext-color-4-ad
{
color: #7F0000;
}
.ext-cal-day-col .ext-color-4, .ext-dd-drag-proxy .ext-color-4, .ext-color-4-ad, .ext-color-4-ad .ext-cal-evm, .ext-color-4 .ext-cal-picker-icon, .ext-color-4-x dl, .ext-color-4-x .ext-cal-evb
{
background: #7F0000;
}
.ext-color-4-x .ext-cal-evb, .ext-color-4-x dl
{
border-color: #7C3939;
}
</style>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" Namespace="CompanyX" />
<ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
<Items>
<ext:Panel ID="Panel1" runat="server" Height="35" Border="false" Region="North" Cls="app-header" BodyCls="app-header-content">
</ext:Panel>
<ext:Panel ID="Panel2" runat="server" Title="..." Layout="Border" Region="Center" Cls="app-center">
<Items>
<ext:Panel ID="Panel3" runat="server" Width="176" Region="West" Border="false" Cls="app-west">
<Items>
<ext:DatePicker ID="DatePicker1" runat="server" Cls="ext-cal-nav-picker">
<Listeners>
<Select Fn="CompanyX.setStartDate" Scope="CompanyX" />
</Listeners>
</ext:DatePicker>
</Items>
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="Save All Events" Icon="Disk" Handler="CompanyX.record.saveAll" />
</Items>
</ext:Toolbar>
</TopBar>
</ext:Panel>
<ext:CalendarPanel ID="CalendarPanel1" runat="server" Region="Center" ActiveIndex="2"
Border="false">
<EventStore ID="EventStore1" runat="server" OnSubmitData="EventStore_SubmitData">
<Listeners>
<BeforeSync Handler="return false;" />
</Listeners>
</EventStore>
<DayView ID="DayView1" runat="server" TodayText="Hoy" />
<WeekView ID="WeekView1" runat="server" TodayText="Hoy" />
<MonthView ID="MonthView1" runat="server" TodayText="Hoy" />
<CalendarStore ID="CalendarStore1" runat="server">
<Calendars>
<ext:CalendarModel CalendarId="1" Title="Consulta Ginecologica" />
<ext:CalendarModel CalendarId="2" Title="Control Embarazo" />
<ext:CalendarModel CalendarId="3" Title="Consulta Morbilidad" />
<ext:CalendarModel CalendarId="4" Title="Custom2" />
<ext:CalendarModel CalendarId="5" Title="Custom3" />
<ext:CalendarModel CalendarId="6" Title="Custom4" />
<ext:CalendarModel CalendarId="7" Title="Custom5" />
</Calendars>
</CalendarStore>
<Listeners>
<EventClick Fn="CompanyX.record.show" Scope="CompanyX" />
<DayClick Fn="CompanyX.dayClick" Scope="CompanyX" />
<EventMove Fn="CompanyX.record.move" Scope="CompanyX" />
<EventResize Fn="CompanyX.record.resize" Scope="CompanyX" />
</Listeners>
<Buttons>
<ext:Button ID="Button2" runat="server" Text="Submit" Handler="CompanyX.record.saveAll()" />
</Buttons>
</ext:CalendarPanel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
<ext:EventWindow ID="EventWindow1" runat="server" Hidden="true" CalendarStoreID="CalendarStore1">
<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:EventWindow>
</form>
</body>
</html>
Ext.apply(Ext.calendar.data.EventMappings, {
ID_PROF: {
name: 'ID_PROF',
mapping: 'ID_PROF',
type: 'int'
},
RUT: {
name: 'RUT',
mapping: 'RUT',
type: 'String'
},
NOMBRE_PACIENTE: {
name: 'NOMBRE_PACIENTE',
mapping: 'NOMBRE_PACIENTE',
type: 'String'
}
});
//needs to reconfigure EventModel
Ext.calendar.data.EventModel.reconfigure();EventWindow.js
Ext.calendar.form.EventWindow.override({
constructor: function(config) {
this.callParent(arguments);
var form = this.child("form");
form.add([
{
itemId: 'ID_PROF',
name: Ext.calendar.data.EventMappings.ID_PROF.name,
fieldLabel: 'PROFESIONAL',
xtype: 'combobox', //This field with external data
anchor: '100%'
}, {
itemId: 'RUT',
name: Ext.calendar.data.EventMappings.RUT.name,
fieldLabel: 'RUT',
xtype: 'textfield',
anchor: '100%'
},
{
itemId: 'NOMBRE_PACIENTE',
name: Ext.calendar.data.EventMappings.NOMBRE_PACIENTE.name,
fieldLabel: 'PACIENTE',
xtype: 'textfield',
anchor: '100%'
}
]);
}
});
Last edited by mapperez; Apr 28, 2014 at 4:50 PM.
Reason: No response
