Feb 21, 2013, 12:55 AM
CustomField on EventEditWindow, how to pass CustomStore
Dear Sir,
I applied code from solution http://forums.ext.net/showthread.php?21830 by Mimisss.
I have an idea to add CustomField to EventEditWindow 3-4 fields and hide 'Edit details' link. Because some default field in EventDetailWindow unnecessary for my project. Please see the attached picture.
I don't know how to pass CustomStore to customWindow, CustomField does not show any text.
Could you please advice, Thank you.
I applied code from solution http://forums.ext.net/showthread.php?21830 by Mimisss.
I have an idea to add CustomField to EventEditWindow 3-4 fields and hide 'Edit details' link. Because some default field in EventDetailWindow unnecessary for my project. Please see the attached picture.
I don't know how to pass CustomStore to customWindow, CustomField does not show any text.
Could you please advice, Thank you.
<%@ Page Culture="en-IN" Language="C#" AutoEventWireup="true" CodeBehind="mycalendar.aspx.cs" Inherits="KRIS.mycalendar" %>
<%@ 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 id="Head1" runat="server">
<title>Ext.Net Full Custom and Local Calendar</title>
<style type="text/css">
.ext-color-4,
.ext-ie .ext-color-4-ad,
.ext-opera .ext-color-4-ad {
color: #663300;
}
.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: #663300;
}
.ext-color-4-x .ext-cal-evb,
.ext-color-4-x dl {
border-color: #7C3939;
}
</style>
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="ScriptFiles" />
<script src="MyEventRecord.js" type="text/javascript"></script>
<script type="text/javascript">
var CompanyX = {
getCalendar: function() { return CompanyX.CalendarPanel1; },
getStore: function() { return CompanyX.EventStore1; },
getWindow: function() { return CompanyX.EventEditWindow1; },
customWindow: function() {
// event edit window localization
var win = this.getWindow();
var form = win.formPanel;
var titleItem = form.get('title');
dateRangeItem = form.get('date-range');
calendarItem = form.get('calendar');
detailsLnk = win.fbar.get(0);
saveBtn = win.fbar.get(2);
deleteBtn = win.fbar.get(3);
cancelBtn = win.fbar.get(4);
titleItem.fieldLabel = 'Title'; // Title
dateRangeItem.fieldLabel = 'When'; // When
dateRangeItem.toText = 'To'; // to
dateRangeItem.allDayText = 'Is all day'; // Is all day
calendarItem.fieldLabel = 'Job'; // Calendar group
detailsLnk.text = '<a href="#" id="tblink"></a>'; // Edit Details (hide link)
saveBtn.text = 'Save'; // Save button
deleteBtn.text = 'Delete'; // Delete button
cancelBtn.text = 'Cancel'; // Cancel button
var cmb = new Ext.form.ComboBox({
id: 'ComboBox1',
fieldLabel: 'CustomField',
/* store: store, // !!! error, I dont' know how to send CustomerStore to customWindow
dataIndex: 'MyCustomField1',
mode: 'local',
displayField: 'lastname',
valueField: 'id', */
anchor: '90%',
triggerAction: 'all',
selectOnFocus: true,
typeAhead: true
});
form.add(cmb);
// date-range date format
win.get(0).get(1).on('render', function() {
this.startDate.format = 'd-m-Y';
this.endDate.format = 'd-m-Y';
this.startTime.format = 'H:i';
this.endTime.format = 'H:i';
var localTimes = []; // sample: your localized time values for the comboboxes
for (var h = 0; h < 24; h++) {
for (var m = 0; m < 60; m += 15) {
var hh = (h < 10) ? '0' + h : h;
var mm = (m < 15) ? '0' + m : m;
var hm = hh + ':' + mm;
localTimes.push(hm);
}
};
this.startTime.getStore().removeAll(); // empty combobox
this.startTime.getStore().loadData(localTimes); // load your localized time values
this.endTime.getStore().removeAll(); // empty combobox
this.endTime.getStore().loadData(localTimes); // load your localized time values
});
},
viewChange: function(p, vw, dateInfo) {
var win = this.getWindow();
if (win) {
win.hide();
}
if (dateInfo !== null) {
// will be null when switching to the event edit form, so ignore
var msg = '';
if (dateInfo.viewStart.clearTime().getTime() == dateInfo.viewEnd.clearTime().getTime()) {
msg = dateInfo.viewStart.format('F j, Y').toString();
} else if (dateInfo.viewStart.getFullYear() == dateInfo.viewEnd.getFullYear()) {
if (dateInfo.viewStart.getMonth() == dateInfo.viewEnd.getMonth()) {
msg = dateInfo.viewStart.format('F j').toString() + ' - ' + dateInfo.viewEnd.format('j, Y').toString();
} else {
msg = dateInfo.viewStart.format('F j').toString() + ' - ' + dateInfo.viewEnd.format('F j, Y').toString();
}
} else {
msg = dateInfo.viewStart.format('F j, Y').toString() + ' - ' + dateInfo.viewEnd.format('F j, Y').toString();
}
this.CalendarPanel1.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;
// save the event to database and update the event store
CompanyX.record.save(rec);
CompanyX.ShowMsg('Event ' + rec.data.Title + ' was added');
},
update: function(win, rec) {
win.hide();
rec.commit();
// update the event in the database
CompanyX.record.upd(rec);
CompanyX.ShowMsg('Event ' + rec.data.Title + ' was updated');
},
remove: function(win, rec) {
this.getStore().remove(rec);
win.hide();
// remove the event from the database
CompanyX.record.del(rec);
CompanyX.ShowMsg('Event ' + rec.data.Title + ' was deleted');
},
editFormAdd: function(win, rec) {
// called from the eventeditform EventAdd
// save the event to database and update the event store
rec.commit(); // added by Aod47
CompanyX.record.save(rec);
},
editFormUpdate: function(win, rec) {
// called from the eventeditform EventUpdate
// update the event in the database
rec.commit(); // added by Aod47
CompanyX.record.upd(rec);
},
editFormDelete: function(win, rec) {
// called from the eventeditform EventDelete
// delete the event from database
rec.commit(); // added by Aod47
CompanyX.record.del(rec);
},
edit: function(win, rec) {
win.hide();
CompanyX.getCalendar().showEditForm(rec);
},
resize: function(cal, rec) {
rec.commit();
CompanyX.record.upd(rec); // added by Aod47 save record change to database
CompanyX.ShowMsg('resize Event ' + rec.data.Title + ' was updated');
},
move: function(cal, rec) {
rec.commit();
CompanyX.record.upd(rec); // added by Aod47 save record change to database
CompanyX.ShowMsg('move 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);
},
save: function(rec) {
// save the event data to database
Ext.net.DirectMethod.request({
url: "RemoteService3.asmx/Save",
json: true,
cleanRequest: true,
params: {
e: rec.data
},
success: function(result) {
// update record with db-assigned id
rec.data.EventId = result.EventId;
// add to store
CompanyX.getStore().add(rec);
}
});
},
upd: function(rec) {
// update event data in the database
// event data row is found in the database using EventId
Ext.net.DirectEvent.request({
url: "RemoteService3.asmx/Update",
json: true,
cleanRequest: true,
extraParams: { e: rec.data }
});
},
del: function(rec) {
Ext.net.DirectEvent.request({
url: "RemoteService3.asmx/Delete",
json: true,
cleanRequest: true,
extraParams: { e: rec.data }
});
}
}
};
var calendar_beforeRender = function(calendar, store) {
// localize event edit form
var form = calendar.get(calendar.id + '-edit');
form.titleTextAdd = 'form title when add'; // form title when add
form.titleTextEdit = 'form title when edit'; // form title when edit
form.layout = "form"; // form layout
// left col
var lcol = form.get('left-col');
lcol.get(0).fieldLabel = 'Title'; // Title
dateRangeItem = lcol.get(1);
dateRangeItem.fieldLabel = 'When'; // When
dateRangeItem.toText = 'to'; // to
dateRangeItem.allDayText = 'Is all day'; // Is all day
// date-range date format
dateRangeItem.on('render', function () {
this.startDate.format = 'd-m-Y';
this.endDate.format = 'd-m-Y';
this.startTime.format = 'H:i';
this.endTime.format = 'H:i';
var localTimes = []; // sample: your localized time values for the comboboxes
for (var h = 0; h < 24; h++) {
for (var m = 0; m < 60; m += 15) {
var hh = (h < 10) ? '0' + h : h;
var mm = (m < 15) ? '0' + m : m;
var hm = hh + ':' + mm;
localTimes.push(hm);
}
};
this.startTime.getStore().removeAll(); // empty combobox
this.startTime.getStore().loadData(localTimes); // load your localized time values
this.endTime.getStore().removeAll(); // empty combobox
this.endTime.getStore().loadData(localTimes); // load your localized time values
});
lcol.get(2).fieldLabel = 'Job'; // Calendar group
lcol.get(3).fieldLabel = 'Reminder'; // Reminder
// right col
var rcol = form.get('right-col');
rcol.get(0).fieldLabel = 'Notes'; // Notes
rcol.get(1).fieldLabel = 'Location'; // Location
rcol.get(2).fieldLabel = 'Url'; // Url
// footer
form.fbar.get(0).text = 'Save'; // Save
form.fbar.get(1).text = 'Delete'; // Delete
form.fbar.get(2).text = 'Cancel'; // Cancel
// add new fields
// here a data-bound combo is added to the form
// The "customStore" store is decleared in markup and databound in code behind
var cmb = new Ext.form.ComboBox({
id: 'ComboBox1',
fieldLabel: 'CustomField',
store: store,
dataIndex: 'MyCustomField1',
mode: 'local',
displayField: 'lastname',
valueField: 'id',
anchor: '90%',
triggerAction: 'all',
selectOnFocus: true,
typeAhead: true
});
lcol.add(cmb);
};
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" Namespace="CompanyX" Locale="en-IN" />
<ext:Store ID="CustomStore" runat="server">
<Reader>
<ext:JsonReader IDProperty="id">
<Fields>
<ext:RecordField Name="id" Type="Int" />
<ext:RecordField Name="lastname" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:Viewport ID="Viewport1" runat="server" Layout="fit">
<Items>
<ext:CalendarPanel ID="CalendarPanel1" runat="server" BodyBorder="false" Title="..." >
<EventStore ID="EventStore1"
runat="server"
IgnoreExtraFields="false">
</EventStore>
<GroupStore ID="GroupStore1" runat="server">
<Groups>
<ext:Group CalendarId="1" Title="Job 1" />
<ext:Group CalendarId="2" Title="Job 2" />
<ext:Group CalendarId="3" Title="Job 3" />
<ext:Group CalendarId="4" Title="Job 4" />
</Groups>
</GroupStore>
<Listeners>
<ViewChange Fn="CompanyX.viewChange" Scope="CompanyX" />
<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="calendar_beforeRender(this, #{CustomStore});" />
<EventAdd Fn="CompanyX.record.editFormAdd" Scope="CompanyX" />
<EventUpdate Fn="CompanyX.record.editFormUpdate" Scope="CompanyX" />
<EventDelete Fn="CompanyX.record.editFormDelete" Scope="CompanyX" />
</Listeners>
<MonthView ID="MonthView1"
runat="server"
ShowHeader="true"
ShowWeekLinks="true"
ShowWeekNumbers="true"
/>
</ext:CalendarPanel>
</Items>
</ext:Viewport>
<ext:EventEditWindow
ID="EventEditWindow1"
runat="server"
Hidden="true"
GroupStoreID="GroupStore1"
TitleTextAdd="New Event"
TitleTextEdit="Edit Event">
<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" />
<Render Fn="CompanyX.customWindow" Scope="CompanyX" />
</Listeners>
</ext:EventEditWindow>
</form>
</body>
</html>
Last edited by Aod47; Feb 21, 2013 at 12:58 AM.