We Keep Coding

Bryntum Calendar recurance Extjs with google icalendar

I'm using Extjs Bryntum Calendar to create events and want to save them as google ics file and load events again into Sch calendar.
Can any body tell how to convert from Cal.model.Event to ical events and vice versa?
data come from api as ical data.
my code IS:
resource store:
Ext.define('my.store.CalendarResource', {
extend: 'Cal.data.ResourceStore',
storeId: 'resource',
// proxy: 'memory',
model:'my.model.CalendarResource',
proxy: {
type: 'rest',
url: 'api/calendars/scheduler'
},
});
resource model:
Ext.define('my.model.CalendarResource', {
extend : 'Cal.model.Resource',
fields: [{
name: 'Id',
type:'string'
}, {
name: 'Name',
type: 'string'
}, {
name: 'Color',
type: 'string'
}, {
name: 'data'
}]
});
calendar view
Ext.define('my.view.RecurrenceCalendar', {
extend : 'Cal.panel.Calendar',
xtype : 'recurrencecalendar',
requires : [
'Sch.data.util.recurrence.Legend',
'my.store.CalendarEvent',
'my.store.CalendarResource'
],
date : new Date(),
eventStore : 'event',
resourceStore : 'resource',
// show the resource filter
resourceFilter : {
dock : 'right'
},
// Uncomment the below line to disable the recurring events feature
// recurringEvents : false,
initComponent : function () {
var me = this;
Ext.apply(me, {
eventRenderer : function (eventRecord, resourceRecord, tplData) {
var legend = '';
if (me.recurringEvents && eventRecord.getRecurrence()) {
legend = Sch.data.util.recurrence.Legend.getLegend(eventRecord.getRecurrence(), eventRecord.getStartDate());
}
return eventRecord.getName() + (legend ? ' | ' + legend : '');
},
beforeeventadd : function (me, eventRecord, resources, eOpts) {
var resourceStore = me.getResourceStore();
alert('aaaaaaa')
}
});
me.on('eventclick', function ( view, record, e ) {
var el = e.getTarget(me.getSchedulingView().eventSelector, 10, true);
me.editor.edit(record, el);
});
me.on('eventdbclick', function ( view, record, e ) {
var el = e.getTarget(me.getSchedulingView().eventSelector, 10, true);
me.editor.edit(record, el);
});
me.on('beforeeventadd',function(me, eventRecord, resources, eOpts){
alert('123')
});
Ext.getStore('resource').reload();
me.callParent(arguments);
},
onEventCreated : function (newEventRecord, resources) {
// Overridden to provide some default values
var resourceStore = this.getResourceStore();
if (!newEventRecord.getResourceId()) {
if (!Ext.isEmpty(resources)) {
newEventRecord.assign(resources);
} else if (resourceStore && resourceStore.getCount() > 0) {
newEventRecord.assign(resourceStore.first());
}
}
},
});
event store:
Ext.define('my.store.CalendarEvent', {
extend : 'Cal.data.EventStore',
storeId : 'event',
});

