PDA

View Full Version : [CLOSED] ext:EventWindow: All fields in window



supera
Apr 16, 2012, 8:37 PM
Hi

I wish all fields in ext:EventWindow (location, notes, reminder)... itīs possible? Or I need create a new window?

Thanks for any help.

Daniil
Apr 16, 2012, 11:04 PM
Hi,

Please click the "Edit Details" link at the bottom on the left.

Example

<%@ Page Language="C#" %>

<%@ 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>Ext.NET v2 Example</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);
}
}
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" Namespace="CompanyX" />
<ext:Viewport runat="server" Layout="FitLayout">
<Items>
<ext:CalendarPanel ID="CalendarPanel1" runat="server">
<EventStore ID="EventStore1" runat="server">
<Events>
<ext:EventModel
Title="My event"
StartDate="2012/4/15"
EndDate="2012/4/15"
CalendarId="1" />
</Events>
</EventStore>
<CalendarStore ID="CalendarStore1" runat="server">
<Calendars>
<ext:CalendarModel CalendarId="1" Title="Home" />
<ext:CalendarModel CalendarId="2" Title="Work" />
<ext:CalendarModel CalendarId="3" Title="School" />
</Calendars>
</CalendarStore>
<Listeners>
<DayClick Fn="CompanyX.dayClick" Scope="CompanyX" />
<EventClick Fn="CompanyX.record.show" Scope="CompanyX" />
</Listeners>
</ext:CalendarPanel>
</Items>
</ext:Viewport>
<ext:EventWindow
ID="EventWindow1"
runat="server"
Hidden="true"
CalendarStoreID="CalendarStore1">
<Listeners>
<EditDetails Fn="CompanyX.record.edit" Scope="CompanyX" />
</Listeners>
</ext:EventWindow>
</form>
</body>
</html>

supera
Apr 17, 2012, 11:52 AM
Yes, I had seen this detail window.

But to have access to all fields, I have to open the Event Window and then click on 'Edit detail' to open Detail Window.

It is precisely this second 'click' I want to avoid.

People are funny ...
one day are making all your processes on paper, with enormous redundancy in information.
In one day after informatization, are fighting the most per unless clicks.

The solution is make a new window? I would like maintain the incredible performance of EventWindow. It's possible with a completely javascript window?

Daniil
Apr 17, 2012, 1:08 PM
Agreed :)

Well, I would override the Ext.calendar.form.EventWindow class.

Please see the "CUSTOMIZATION" comment.

It should help you to start.

Example

<%@ Page Language="C#" %>

<%@ 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>Ext.NET v2 Example</title>

<ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />

<script type="text/javascript">
Ext.calendar.form.EventWindow.override({
constructor: function(config) {
var formPanelCfg = {
xtype: 'form',
fieldDefaults: {
msgTarget: 'side',
labelWidth: 65
},
frame: false,
bodyStyle: 'background:transparent;padding:5px 10px 10px;',
bodyBorder: false,
border: false,
items: [{
itemId: 'title',
name: Ext.calendar.data.EventMappings.Title.name,
fieldLabel: 'Title',
xtype: 'textfield',
anchor: '100%'
},
{
xtype: 'daterangefield',
itemId: 'date-range',
name: 'dates',
anchor: '100%',
fieldLabel: 'When'
}]
};

if (config.calendarStore) {
this.calendarStore = config.calendarStore;
delete config.calendarStore;

formPanelCfg.items.push({
xtype: 'calendarpicker',
itemId: 'calendar',
name: Ext.calendar.data.EventMappings.CalendarId.name,
anchor: '100%',
store: this.calendarStore
});
}

// CUSTOMIZATION

formPanelCfg.items.push({
itemId : 'Location',
name : Ext.calendar.data.EventMappings.Location.name,
fieldLabel : 'Location',
xtype : 'textfield',
anchor : '100%'
});

// END OF CUSTOMIZATION

this.callParent([Ext.apply({
titleTextAdd: 'Add Event',
titleTextEdit: 'Edit Event',
width: 600,
autocreate: true,
border: true,
closeAction: 'hide',
modal: false,
resizable: false,
buttonAlign: 'left',
savingMessage: 'Saving changes...',
deletingMessage: 'Deleting event...',
layout: 'fit',

fbar: [{
xtype: 'tbtext',
text: '<a href="#" id="tblink">Edit Details...</a>'
},
'->', {
text: 'Save',
disabled: false,
handler: this.onSave,
scope: this
},
{
itemId: 'delete-btn',
text: 'Delete',
disabled: false,
handler: this.onDelete,
scope: this,
hideMode: 'offsets'
},
{
text: 'Cancel',
disabled: false,
handler: this.onCancel,
scope: this
}],
items: formPanelCfg
},
config)]);
}
});
</script>

