I am getting error when trying to implement Ext js Pro calendar in ext js 4.2
error is Cannot read property 'add' of undefined in line var startDate = Extensible.Date.add(Ext.Date.clearTime(start || new Date(), true)) in AbstarctCalndar.js;
My intail Code is
Ext.Loader.setConfig({
enabled: true,
disableCaching: false,
paths: {
"Extensible": "extjs/src/extensible/src",
"Extensible.example": "extjs/src/extensible/examples"
}
});
Ext.require([
'Extensible.calendar.data.MemoryEventStore',
'Extensible.calendar.CalendarPanel',
'Extensible.example.calendar.data.Events'
]);
Here is simple code in app.js
Ext.onReady(function () {
var eventStore = Ext.create('Extensible.calendar.data.MemoryEventStore', {
// defined in ../data/Events.js
data: [{
"id": 1001,
"CalendarId": 1,
"StartDate": "2015-03-18",
"EndDate": "2015-03-28",
"Title": "Vacation",
"Notes": "Have fun"
}]
});
//
// example 1: simplest possible stand-alone configuration
//
var cal = new Ext.create('Extensible.calendar.CalendarPanel', {
eventStore: eventStore,
title: 'Basic Calendar',
width: 700,
height: 500
});
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: 100,
height : 100,
border : true,
frame : true,
layout: 'auto',// auto is one of the layout type.
items: [cal]
});
});
Please give sample data of Event store data and Calendar Store Data.
Please suggest working code both in MVC and onReady
Related
For some reason calendar doesn't populate json events on mobile devices.
I tried this page using Chrome and Safari for iPhone 7 but it doesn't work properly.
countExtra = 0;
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
defaultDate: '<?=date("Y-m-d")?>',
editable: false,
navLinks: true, // can click day/week names to navigate views
eventLimit: true, // allow "more" link when too many events
events: {
url: '/wp-content/themes/bridge-child/calendar/routines.php?categories=<?=$_GET["categories"]?>&q=<?=$_GET["q"]?>',
failure: function() {
jQuery("#errorMessage").css("display", "block");
}
},
loading: function(bool) {
document.getElementById('loading').style.display = bool ? 'block' : 'none';
}
});
calendar.render();
});
```javascript
I don't see any error messages.
SOLUTION:
For some reason Safari is conflicting with the date format so I had to change 2019-01-01 10:00:00 to 2019-01-01T10:00:00
Just add a T between the date and time.
After that, Safari and all mobile browsers started working :)
need your help on the following problem. I have an Extjs application, and I need to get some data from database at the begining of all, I mean, before everything loads (mostly views). This is because this data I need to load will be used to create a form in a specific view.
So the question is: where should I put the function that gets the data and stores it in a global variable? I tried to put that function in launch function on app.js, but the behavior is weird (sometimes loads the data before the view renders, and sometimes does it after).
Please see above the code:
Function that gets the data (placed in App.js and invoked inside launch function):
cargarItemsEvaluacion: function()
{
AppGlobals.itemsCargarFormEvaluacion = [];
Ext.Ajax.request(
{
url : 'app/proxy.evaluacion.php',
method: 'GET',
params :{
act: 'getEvalItemsForm'
},
success : function(response)
{
var obj = Ext.decode(response.responseText);
Ext.each(obj.results, function(item)
{
//console.log(item);
var tempItem = {
xtype: 'container',
layout: 'anchor',
flex: 1,
items: [
{
//xtype: 'fieldset',
title: item.nombre,
items: [
{
id: 'item_'+item.id,
xtype: 'textfield',
fieldLabel: item.descripcion,
name: 'item_'+item.id,
allowBlank: false,
blankText: 'Este campo es obligatorio',
maskRe: /^[0-9]{1}/,
maxLenght: 2,
validateOnChange: 'true',
emptyText: 'Nota (1 al 10)',
submitEmptyText: false,
validator: function(value)
{
if(value.length>2 || value>10)
{
return 'Complete con nota del 1 al 10';
}
var stringPad=/^[1-9]{1}[0-9]{0,1}/;
if (!stringPad.test(value))
{
return 'Complete con nota del 1 al 10';
}
else
{
return true;
}
}
}]
}]
};
AppGlobals.itemsCargarFormEvaluacion.push(tempItem);
});//End Ext.each
if(AppGlobals.itemsCargarFormEvaluacion.length>0)
{
var itemObservacion = {
xtype: 'container',
layout: 'anchor',
flex: 1,
items: [
{
title: 'Observaciones',
items: [
/*{
id: 'ascenso',
xtype: 'checkbox',
boxLabel: 'Recomienda ascenso',
name: 'ascenso'
},*/
{
id: 'observaciones',
xtype: 'textareafield',
grow: true,
fieldLabel: 'Agregue observaciones adicionales si lo cree necesario',
name: 'observaciones',
labelAlign: 'top'
}
]
}]
};
AppGlobals.itemsCargarFormEvaluacion.push(itemObservacion);
}
console.log(AppGlobals.itemsCargarFormEvaluacion);
},
failure: function(response)
{
var obj = Ext.decode(response.responseText);
console.log("Entra al failure "+response.responseText);
//Ext.example.msg("Error", "No se pudo comprobar si es posible cargar al evaluador. Error: "+obj.error);
}
});//End Ext.ajax
}
And this is the initComponent function on the view where I need to generate the form using the data I got from the previous function:
initComponent: function(){
var formEvaluacion = this.items[0];
if(AppGlobals.itemsCargarFormEvaluacion.length==0)
{
console.log("Data still no loaded");
}
else
{
console.log("Data loaded!");
}
console.log(AppGlobals.itemsCargarFormEvaluacion);
Ext.apply(formEvaluacion,{items: AppGlobals.itemsCargarFormEvaluacion});
this.callParent(arguments);
}
As you can see, I check if the data loads before the view renders, or after. And sometimes does it before, sometimes after...I don't know what it depends on...
Any help will be appreciated.
Mauro
Think I found the solution. I placed cargarItemsEvaluacion function into init function on app.js. Seem to be working so far.
Thanks!
Hello I have a window with tools. I have the tool: 'help', and when clicking on it I want it to output a tooltip with text from my HTML file, but actually it shows alert('Help'), and it doesn't output from the file:
tools: [
{
type: 'refresh',
name: 'refresh',
tooltip: 'reload'
},
{
type: 'help',
handler: function (event, toolEl, panel) {
alert('Help');
var tooltips = [{
target: 'tip1',
html: 'A very simple tooltip'
}, {
target: 'ajax-tip',
width: 200,
autoLoad: {url: '/help/note/help.html'},
dismissDelay: 15000 // auto hide after 15 seconds
},
];
Ext.each(tooltips, function (config) {
Ext.create('Ext.tip.ToolTip', config);
});
},
}
]
This picture shows what I actually want:
You need to load the html file in an Ajay request from server and then create the tooltip in the success callback.
Ext.Ajax.request({
url: '/help/note/help.html',
success: function(response){
// in the success callback you get the html text in the response.responseText
// and then you can create a tooltip with the content of it
}
});
So you can do the following in the callback
var html = response.responseText;
var tooltip = {
target: 'ajax-tip',
width: 200,
html: html,
dismissDelay: 15000 // auto hide after 15 seconds
};
The full code should be
{
type: 'help',
handler: function (event, toolEl, panel) {
Ext.Ajax.request({
url: '/help/note/help.html',
success: function (response) {
var html = response.responseText;
var tooltip = {
target: 'ajax-tip',
width: 200,
html: html,
dismissDelay: 15000 // auto hide after 15 seconds
};
Ext.create('Ext.tip.ToolTip', tooltip);
}
});
}
}
I checked out some other questions posted previously but couldn't find a relevant answer. So here I am posting again: Here's my code:
Ext.create('Rally.data.WsapiDataStore',{
autoLoad: true,
model: 'HierarchicalRequirement',
limit: '500',
fetch: ['ObjectID','DirectChildrenCount','FormattedID'],
filters:[{property: 'DirectChildrenCount', operator: '=', value: 0}], //tried both "0",'0'
listeners: {
load: function(store,data,success){
var data_length = data.length;
console.log("Number = ", data);
}
}
});
Result is an empty array. Furthermore, the result did not contain the field "DirectChildrenCount" at all, even though I am fetching it.
I tried your code without any changes, and it returned 300+ items. DirectChildrenCount was included in the result. It was tested against "2.0rc2" and "2.0rc1" with the same result. Here is screenshot from Chrome's DevTools:
Here is another short app where a grid of stories updated since yesterday is built, filtered by the same condition.
{property: 'DirectChildrenCount', operator: '=', value: 0}
js file is below:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
var millisecondsInDay = 86400000;
var currentDate = new Date();
var startDate = new Date(currentDate - millisecondsInDay);
var startDateUTC = startDate.toISOString();
Rally.data.ModelFactory.getModel({
type: 'UserStory',
success: function(model) {
this.grid = this.add({
xtype: 'rallygrid',
itemId: 'grid',
model: model,
columnCfgs: [
'FormattedID',
'Name',
'Owner',
'LastUpdateDate'
],
storeConfig: {
filters: [
{
property: 'LastUpdateDate',
operator: '>',
value: startDateUTC
},
{
property: 'DirectChildrenCount',
operator: '=',
value: 0
},
]
}
});
},
scope: this
});
console.log('items updated since', startDateUTC);
}
});
I have been trying to set up a baisc calendar example to play around with using ExtJs Calendar.
I have looked at examples and documentation on
Ext Calendar Pro.
I am having difficulty just getting the basic calendar example to work.
I think my problem is that I am not defining the store correctly, I know that the store should contain records of type 'Ext.calendar.EventRecord'.
What type of store/reader should i use to read records?
Here is my code:
var recs = [];
rec = new Ext.calendar.EventRecord({
StartDate: '2101-01-12 12:00:00',
EndDate: '2101-01-12 13:30:00',
Title: 'My cool event',
Notes: 'Some notes'
});
recs[0] = rec;
store = new Ext.data.Store({
data: recs,
reader: new Ext.data.ArrayReader({
fields: ['StartDate', 'EndDate', 'Title', 'Notes']
})
});
Ext.apply(this, config, {
title: 'calendar',
layout: 'fit',
activeItem: 1,
eventStore: store
});//Ext.apply
Looking at this example, it looks like you need to be using a JsonStore (which has a JsonReader):
new Ext.data.JsonStore({
id: 'eventStore',
root: 'evts',
data: eventList, // defined in event-list.js
proxy: new Ext.data.MemoryProxy(),
fields: Ext.calendar.EventRecord.prototype.fields.getRange(),
sortInfo: {
field: 'StartDate',
direction: 'ASC'
}
});
With eventList defined as follows:
var eventList = {
"evts": [{
"id": 1001,
"cid": 1,
"title": "Vacation",
"start": today.add(Date.DAY, -20).add(Date.HOUR, 10),
"end": today.add(Date.DAY, -10).add(Date.HOUR, 15),
"ad": false,
"notes": "Have fun"
}]
}
If you're using a remote provider, simply change your data property in the EventStore to load from a url instead. Your JSON response should be in a structure as defined by eventList.
Hope that helps.