Show cool things you have done with our products


Post by mats »

Hmm, Ext version? I'd probably need to see some code to be able to debug this...

Post by omermx »

3.2.1- have you been able to reproduce the error?

Post by omermx »

Actually think that line of code is redundant as I'm using msgTarget:'qtip'. Can't even remember what it does! Thanks for your help.

Post by mats »

So all works ok now? :)

Post by omermx »

Not quite, still having trouble - can you please post the editor example without all the functions. I just can't seem to add the extra bits, since everything is encapsulated in the bootstrap function and other sub-function calls it's not clear where everything goes/or how to set certain values.

Thanks!

Post by mats »

Here it is:
Ext.ns('App');


Ext.onReady(function() {
    Ext.BLANK_IMAGE_URL = 'https://extjs.cachefly.net/ext-3.1.0/resources/images/default/s.gif';
    Ext.QuickTips.init();
    
    
    
     // Store holding all the resources
    var resourceStore = new Ext.data.JsonStore({
        sortInfo:{field: 'Id', direction: "ASC"},
        idProperty : 'Id',
        fields : [
            'Id', 
            'Name',
            'Type'
        ]
    });
    
    // Store holding all the events
    var eventStore = new Ext.data.JsonStore({
        sortInfo:{field: 'ResourceId', direction: "ASC"},
        fields : [
            {name: 'ResourceId'},
            {name: 'Title'},
            {name: 'StartDate', type : 'date'},
            {name: 'EndDate', type : 'date'},
            'Location'
        ]
    });
    
    
    var titleField = new Ext.form.TextField({
            name : 'Title',
            fieldLabel : 'Task'
        }),
        locationField = new Ext.form.TextField({
            name : 'Location',
            fieldLabel : 'Location'
        }), 
        editor = new Sch.plugins.EventEditor({
            height : 180,
            width : 270,
            buttonAlign : 'left',
            saveHandler : onSave,
            saveHandlerScope : this,
            fieldsPanelConfig : {
                layout : 'form',
                style:'background:#fff',
                border : false,
                cls : 'editorpanel',
                labelAlign : 'top',
                defaults : {
                    width : 135
                },
                items : [
                    titleField,
                    locationField
                ]
            },
            listeners : {
                expand : function() {
                    titleField.focus(true);
                }
            }
        });
    
   
    resourceStore.loadData([
        {
            Id : 'a',
            Name : 'Rob',
            Type : 'Sales'
        },
        {
            Id : 'b',
            Name : 'Mike',
            Type : 'Sales'
        },
        {
            Id : 'c',
            Name : 'Kate',
            Type : 'Product manager'
        },
        {
            Id : 'd',
            Name : 'Lisa',
            Type : 'Developer'
        },
        {
            Id : 'e',
            Name : 'Dave',
            Type : 'Developer'
        },
        {
            Id : 'f',
            Name : 'Arnold',
            Type : 'Developer'
        },
        {
            Id : 'g',
            Name : 'Lee',
            Type : 'Marketing'
        },
        {
            Id : 'h',
            Name : 'Jong',
            Type : 'Marketing'
        }
        
    ]);
    
    
    function onSave (formPanel, newStart, newEnd, record) {
        record.beginEdit();
        formPanel.getForm().updateRecord(record);
        record.set('StartDate', newStart);
        record.set('EndDate', newEnd);
        record.endEdit();
        
        record.commit();
        formPanel.collapse();
    }
    
    function renderer(item, resourceRec, row, col, ds) {
        var bookingStart = item.get('StartDate');
        
        return {
            headerText : bookingStart.format("G:i"),
            footerText : item.get('Title') || ' '
        };
    }
    
    var start = new Date();
    
    start.clearTime();
    start.setHours(6);
    
    var g = new Sch.EditorSchedulerPanel({
        width : 1000,
        height:400,
        renderTo : Ext.getBody(),
        clicksToEdit : 1,
        columns : [
            {header : 'Staff', sortable:true, width:130, dataIndex : 'Name', editor : new Ext.form.TextField()},
            {header : 'Type', sortable:true, width:140, dataIndex : 'Type', editor : new Ext.form.ComboBox({
                store: ['Sales', 'Developer', 'Marketing', 'Product manager'],
                typeAhead: true,
                forceSelection: true,
                triggerAction: 'all',
                selectOnFocus:true
            })}
        ],
        
         // Setup view configuration
        viewModel : {
            start : start,
            end : start.add(Date.HOUR, 12),
            columnType : 'hourAndDay',
            viewBehaviour : Sch.ViewBehaviour.HourView,
            renderer : renderer
        },     
        
        // Specialized template with header and footer
        eventTemplate : new Ext.Template(
            '<div id="{id}" style="width:{width}px;left:{leftOffset}px" class="sch-event {cls}">' +
                '<div class="sch-event-inner">' + 
                   '<span class="sch-event-header">{headerText}</span>' + 
                   '<div class="sch-event-footer">{footerText}</div>' + 
               '</div>' + 
                String.format(Sch.SchedulerPanel.prototype.resizeHandleHtml, 'east'),
            '</div>').compile(),
                
        viewConfig: {
            forceFit:true
        },
        
        store : resourceStore,
        eventStore : eventStore,
        border : true,
        
        plugins : [ editor ],
        listeners : {
            dragcreateend : {
                fn : function(p, data, e) {
                    var newRec = new eventStore.recordType({
                        Title: 'New task', 
                        ResourceId : data.record.get('Id'),
                        Location : 'Local office',
                        StartDate : data.startDate,
                        EndDate : data.endDate
                    });
                    
                    eventStore.add(newRec);
                    
                    // Enter edit mode right away
                    editor.show(newRec);
                },
                scope : this
            }
        },
        
        trackMouseOver : false
    });
});

Post by omermx »

Ok, that works, one last thing the time is not displaying correctly (see image). I'm pretty sure all correct css/js files have been imported.

Thanks.
Attachments
editor.jpg
editor.jpg (56.57 KiB) Viewed 7179 times

Post by mats »

Any chance you're running that in a Microsoft environment, say ASP.NET? :)

Post by omermx »

OS is windows, but running on Apache

Post by mats »

Are you including any other JavaScript files in your page?

Post Reply