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

how to list the object in angular calling the java api with header and body?

I want to list the student details calling the java api which have below response. I want the values from data which will have multiple values.Below is the method i am calling in component.ts class.
ngOnInit() {
this.loading = true
this.httpService.get('/student').subscribe(
result => {
console.log('received results');
this.loading = false;
this.scouts = result;
},
error => {
console.log('failed');
this.loading = false;
}
``
This is the api response.
``
{
data: [
{
id: 101,
name: "John doe",
status: "enrolled",
}
],
errors: [ ],
warnings: [ ],
meta: { }
}
```
I tried to using this as html code but this won't work and in the component part i have called the httpservice with get request in ngOnInit part.
``
<tr *ngFor="let student of students">
<td>{{student.id}}</td>
<td>{{student.name}}</td>
<td>{{student.status}}</td>
```
Please can you guide me how can i get the student details from data part and list it in front end. Thank you.

From Best practices:
Use url at the service level (since it's a constant used only inside the service)
Define a StudentResponce model so that you can your json response.
Define the Student model that will be a property of StudentReponse
then your component becomes
ngOnInit() {
this.loading = true;
this.httpService.getStudents().subscribe(
result => {
console.log('received results');
this.loading = false;
this.scouts = result.data;
/*or this.scouts = [...result.data] */
//warning = result.warning
//meta = result.meta
//errors = [...result.errors]
},
error => {
console.log('failed');
this.message = error.message;
this.loading = false;
});
}
and the service
const url = "http://replace_with_service_url";
#Injectable()
export class MyHttpService {
constructor(private client: HttpClient) {
}
getStudents(): Observable<StudentResponse>{
return this.client.get<StudentResponse>(url);
}
}
export class StudentResponse{
data: Student[];
warning: any;
errors: any[];
meta: any;
}
export class Student{
id: number;
name= "";
status: string /*or enum "enrolled"*/;
}
you can replace your service url in this code to test

Just change this assignment:
this.scouts = result;
to
this.scouts = result.data;

Shield UI: Insert row based on other row

I am using Shield UI for my Java application.
I created a custom insert window with "command" as follows:
toolbar: [
{
buttons: [
//{ commandName: "insert", caption: "Agregar Solicitud" }
{ cls: "insertButton", caption: "Agregar Solicitud", click: insertRecord }
],
position: "top"
},
Code for insertRecord:
function insertRecord(index) {
//alert(JSON.stringify(index));
index = 0;
var grid = $("#grid").swidget(),
item = grid.dataItem(index);
initializeWindowWidgets();
editedRowIndex = index;
$("#solId").swidget().value(item.solId);
$("#atmid").swidget().value(item.atmid);
$("#fechaAbastecimiento").swidget().value(item.fechaAbastecimiento);
$("#cargar").swidget().checked(item.cargar);
$("#emergencia").swidget().checked(item.emergencia);
$("#solId").swidget().enabled(true);
$("#atmid").swidget().enabled(true);
$("#fechaAbastecimiento").swidget().enabled(true);
$("#cargar").swidget().enabled(true);
$("#emergencia").swidget().enabled(true);
$("#save").swidget().enabled(true);
$("#window").swidget().visible(true);
//$("#window").swidget().center();
}
function initializeWindowWidgets() {
$("#window").shieldWindow({
position: { left: 500, top: 200 },
width: 320,
height: 360,
title: "Insertar abastecimiento",
modal: true,
visible: false
});
$("#solId").shieldNumericTextBox({
});
$("#atmid").shieldTextBox({
});
$("#fechaAbastecimiento").shieldDatePicker({
});
$("#cargar").shieldCheckBox({
});
$("#emergencia").shieldCheckBox({
});
$("#save").shieldButton({
events: {
click: function (e) {
var grid = $("#grid").swidget(),
editedItem = grid.dataSource.edit(3).data;
editedItem.solId = $("#solId").swidget().value();
editedItem.atmid = $("#atmid").swidget().value();
grid.saveChanges();
$("#window").swidget().close();
}
}
});
Also I can get the row data when I select a row using:
selectionChanged: function (e) {
var selected = e.target.contentTable.find(".sui-selected");
if (selected.length > 0) {
message.innerHTML = selected.get(0).innerHTML;
}
else {
message.innerHTML = "";
}
}
Finally I know how to call a service for example:
$("#grid").shieldGrid({
dataSource: {
events: {
error: function (event) {
if (event.errorType == "transport") {
// transport error is an ajax error; event holds the xhr object
alert(JSON.stringify(event));
alert("transport error: " + event.error.statusText);
// reload the data source if the operation that failed was save
if (event.operation == "save") {
this.read();
}
}
else {
// other data source error - validation, etc
alert(event.errorType + " error: " + event.error);
}
},
},
remote: {
read: {
type: "POST",
url: "abastecimientos/get",
contentType: "application/json",
dataType: "json"
},
modify: {
create: function (items, success, error) {
var newItem = items[0];
$.ajax({
type: "POST",
I need to do these tasks:
Select a row in my grid.
Press insert button.
Shown my custom window with the row's data.
Modify the data showed.
Press a save button and call a remote service in order to insert new row.
I know how to do these tasks separately but tasks 3 and 5 are not clear to me.
I google all internet but I can't figure out how to do it.
Please I would appreciate any suggestion.
Juan

Did you check the following Shield UI demos?
3. Shown my custom window with the row's data
5. Press a save button and call a remote service in order to insert new row

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.