PDA

View Full Version : Scheduler View is not display



rushi2440
27 Feb 2012, 12:58 AM
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

]
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


// 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


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

mitchellsimoens
27 Feb 2012, 5:58 AM
You may get faster support by contacting the author directly.

mankz
3 Mar 2012, 5:23 AM
Your initComponent is missing callParent()