What have you done?
To save records as iCalendar file:
You can serialize records from store to format .ical format (https://www.ietf.org/rfc/rfc2445.txt).
To load file as events:
Ex. you can listen change in file input and decode .ical format to your model parameters.
You can use existing open source library like https://github.com/nwcell/ics.js

Add custom node to Alloyui DiagramBuilder in JAVA

I have been using this example to make a diagram with Alloyui, but I don't find the way to make a custom node in JAVA.
I've tried to simply add it in AvaliableFields, but doesn't seem to work:
diagramBuilder.setAvailableFields(
new NodeType(
"diagram-node-custom-icon",
"Custom",
"custom"
));
I have already done this in another example, directly in the javascript and works:
Y.DiagramNodeCustom = Y.Component.create({
NAME: 'diagram-node',
ATTRS: {
type: {
value: 'custom'
},
myAtt: {
validator: Y.Lang.isString,
value: ''
},
myAtt2: {
validator: Y.Lang.isString,
value: ''
}
},
EXTENDS: Y.DiagramNodeTask,
prototype: {
getPropertyModel: function () {
var instance = this;
var model = Y.DiagramNodeTask.superclass.getPropertyModel.apply(instance, arguments);
model.push({
attributeName: 'myAtt',
name: '123'
});
model.push({
attributeName: 'myAtt2',
name: '456'
});
return model;
}
}
});
But I'm trying only to touch the java part. Any ideas?

Seems like this add-on doesn't accept custom nodes, so I am working with Javascript.

Here's an example, I hope it helps you:
var Y = YUI().use(
'aui-diagram-builder',
function (Y) {
Y.DiagramNodeCustom = Y.Component.create({
NAME: 'diagram-node',
ATTRS: {
type: {
value: 'custom'
},
customAttr: {
validator: Y.Lang.isString,
value: 'A Custom default'
}
},
EXTENDS: Y.DiagramNodeTask,
prototype: {
getPropertyModel: function () {
var instance = this;
var model = Y.DiagramNodeTask.superclass.getPropertyModel.apply(instance, arguments);
model.push({
attributeName: 'customAttr',
name: 'Custom Attribute'
});
return model;
}
}
});
Y.DiagramBuilder.types['custom'] = Y.DiagramNodeCustom;
var availableFields = [{
iconClass: 'diagram-node-start-icon',
label: 'Start',
type: 'start'
}, {
iconClass: 'diagram-node-task-icon',
label: 'Task',
type: 'task'
}, {
iconClass: 'diagram-node-custom-icon',
label: 'Custom',
type: 'custom'
}, {
iconClass: 'diagram-node-end-icon',
label: 'End',
type: 'end'
}];
diagram = new Y.DiagramBuilder({
availableFields: availableFields,
boundingBox: '#myDiagramContainer',
srcNode: '#myDiagramBuilder'
}).render();
});
.diagram-node-custom .diagram-node-content {
background: url(http://a.deviantart.net/avatars/m/e/mercedes77.gif?5) no-repeat scroll center transparent;
}
.diagram-node-custom-icon {
background: url(http://dribbble.s3.amazonaws.com/users/1266/screenshots/213334/emoticon-0188-nyancat.gif) no-repeat scroll center transparent;
}
<div id="myDiagramContainer">
<div id="myDiagramBuilder" width=100></div>
</div>
<button id="myButton"></button>
See also https://github.com/mstahv/diagram-builder

Jquery Ajax data not sent through multiple tabs

I am using jquery Ajax to send my parameters to backend in java and return value is of JSON type. My application has different categories which uses the same jsp. If i open a single category in one tab everything is working fine. But when i open different categories in different tabs, the last opened tab/category only sends parameters to the back end, the first opened tabs triggers the ajax call, but the parameters passed are not available in the back end. PFB the code snippet of the AJAX call made,
function addThings(things) {
$(document).ready(function() {
var parameters = {
_method : 'put'
};
for ( var i = 0; i < things.length; i++) {
if (parameters[things[i][0]] != null) {
parameters[things[i][0]] = parseInt(parameters[things[i][0]])
+ parseInt(things[i][1]);
} else {
parameters[things[i][0]] = things[i][1];
}
}
$.ajax({
type : "POST",
url : "addThings.do",
async : false,
data : parameters,
datType : "json",
failure : function(data) {
ShowFatalError();
},
success : function(response) {
var resp =$.getJSON(response);
if (resp == null) {
ShowFatalError();
} else {
if (response.exceptionsOccured) {
ShowFatalError();
}
CurrentJSON = response;
CountDisplay(CurrentJSON);
return (CurrentJSON);
}
}
});
});
return CurrentJSON;
}
The above function is triggered on a button click.
Please help me out in this.

How can I call a method/function from other jsp to include in jstree in another jsp

I'm still new with jsTree, JavaScript and jQuery functions.
My problem is that I need to refresh the header so when I click certain nodes in jstree the header will be refreshed.
The jstree is located in applet.jsp and the function for refreshing the header is located in header.jsp.
How can I call the refresh method for refreshing inside jstree?
This is my jstree in applet.jsp:
var selected_folder = "folder_${user.defaultFolder}";
$(document).ready(function() {
jQuery("#folder_tree").jstree({
"xml_data" : {
"ajax" : {
"url" : "<%=request.getContextPath()%>" + "/ListFolder.action"
},
"xsl" : "nest"
},
"ui" : {
"initially_select" : [ "#folder_${user.defaultFolder}" ]
},
"types" : {
"types" : {
"leaf" : {
"icon" : {
"image" : "<%=request.getContextPath()%>/images/icons/leaf.jpg"
}
},
"share" : {
"icon" : {
"image" : "<%=request.getContextPath()%>/images/icons/share.jpg"
}
}
}
},
"themes" : {
"theme" : "msam"
},
"plugins" : [ "themes", "xml_data", "ui", "types" ]
});
jQuery("#folder_tree").bind('loaded.jstree', function() {
jQuery("#folder_tree").jstree('open_all');
});
jQuery("#folder_tree").bind("select_node.jstree", function(e, data) {
var haveContent = data.rslt.obj.attr("haveContent");
if (haveContent === 'false') {
return;
}
var id = data.rslt.obj.attr("id");
id = id.substring("folder_".length);
parent.content.location.href = "<%=request.getContextPath()%>"
+ "/home/Folder.action?folderID="
+ id;
//alert(data.inst.get_text(data.rslt.obj)); // NODE TEXT
$.ajax({
url : "<%=request.getContextPath()%>" + "/WebContent/home/header.jsp",
data :{folderId,id},
cache:false,
success : function(data){
setupTree(data); //put your logic to set tree inside a method called setupTree or whatever you want to call it.
}
});
});
jQuery("#folder_tree").bind("refresh.jstree", function (event, data) {
jQuery("#folder_tree").jstree("select_node", selected_folder);
});
});
var tree_select_node = function(id) {
selected_folder = "#folder_" + id;
jQuery("#folder_tree").jstree("deselect_all");
jQuery("#folder_tree").jstree("refresh");
}
And this is the method/function for refreshing the header in header.jsp:
function selectHeaderLink(selectedLinkID) {
var linkIDArray = new Array('homeLink', 'newFolderLink', 'settingsLink', 'reportsLink');
resetHeaderLinks(linkIDArray, 'tab_link');
if(linkIDArray.length > 0) {
for(var i=0;i<linkIDArray.length;i++) {
if(linkIDArray[i] == selectedLinkID) {
var myLink = document.getElementById(linkIDArray[i]);
var row = myLink.parentNode;
row.style.height = "28";
row.style.backgroundImage = 'url(../images/bg-topmenu.jpg)' ;
myLink.style.color = "white";
break;
} //--end: if-for-if
} //--end: for-if
} //--end: if
}
function windowOnload(){
selectHeaderLink('homeLink');
}
I already tried using an ajax request but I'm still confused where to put this ajax request.
Sorry for my bad English. I hope someone will help me with this problem.

i already find the answer
jQuery("#folder_tree").bind("select_node.jstree", function(e, data) {
var haveContent = data.rslt.obj.attr("haveContent");
if (haveContent === 'false') {
return;
}
selectHeaderLink('homeLink');
var id = data.rslt.obj.attr("id");
id = id.substring("folder_".length);
parent.content.location.href = "<%=request.getContextPath()%>"
+ "/home/Folder.action?folderID="
+ id;
//alert(data.inst.get_text(data.rslt.obj)); // NODE TEXT
});
i just put the function into the jquery n then remove the function to centralize js file..and its work..

Backbone.js Collection not updating

I am new to backbone.js
I am adding rows dynamical in table(HTML), but when I print table data on save button it display empty data, my code is as follows
(function($){
Backbone.sync = function(method, model, success, error){
success();
}
var Person = Backbone.Model.extend({
defaults: {
srNo:1,
name: ''
}
});
var ListPerson = Backbone.Collection.extend({
model: Person
});
var ItemView = Backbone.View.extend({
tagName: 'tr', // name of tag to be created
events: {
'click span#spanDelete': 'remove'
},
initialize: function(){
_.bindAll(this, 'render', 'unrender', 'remove');
this.model.bind('add', this.render);
this.model.bind('remove', this.unrender);
},
render: function(){
$(this.el).append("<td>"+this.model.get('srNo')+"</td><td><input type='text' id='txt1' value="+this.model.get('name')+"></td><td><span class='delete' id='spanDelete' style='cursor:pointer; color:red; font-family:sans-serif;'>[delete]</span></td>");
return this;
},
unrender: function(){
$(this.el).remove();
},
remove: function(){
this.model.destroy();
}
});
var ListView = Backbone.View.extend({
el: $('body'), // attaches `this.el` to an existing element.
initialize: function(){
_.bindAll(this, 'render', 'addItem', 'appendItem');
this.collection = new ListPerson();
this.collection.bind('add', this.appendItem);
this.counter = 0;
this.render();
},
events: {
'click button#btnAdd': 'addItem',
'click button#btnSave': 'saveData'
},
render: function(){
var self = this;
$(this.el).append("<button id='btnAdd'>Add list item</button>");
$(this.el).append("<table border=1 id='dtl1'></table>");
$(this.el).append("<button id='btnSave'>Save</button>");
_(this.collection.models).each(function(person){
self.appendItem(person);
}, this);
},
addItem: function(){
this.counter++;
var person = new Person();
person.set({
srNo: this.counter // modify item defaults
});
this.collection.add(person);
},
appendItem: function(item){
var itemView = new ItemView({
model: item
});
$('table', this.el).append(itemView.render().el);
},
saveData: function(){
var obj=this.collection.toJSON();
var str_json = JSON.stringify(obj);
alert(str_json);
}
});
var listView = new ListView();
})(jQuery);
Name is not display in output

From what you have posted, I do not see you setting name attribute of your Person model anywhere. Within your addItem method, I see you setting the srNo attribute but nothing is done to the name as far as I can see here.
Relevant part of your code below,
var person = new Person();
person.set({
srNo: this.counter // modify item defaults
});
So you need set your name attribute like you are setting the srNo attribute

I got one tricky solution for this, i trap change event of inputtext in event block of ItemView(In above example) as events: {'click span#spanDelete': 'remove','change input#name':'textChange' }, and in textChange method i write following code textChange: function(e){
this.model.set('name',$(e.currentTarget).val());
}When i print collection value in alert i got all names inserted in inputtext.