Results 1 to 3 of 3

Thread: Scheduler View is not display

  1. #1
    Sencha User
    Join Date
    Apr 2011
    Location
    Surat, Gujarat, India
    Posts
    126

    Default Scheduler View is not display

    Hi all forum member

    I am working with scheduler. I am using ExtJs 4 an MVC

    I am creating scheduler all my store loads successfully but my scheduler view is not get properly..
    I am getting only blank window.

    My scheduler view is
    Code:
    ]
    Ext.define('gantt.view.schedulermgt.scheduler', {
        extend: 'Ext.window.Window',
        alias: 'widget.Scheduler',
        requires: [
            'gantt.view.schedulermgt.demoScheduler',
            'gantt.view.schedulermgt.demoEditor'
        ],
        initComponent: function() {
            console.log("Init");
            this.scheduler = this.createScheduler();
            this.initStoreEvents();
        },
    
        //Load Stores
        initStoreEvents: function() {
            var s = this.scheduler;
    
            console.log("Enter Store Event");
    
            s.eventStore.on({
                'update': function(store, bookingRecord, operation) {
                    if (operation !== Ext.data.Model.EDIT) return;
    
                    s.getView().getElementFromEventRecord(bookingRecord).addCls('sch-fake-loading');
    
                    // Simulate server delay 1.5 seconds
                    Ext.Function.defer(bookingRecord.commit, 1500, bookingRecord);
                },
    
                add: function(s, rs) {
                    // Pretend it's been sent to server and stored
                    rs[0].commit();
                }
            });
    
            s.resourceStore.on('load', function(rStore) {
    
                // Events piggyback on the resource store load
                s.eventStore.loadData(rStore.proxy.reader.jsonData.tasks);
            });
        },
    
        allowModify: function(s, r) {
            // Don't allow modifications while "fake loading" is happening
            return !r.dirty;
        },
    
        onEventContextMenu: function(s, rec, e) {
            e.stopEvent();
    
            if (!s.ctx) {
                s.ctx = new Ext.menu.Menu({
                    items: [{
                        text: 'Delete event',
                        iconCls: 'icon-delete',
                        handler: function() {
                            s.eventStore.remove(s.ctx.rec);
                        }
    }]
                    });
                }
                s.ctx.rec = rec;
                s.ctx.showAt(e.getXY());
            },
    
            // Don't show tooltip if editor is visible
            beforeTooltipShow: function(s, r) {
                return s.getEventEditor().collapsed;
            },
    
            createScheduler: function() {
                var start = new Date(2011, 1, 7, 8);
    
                var ds = Ext.create("gantt.view.schedulermgt.demoScheduler", {
                    width: 1030,
                    height: 400,
                    renderTo: Ext.getBody(),
                    resourceStore: Ext.create('gantt.store.resourceStore'),
                    eventStore: Ext.create('gantt.store.eventStore'),
                    viewPreset: 'hourAndDay',
    
                    startDate: start,
                    endDate: Sch.util.Date.add(start, Sch.util.Date.HOUR, 10),
    
                    listeners: {
                        eventcontextmenu: this.onEventContextMenu,
                        beforetooltipshow: this.beforeTooltipShow,
                        beforeeventresize: this.allowModify,
                        beforeeventdrag: this.allowModify,
    
                        scope: this
                    }
                });
    
                ds.resourceStore;
                return ds;
            }
        });
    my demoEditor view is
    Code:
    // A simple preconfigured editor plugin
    
    Ext.define('gantt.view.schedulermgt.demoEditor', {
    
        extend: "Sch.plugin.EventEditor",
    
        initComponent: function() {
    
            Ext.apply(this, {
    
                height: 190,
                width: 280,
    
                timeConfig: {
                    minValue: '08:00',
                    maxValue: '18:00'
                },
    
                buttonAlign: 'center',
    
                // panel with form fields
                fieldsPanelConfig: {
                    xtype: 'container',
                    layout: 'card',
                    items: [
                    // form for "Meeting" EventType
                        {
                        EventType: 'Meeting',
                        xtype: 'form',
                        layout: 'hbox',
                        style: 'background:#fff',
                        cls: 'editorpanel',
                        border: false,
    
                        items: [
                                {
                                    xtype: 'container',
                                    cls: 'image-ct',
    
                                    items: this.img = new Ext.Img({
                                        cls: 'profile-image'
                                    }),
                                    width: 100
                                },
                                {
                                    padding: 10,
                                    style: 'background:#fff',
                                    border: false,
                                    flex: 2,
                                   layout: 'anchor',
                                    defaults: {
                                        anchor: '100%'
                                    },
    
                                    items: [
                                        this.titleField = new Ext.form.TextField({
                                            // doesn't work in "defaults" for now (4.0.1)
                                            labelAlign: 'top',
                                            name: 'Title',
                                            fieldLabel: 'Task'
                                        }),
    
                                        this.locationField = new Ext.form.TextField({
                                            // doesn't work in "defaults" for now (4.0.1)
                                            labelAlign: 'top',
                                            name: 'Location',
                                            fieldLabel: 'Location'
                                        })
                                    ]
                                }
                            ]
                    },
                    // eof form for "Meeting" EventType
    
                    // form for "Appointment" EventType
                        {
                        EventType: 'Appointment',
                        xtype: 'form',
                        style: 'background:#fff',
                        cls: 'editorpanel',
                        border: false,
                        padding: 10,
                        layout: {
                            type: 'vbox',
                            align: 'stretch'
                        },
                        items: [
                                new Ext.form.TextField({
                                    // doesn't work in "defaults" for now (4.0.1)
                                    labelAlign: 'top',
                                    name: 'Location',
                                    fieldLabel: 'Location'
                                }),
                                {
                                    xtype: 'combo',
                                    store: ["Dental", "Medical"],
                                    labelAlign: 'top',
                                    name: 'Type',
                                    fieldLabel: 'Type'
                                }
                            ]
                    }
                    // eof form for "Appointment" EventType
                    ]
                }
                // eof panel with form fields
            });
    
            this.on('expand', this.titleField.focus, this.titleField);
            this.callParent();
        },
    
        show: function(eventRecord) {
            var resourceId = eventRecord.getResourceId();
            // Load the image of the resource
            this.img.setSrc(this.schedulerView.resourceStore.getById(resourceId).get('ImgUrl'));
            this.callParent(arguments);
        }
    });
    my demoScheduler view is
    Code:
    Ext.define("gantt.view.schedulermgt.demoScheduler", {
        extend: "Sch.panel.SchedulerGrid",
    
        requires: [
            'gantt.view.schedulermgt.demoEditor',
            'Ext.grid.plugin.CellEditing'
        ],
    
        rowHeight: 34,
        snapToIncrement: true,
        eventBarIconClsField: 'EventType',
    
        eventRenderer: function(item, resourceRec, tplData, row, col, ds) {
            var bookingStart = item.getStartDate();
            tplData.style = 'background-color:' + (resourceRec.get('Color') || 'Coral');
    
            return {
                headerText: Ext.Date.format(bookingStart, this.getDisplayDateFormat()),
                footerText: item.getName()
            };
        },
    
    
        initComponent: function() {
            console.log("Enter demoScheduler");
            Ext.apply(this, {
    
                columns: [
                    { header: 'Staff', sortable: true, width: 80, dataIndex: 'Name', field: new Ext.form.field.Text() },
                    { header: 'Type', sortable: true, width: 120, dataIndex: 'Type', field: new Ext.form.field.ComboBox({
                        store: ['Sales', 'Developer', 'Marketing', 'Product manager'],
                        typeAhead: true,
                        forceSelection: true,
                        triggerAction: 'all',
                        selectOnFocus: true
                    })
                    },
                    { header: 'Task Color', sortable: false, width: 100, dataIndex: 'Color', field: new Ext.form.field.Text() },
                    {
                        xtype: 'actioncolumn',
    
                        sortable: false,
                        align: 'center',
                        tdCls: 'sch-valign',
                        width: 22,
    
                        position: 'right',
    
                        items: [
                            {
                                iconCls: 'delete',
                                tooltip: 'Clear row',
                                scope: this,
                                handler: function(view, rowIndex, colIndex) {
                                    var resourceId = this.resourceStore.getAt(rowIndex).get('Id'),
                                        events = this.getSchedulingView().getEventsInView(),
                                        toRemove = [];
                                    events.each(function(r) {
                                        if (resourceId === r.getResourceId()) {
                                            toRemove.push(r);
                                        }
                                    });
    
                                    this.eventStore.remove(toRemove);
                                }
                            }
                        ]
                    }
                ],
    
                // Specialized body template with header and footer
                eventBodyTemplate: new Ext.Template(
                    '<div class="sch-event-header">{headerText}</div>' +
                    '<div class="sch-event-footer">{footerText}</div>'
                ),
    
                border: true,
                tbar: [
                    {
                        iconCls: 'icon-previous',
                        scale: 'medium',
                        scope: this,
                        handler: function() {
                            this.shiftPrevious();
                        }
                    },
                    {
                        id: 'span3',
                        enableToggle: true,
                        text: 'Select Date...',
                        toggleGroup: 'span',
                        scope: this,
                        menu: Ext.create('Ext.menu.DatePicker', {
                            handler: function(dp, date) {
                                var D = Ext.Date;
                                this.setTimeSpan(D.add(date, D.HOUR, 8), D.add(date, D.HOUR, 18));
                            },
                            scope: this
                        })
                    },
                    '->',
                    {
                        text: 'Horizontal view',
                        pressed: true,
                        enableToggle: true,
                        toggleGroup: 'orientation',
                        iconCls: 'icon-horizontal',
                        scope: this,
                        handler: function() {
                            this.setOrientation('horizontal');
                        }
                    },
                    {
                        text: 'Vertical view',
    
                        enableToggle: true,
                        toggleGroup: 'orientation',
    
                        iconCls: 'icon-vertical',
    
                        scope: this,
                        handler: function() {
                            this.setOrientation('vertical');
                        }
                    },
                    {
                        iconCls: 'icon-cleardatabase',
                        tooltip: 'Clear database',
                        scale: 'medium',
                        scope: this,
                        handler: function() {
                            this.eventStore.removeAll();
                        }
                    },
                    {
                        iconCls: 'icon-next',
                        scale: 'medium',
                        scope: this,
                        handler: function() {
                            this.shiftNext();
                        }
                    }
                ],
    
                tooltipTpl: new Ext.XTemplate(
                    '<dl class="eventTip">',
                        '<dt class="icon-clock">Time</dt><dd>{[Ext.Date.format(values.StartDate, "Y-m-d G:i")]}</dd>',
                        '<dt class="icon-task">Task</dt><dd>{Title}</dd>',
                        '<dt class="icon-earth">Location</dt><dd>{Location}&nbsp;</dd>',
                    '</dl>'
                ).compile(),
    
                plugins: [
                    this.editor = Ext.create("gantt.view.schedulermgt.demoEditor", {
                    // Extra config goes here
                }),
    
                    Ext.create('Ext.grid.plugin.CellEditing', {
                        clicksToEdit: 1
                    })
                ],
    
                onEventCreated: function(newEventRecord) {
                    // Overridden to provide some default values
                    newEventRecord.set('Title', 'New task...');
                    newEventRecord.set('Location', 'Local office');
    
                    newEventRecord.set('EventType', 'Meeting');
                }
            });
            this.callParent(arguments);
        }
    });

    RPKintu
    Sr. Programmer
    Kintudesigns.com

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    You may get faster support by contacting the author directly.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha Premium User mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    3,153
    Answers
    33

    Default

    Your initComponent is missing callParent()

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •