I have set up an ExtJs calendar. However the store gets loaded 4 times initially even though I have not called the store.load method. I'm just wondering where this is getting called from? As it is also sending start and end dates in the wrong format to the server. i.e. it sends dates in the format m/d/y whilst the server expects d/m/y?
this.eventStore = new Ext.data.JsonStore({
id: 'eventStore',
root: 'Data.items',
proxy: new Ext.data.HttpProxy({
url: AppRootPath + 'Calendar/GetCalendarData',
method: 'POST'
}),//proxy
fields: [
{name:'StartDate', mapping: 'start', type: 'date', dateFormat: 'd F Y'},
{name:'EndDate', mapping: 'end', type: 'date', dateFormat: 'd F Y'},//H:i:s
{name:'Title', mapping: 'title', type: 'string'},
{name:'Notes', mapping: 'notes', type: 'string'},
{name:'CalendarId', mapping: 'cid', type: 'string'}]
});
The Calendar:
this.calendar = new Ext.calendar.CalendarPanel({
activeItem: 2,
id: 'calendar',
eventStore: this.eventStore,
calendarStore: this.calendarStore,
headerCfg: {
tag: 'center',
cls: 'x-panel-header x-unselectable'
},
monthViewCfg: {
showHeader: true,
showWeekLinks: true,
showWeekNumbers: true
},
title: 'My Calendar', // the header of the calendar, could be a subtitle for the app
listeners: {
'eventclick': {
fn: function(vw, rec, el){
alert('#EventClicked');
debugger
},
scope: this
},
'dayclick': {
fn: function(vw, dt, ad, el){
alert('#DayClicked');
},
scope: this
},
'viewchange': {
fn: function(p, vw, dateInfo){
updateTitle.apply(this, [dateInfo.viewStart, dateInfo.viewEnd]);
Ext.getCmp('app-nav-picker' + config.id).setValue(dateInfo.activeDate);
},
scope: this
},
'eventmove': {
fn: function(vw, rec){
rec.commit();
//var time = rec.data.IsAllDay ? '' : ' \\a\\t g:i a';
//this.showMsg('Event '+ rec.data.Title +' was moved to '+rec.data.StartDate.format('F jS'+time));
},
scope: this
}
}
});
I presume the load method is being called from the Calendar-all.js file. However I cant find exactly where?
Can I intercept these load calls to ensure the dates is in the correct format?
This is a bug in the Ext 3.3 example version. Each view load (month / week / day) causes a separate store load call. This (along with lots of other stuff) has been fixed in the Ext Calendar Pro version of the components (examples here). The date format is also configurable in the Pro version via the CalendarView.dateParamFormat config. You can certainly fix those things yourself, but I'd recommend that you try out the Pro version and see if it suits your needs better out of the box.
Yes you can stop that initially loading store at calender.. Its loading even thought we have made it autoload: false.
examples/calendar/src/view/AbstractCalendar.js
Line#717
comment the code
/*this.store.load({
params: {
start: Ext.Date.format(this.viewStart, 'm-d-Y'),
end: Ext.Date.format(this.viewEnd, 'm-d-Y')
}
});*/
now extra loading stop and u can execute store whenever u want. :)
Related
This is the highchart code in angular controller
I am using charts for the first time in angularjs.I want to show data from my mongodb database like on x-axis all the names of tasks and on y-axis the total time required by that particular task to complete i.e- Total Duration.
I have added static data for the html to look like the attached image.
I am developing a project using MEAN Stack.I want to how know how do i add the data i get from database to highcharts.
This is how the output should look without statically giving data:
var tasks = ['Task1','Task2','Task3' ]
var res = [26,61,1]
$scope.chartConfig = {
chart: {
type: 'column'
},
title: {
text: 'Task Duration'
},
xAxis: {
categories: tasks,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Task Duration (Hrs)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span>
<table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">
{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tasks',
data: res
}]
}
Im now studying Sencha Touch 2 and doing some Research on Ext.data.LocalStorage that can be use in Offline Mode.
I tried to follow this turorial
Sencha Touch 2 Local Storage
and just updated the code from Github - RobK/SenchaTouch2-LocalStorageExample or riyaadmiller/LocalStorage and modified Store url using my own WCF Rest
but i cant get LocalStorage working on offline mode.I have no issue on running the app Online. I also tried to debug it on Chrome developer tool but LocalStorage always get 0 data. I used Chrome/Safari Browser and also build the apps as Android using Phonegap build and still not working.
Did I miss something?
Does anyone can provide the details to deal with this Issue.
Below is my code:
Store:
Ext.define('Local.store.News', {
extend:'Ext.data.Store',
config:{
model: 'Local.model.Online',
proxy:
{
type: 'ajax',
extraParams: { //set your parameters here
LookupType: "Phone",
LookupName: ""
},
url: 'MY WCF REST URL',
headers: {
'Content-Type': 'application/json; charset=utf-8'
},
reader:
{
type: 'json'
, totalProperty: "total"
},
writer: { //Use to pass your parameters to WCF
encodeRequest: true,
type: 'json'
}
},
autoLoad: true
}
});
Offline Model:
Ext.define('Local.model.Offline', {
extend: 'Ext.data.Model',
config: {
idProperty: "ID", //erm, primary key
fields: [
{ name: "ID", type: "integer" }, //need an id field else model.phantom won't work correctly
{ name: "LookupName", type: "string" },
{ name: "LookupDescription", type: "string" }
],
identifier:'uuid', // IMPORTANT, needed to avoid console warnings!
proxy: {
type: 'localstorage',
id : 'news'
}
}
});
Online Model:
Ext.define('Local.model.Online', {
extend: 'Ext.data.Model',
config: {
idProperty: "ID", //erm, primary key
fields: [
{ name: "ID", type: "integer" }, //need an id field else model.phantom won't work correctly
{ name: "Name", type: "string" },
{ name: "Description", type: "string" }
]
}
});
Controller:
Ext.define('Local.controller.Core', {
extend : 'Ext.app.Controller',
config : {
refs : {
newsList : '#newsList'
}
},
/**
* Sencha Touch always calls this function as part of the bootstrap process
*/
init : function () {
var onlineStore = Ext.getStore('News'),
localStore = Ext.create('Ext.data.Store', { storeid: "LocalNews",
model: "Local.model.Offline"
}),
me = this;
localStore.load();
/*
* When app is online, store all the records to HTML5 local storage.
* This will be used as a fallback if app is offline more
*/
onlineStore.on('refresh', function (store, records) {
// Get rid of old records, so store can be repopulated with latest details
localStore.getProxy().clear();
store.each(function(record) {
var rec = {
name : record.data.name + ' (from localStorage)' // in a real app you would not update a real field like this!
};
localStore.add(rec);
localStore.sync();
});
});
/*
* If app is offline a Proxy exception will be thrown. If that happens then use
* the fallback / local stoage store instead
*/
onlineStore.getProxy().on('exception', function () {
me.getNewsList().setStore(localStore); //rebind the view to the local store
localStore.load(); // This causes the "loading" mask to disappear
Ext.Msg.alert('Notice', 'You are in offline mode', Ext.emptyFn); //alert the user that they are in offline mode
});
}
});
View:
Ext.define('Local.view.Main', {
extend : 'Ext.List',
config : {
id : 'newsList',
store : 'News',
disableSelection : false,
itemTpl : Ext.create('Ext.XTemplate',
'{Name}-{Description}'
),
items : {
docked : 'top',
xtype : 'titlebar',
title : 'Local Storage List'
}
}
});
Thanks and Regards
1) First of all when you creating record and adding into store, the record fields should match the model fields of that store.
Here you creating record with field name, but Local.model.Offline didn't name field
var rec = {
name : record.data.name + ' (from localStorage)'
};
This is what you need to do within refresh
localStore.getProxy().clear();
// Also remove all existing records from store before adding
localStore.removeAll();
store.each(function(record) {
console.log(record);
var rec = {
ID : record.data.ID,
LookupName : record.data.Name + ' (from localStorage)',
LookupDescription : record.data.Description
};
localStore.add(rec);
});
// Don't sync every time you add record, sync when you finished adding records
localStore.sync();
2) If specify idProperty in model which is using localStorage, then record will not be added into localStorage.
Model
Ext.define('Local.model.Offline', {
extend: 'Ext.data.Model',
config: {
// idProperty removed
fields: [
{ name: "ID", type: "integer" }, //need an id field else model.phantom won't work correctly
{ name: "LookupName", type: "string" },
{ name: "LookupDescription", type: "string" }
],
identifier:'uuid', // IMPORTANT, needed to avoid console warnings!
proxy: {
type: 'localstorage',
id : 'news'
}
}
});
Here is my select field. We can see that the options are SI,American and Imperial
{
xtype: 'selectfield',
flex: 1,
itemId: 'units_Selector',
maxHeight: 50,
label: 'Units',
options: [
{
text: 'SI',
value: 'SI'
},
{
text: 'American',
value: 'American'
},
{
text: 'Imperial',
value: 'Imperial'
}
],
usePicker: false,
listeners: [
{
fn: function(element, eOpts) {
var unit = Ext.getStore('configstore').last().get('Units');
this.suspendEvents();
this.setValue(unit);
this.resumeEvents();
},
event: 'painted'
}
]
},
Here what I see when using my app...
OUPS seems like SI is displayed has International?
FYI - International was the option's name I gave this option at first. I decide to change it but my app seems to disagree with me on this one ....
Here is a console.log() of my selectfield's options
And here is the funniest part, my code.js file to see that it does save to it correctly from sencha architect
Would anyone know how to repair that problem...?
Answer is dumb...
Seriously, if you have multilanguage app... double check you aint modifing the value field -_-< when updating the language (text field).
found the problem by changing the itemId to something else to see who what changing the value of this select field. (Automaticly created an error and gave me a code line to find it)
I want to convert the timestamp to customized date format right after the server returns the data.
I tried to use the "convert" in Ext.data.field : http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Field-cfg-convert
But I cannot make it right. This is my model.
Ext.define('AM.model.Comment',{
extend: 'Ext.data.Model',
fields: [
{ name: 'createdTime', type: 'date', convert:function(v,record){record.parseDate(v,record);}}, // datetime
],
proxy: {
type: 'rest',
url:'../comments',
writer:{
type:'json'
},
reader: {
type: 'json'
}
},
parseDate:function(v,record){
console.log(v); //show 1347465600000
console.log(Ext.Date.format(new Date(v), 'Y-m-d')); //show 2012-09-13
return Ext.Date.format(new Date(v), 'Y-m-d');
}
});
After loading, I checked firebug and found the field "createdTime" is "undefined".
Can someone point out my mistake? Thanks!
I can achieve that without using "convert", just use Ext.Date.format(new Date(v), 'Y-m-d') in other component. But I think it will be better to do that in model. Then every component can always read the right date format as querying it.
I found a solution. Instead of using "convert", I override the getData() method of reader.
Ext.define('AM.model.Comment',{
extend: 'Ext.data.Model',
fields: [
{ name: 'createdTime', type: 'datetime'},
],
proxy: {
type: 'rest',
url:'../comments',
writer:{
type:'json'
},
reader: {
type: 'json',
getData:function(data){
for(i = 0; i < data.length; i++){
data[i].createdTime = Ext.Date.format(new Date(data[i].createdTime), "Y-m-d");
}
return data;
}
}
}
});
If anyone has better solution, please tell me. And I still wonder why "convert" didn't work.If anyone know the reason, please tell me, too. Thanks!
None of there store answers considers the writer? displaying it as formatted date can be easily done by implementing the row's renderer() ... while read/write might require to implement the model's functions. Considering that the conversion factor from PHP to JavaScript time is 1000, while one can omit that part, while representing the time in milliseconds (the rawValue in the example can be either of type integer or of type date):
Ext.define('AM.model.Comment', {
extend: 'Ext.data.Model',
fields: [{
name: 'createdTime',
type: 'DATETIME',
/* .convert() is triggered twice - on read and on write */
convert: function(rawValue, model) {
/* only convert, when rawValue appears to be an integer */
if(parseInt(rawValue) > 0){
return Ext.util.Format.date(new Date(parseInt(rawValue)*1000), 'Y-m-d');
}
/* it's a date already */
else if(typeof(rawValue) == 'object'){
return rawValue;
}
}
}]
});
Not sure if you still care but your Convert solution would work but you're just missing a return. This is what you had.
fields: [
{ name: 'createdTime', type: 'date', convert: function(v, record) {
record.parseDate(v,record);
}}, // datetime
If you look at it you are missing a return in your convert so it should be this
{ name: 'createdTime', type: 'date', convert: function(v,record) {
return record.parseDate(v,record);
}}, // datetime
You can do the mapping in the model. I think the main problem , that you missed 'return' word in 'convert' function.
If it's will not work, try to convert to javascript date before the format
Ext.define('AM.model.Comment',{
extend: 'Ext.data.Model',
fields: [
{
name: 'createdTime', type: '**datetime**', convert:function(v,record){
return Ext.Date.format(new Date(v), 'Y-m-d');
}
},
],
proxy: {
type: 'rest',
url:'../comments',
writer:{
type:'json'
},
reader: {
type: 'json'
}
}
});
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.