Show cool things you have done with our products


Post by omermx »

Hi, The getting started doc mentions that one can extend this static class - I know there is DayView behaviour "quarterMinutes" what about an interval every ten mins?

thanks.

Post by mats »

Creating custom column types is pretty easy. I think there are a couple of threads discussing this in the Help section, search for columnfactory and I think you should find some useful details. Let me know if you need assistance.

Post by omermx »

Okay, should have searched first - based on previous posts....

How would I apply:
Sch.ColumnFactory.defaults.width = 50;
It doesn't seem to work in an Ext.Apply/override block.

Also I have the same problem with the width and no horizontal scroll bar, I tried to add this to by EditorPanel:
view: new Sch.LockingGroupingSchedulerView({
                showGroupName : false,
                hideGroupedColumn : true
            }),
But an error is thrown in firebug:
  • this.cm.getTotalLockedWidth is not a function
    [Break on this error] var _0xd396=["\x43\x2E\x31\x49\x28\x27...396[3][_0xd396[2]](_0xd396[1]),0,{}));
Here's the full listing:
    var x = new Sch.EditorSchedulerPanel({
        autoWidth:true,
        height:400,
        renderTo : Ext.getBody(),
        clicksToEdit : 1,
        view: new Sch.LockingGroupingSchedulerView({
                showGroupName : false,
                hideGroupedColumn : true
            }),
        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', 'Optom', 'Dispensing', 'Receptionist'],
                typeAhead: true,
                forceSelection: true,
                triggerAction: 'all',
                selectOnFocus:true
            })}
        ],
        
         // Setup view configuration
        viewModel : {
            start : start,
            end : start.add(Date.HOUR, 10),
            columnType : 'quarterMinutes2',
            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,
            tbar : [
                {
                    iconCls : 'icon-prev',
                    scale : 'medium',
                    handler : function() {
                        var start = x.getStart(), end=x.getEnd();
                        
                        if (Ext.getCmp('span3').pressed) {
                            start = start.add(Date.WEEK, -6);
                            end = end.add(Date.WEEK, -6);
                        } else {
                            var days = Math.max(Date.getDurationInDays(start, end), 1);
                            start = start.add(Date.DAY, -days);
                            end = end.add(Date.DAY, -days);
                        }
                            
                        x.setView(start, end);
                    }
                },
				{
                    id : 'span0',
                    pressed: true,
                    enableToggle : true,
                    toggleGroup: 'span',
                    inputValue: 'red',
				    text : '15 minutes',
                    handler : function() {
                        var s = x.getStart();
                        s.clearTime();
                        s.setHours(9);
                        var e = s.add(Date.HOUR, 10);
                        x.setView(s, e, 'quarterMinutes2', Sch.ViewBehaviour.HourView, this.renderer);
                    }
                },
                {
                    id : 'span1',
                    pressed: false,
                    text: '1 Day',
                    enableToggle : true,
                    toggleGroup: 'span',
                    inputValue: 'red',
                    handler : function() {
                        var start = x.getStart();
                        start.clearTime();
                        start.setHours(9);
                        x.setView(start, start.add(Date.HOUR, 10), 'hourAndDay', Sch.ViewBehaviour.HourView, this.renderer);
                    }
                },
                '            ',
                {
                    id : 'span2',
                    enableToggle : true,
                    text: '1 week',
                    toggleGroup: 'span',
                    handler : function() {
                        x.setView(x.getStart(), x.getStart().add(Date.DAY, 7), 'dayAndWeeks', Sch.ViewBehaviour.DayView, this.renderer);
                    }
                },
                '            ',
                {
                    id : 'span3',
                    enableToggle : true,
                    text: '6 weeks',
                    toggleGroup: 'span',
                    handler : function() {
                        x.setView(x.getStart(), x.getStart().add(Date.DAY, 42), 'weekAndMonths', Sch.ViewBehaviour.MonthView, this.renderer);
                    }
                },
                '->',
                {
                    iconCls : 'icon-cleardatabase',
                    tooltip: 'Clear database',
                    scale : 'medium',
                    handler : function() {
                        x.eventStore.removeAll();
                    }
                },
                {
                    iconCls : 'icon-next',
                    scale : 'medium',
                    handler : function() {
                        var start = x.getStart(), end=x.getEnd();
                        
                        if (Ext.getCmp('span3').pressed) {
                            start = start.add(Date.WEEK, 6);
                            end = end.add(Date.WEEK, 6);
                        } else {
                            var days = Math.max(Date.getDurationInDays(start, end), 1);
                            start = start.add(Date.DAY, days);
                            end = end.add(Date.DAY, days);
                        }
                            
                        x.setView(start,end);
                    }
                }
            ],
		
		tooltipTpl : new Ext.XTemplate(
                '<dl class="eventTip">', 
                    '<dt class="icon-clock">Time</dt><dd>{[values.StartDate.format("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 : [ 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
    });

Any thoughts?

Thanks!

Post by mats »

To use the scrollable Locking View, you need to use a special column model too. See the code in the example http://ext-scheduler.com/examples/local/local.js
// Setup your static columns
            colModel : new Ext.ux.grid.LockingColumnModel({
                columns : [
                   {header : 'Machines', sortable:true, width:140, dataIndex : 'Name', locked:true, renderer : function(v, m, r) {
                      m.css = r.get('Category');
                      return v;
                   }}
                ]
            }),
Does that get it working?

Post by omermx »

Nope, throws an error:

this.grid.store.getGroupState is not a function
[Break on this error] var _0xd396=["\x43\x2E\x31\x49\x28\x27...396[3][_0xd396[2]](_0xd396[1]),0,{}));

Post by mats »

Sounds like you're using a GroupingView with a regular store. Such a view requires a groupingstore, see the locking-grouping example: http://ext-scheduler.com/examples/locki ... rouping.js
var resourceStore = new Ext.data.GroupingStore({
            groupField : 'Category',
            sortInfo:{field: 'Id', direction: "ASC"},
            reader : new Ext.data.JsonReader({
                    idProperty : 'Id'
                }, [
                    'Id', 
                    'Category',
                    'Name'
                ]
            ),
            data : data
        });


Post by omermx »

Ok made those changes and my time display has vanished?
Attachments
Untitled.jpg
Untitled.jpg (32.28 KiB) Viewed 9226 times

Post by mats »

Are you including

<link href="https://extjs.cachefly.net/ext-3.1.1/exa ... idView.css" rel="stylesheet" type="text/css" />
?

Post by omermx »

Yep, it was missing - thanks for your help!

Post Reply