[CLOSED] How I can create a CalendarPanel in client side?

  1. #1

    [CLOSED] How I can create a CalendarPanel in client side?

    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>
    Last edited by Daniil; May 18, 2012 at 5:52 PM. Reason: [CLOSED]
  2. #2
    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>();
    }
  3. #3
    Works fine!

    Thanks a lot, Daniil!

Similar Threads

  1. Replies: 1
    Last Post: Dec 01, 2010, 6:14 PM
  2. How to Create MultiCombo at client side?
    By zhangsir199 in forum 1.x Help
    Replies: 4
    Last Post: Aug 20, 2010, 6:53 AM
  3. Replies: 4
    Last Post: Mar 19, 2010, 12:35 PM
  4. Create Simple Store and Bind to Grid Client-Side?
    By Tbaseflug in forum 1.x Help
    Replies: 4
    Last Post: Oct 30, 2009, 6:27 PM
  5. Replies: 0
    Last Post: Sep 17, 2009, 9:04 AM

Posting Permissions