<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);
}
}
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" Namespace="CompanyX" />
<ext:Viewport runat="server" Layout="FitLayout">
<Items>
<ext:CalendarPanel ID="CalendarPanel1" runat="server">
<EventStore ID="EventStore1" runat="server">
<Events>
<ext:EventModel
Title="My event"
StartDate="2012/4/15"
EndDate="2012/4/15"
CalendarId="1"
Location="Some Location" />
</Events>
</EventStore>
<CalendarStore ID="CalendarStore1" runat="server">
<Calendars>
<ext:CalendarModel CalendarId="1" Title="Home" />
<ext:CalendarModel CalendarId="2" Title="Work" />
<ext:CalendarModel CalendarId="3" Title="School" />
<ext:CalendarModel CalendarId="4" Title="Other" />
</Calendars>
</CalendarStore>
<Listeners>
<DayClick Fn="CompanyX.dayClick" Scope="CompanyX" />
<EventClick Fn="CompanyX.record.show" Scope="CompanyX" />
</Listeners>
</ext:CalendarPanel>
</Items>
</ext:Viewport>
<ext:EventWindow
ID="EventWindow1"
runat="server"
Hidden="true"
CalendarStoreID="CalendarStore1">
<Listeners>
<EditDetails Fn="CompanyX.record.edit" Scope="CompanyX" />
</Listeners>
</ext:EventWindow>
</form>
</body>
</html>

supera
Apr 17, 2012, 1:32 PM
Daniil!

Works very Fine. It'll be fantastic ...

Thanks a lot...

Fergus
Aug 01, 2012, 1:10 PM
Hi Danill,
Do you have any idea where i would find this override for Version 1.5.

Thanks
Fergus

Daniil
Aug 01, 2012, 1:58 PM
Do you have any idea where i would find this override for Version 1.5.


Hi Fergus,

I would try this.

Example

<ext:EventEditWindow
ID="EventEditWindow1"
runat="server"
Hidden="true"
GroupStoreID="GroupStore1">
<Listeners>
<BeforeRender Fn="CompanyX.onEditWindowBeforeRender" />
</Listeners>
</ext:EventEditWindow>

<script type="text/javascript">
var CompanyX = {
onEditWindowBeforeRender : function (win) {
var formPanel = win.items.get(0);

formPanel.add({
xtype : "textfield",
fieldLabel: 'Location',
name: Ext.calendar.EventMappings.Location.name,
anchor: '100%'
});
}
};
</script>

Fergus
Aug 04, 2012, 10:20 AM
Hi Daniil,
Thanks for the example. i was able to add controls with this. But what i was hoping for was to override the whole edit event window like the V2 example above so i have control over the whole window like the button names etc.

Thanks

Daniil
Aug 04, 2012, 10:38 AM
Then just copy this file:

<Ext.Net sources root>\Ext.Net\Build\Ext.Net\ux\extensions\calendar\src\ EventEditWindow.js
to, for example, MyEventEditWindow.js and put into the page <head>:

<ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
<script type="text/javascript" src="MyEventEditWindow.js"></script>

Now you can change anything you wish.