PDA

View Full Version : calender in extjs 3.3.1



dpalankar@apsora.com
15 Dec 2011, 11:30 PM
Hello,

I am trying to do customize calender in Extjs 3.3.1, i have given call to proxy to retrieve
events from database and set to eventstore but it do not show on ui, how to reconfigure calenderpanel or how to resolved issue.

following is code for calender.



var calendarmainpanel;
var calendarWindow;
var eventListReader;
var commonCalenderDetailReader;
var commonCalenderDetailStore;
//var eventList
function ShowCalenderUI()
{
if(!calendarWindow)
{
GetCommonCalenderDetail();
eventListCall();

calendarWindow = new Ext.Window({
// region:'center',
layout: 'fit',
resizable:true,
closeAction:'hide',
closable:false,
height: 500,
width: 700,
//renderTo: 'Calender_Id',
renderTo: 'planMainPanel',
constrain:true,
modal:true,
id:'calendarWindowId',
items:[calendarmainpanel]
});// End of the definition of window

calendarmainpanel.doLayout();
}
calendarWindow.show();
// return calendarWindow;
}// end of function definition

var eventList = [
{
name: 'ad'
},
{
name: 'cid'
},
{
name: 'createdOn'
},
{
name: 'enclavezId'
},
{
name: 'end'
},
{
name: 'id'
},
{
name: 'name'
},
{
name: 'notes'
},
{
name: 'ownerId'
},
{
name: 'personalCalendarId'
},
{
name: 'rem'
},
{
name: 'start'
},
{
name: 'title'
},
{
name: 'url'
}];
// eventList

function eventListCall()
{
eventListReader = new Ext.data.JsonReader({
root: 'evts',
data: eventList
});
Ext.calendar.CalendarPanel.data.EventModel.reconfigure();
//this.eventStore.clearData();
this.eventStore = new Ext.data.Store({
id: 'eventStoreId',
restful:true,
method:'GET',
autoLoad: true,
reader:eventListReader,
sortInfo: {
field: 'createdOn',
direction: 'ASC'
}
});

var memberId = 3389;//loginResponseBean.authenticationToken.memberId;
var enclaveId = 1368;//loginResponseBean.authenticationToken.enclaveId;

var proxy = new Ext.data.HttpProxy({
method: 'GET',
url: RESOURCE_PATH+'/calendarService/'+memberId+'/'+enclaveId
});

this.eventStore.proxy = proxy;

this.eventStore.load({
callback:function(){
// alert(eventStore.reader.jsonData.evts[0].cid);
//
// if(eventStore.reader.jsonData.evts.length > 0)
// {
// Ext.calendar.CalendarPanel.superclass.initComponent.call(calendarmainpanel);
//
// }
}
})
}
App = function() {
alert("Calender");
return {
init : function() {

Ext.BLANK_IMAGE_URL = 'http://extjs.cachefly.net/ext-3.1.0/resources/images/default/s.gif';

// This is an example calendar store that enables the events to have
// different colors based on CalendarId. This is not a fully-implmented
// multi-calendar implementation, which is beyond the scope of this sample app
this.calendarStore = new Ext.data.JsonStore({
storeId: 'calendarStore',
root: 'calendars',
idProperty: 'id',
data: calendarList, // defined in calendar-list.js
proxy: new Ext.data.MemoryProxy(),
autoLoad: true,
fields: [
{
name:'CalendarId',
mapping: 'id',
type: 'int'
},

{
name:'Title',
mapping: 'title',
type: 'string'
}
],
sortInfo: {
field: 'CalendarId',
direction: 'ASC'
}
});

if(loginResponseBean == undefined )
{
this.eventStore = new Ext.data.JsonStore({
id: 'eventStore',
// root: 'evts',
// data: eventList, // defined in event-list.js
reader:eventListReader,
proxy: new Ext.data.MemoryProxy(),
// fields: Ext.calendar.EventRecord.prototype.fields.getRange(),
sortInfo: {
field: 'createdOn',
direction: 'ASC'
}
});
}

calendarmainpanel = new Ext.Panel({
layout: 'border',
width:700,
height: 500,
// renderTo: 'Calender_Id',
id:'calendarpanelID',
items: [{
id: 'app-header',
region: 'north',
height: 35,
border: false,
contentEl: 'app-header-content'
},{
id: 'app-center',
title: '...', // will be updated to view date range
region: 'center',
layout: 'border',
items: [{
id:'app-west',
region: 'west',
width: 176,
border: false,
items: [{
xtype: 'datepicker',
id: 'app-nav-picker',
cls: 'ext-cal-nav-picker',
listeners: {
'select': {
fn: function(dp, dt){
App.calendarPanel.setStartDate(dt);
},
scope: this
}
}
}]
},{
xtype: 'calendarpanel',
eventStore: this.eventStore,
calendarStore: this.calendarStore,
border: false,
id:'app-calendar',
region: 'center',
activeItem: 2, // month view

// CalendarPanel supports view-specific configs that are passed through to the
// underlying views to make configuration possible without explicitly having to
// create those views at this level:
monthViewCfg: {
showHeader: true,
showWeekLinks: true,
showWeekNumbers: true
},


Thanks,
Deepak.

tobiu
16 Dec 2011, 2:05 AM
please do not post the same topic multiple times, use code tags and use the correct forum (ext js 3) in this case.