dhtmlxCalendar in dhtmlxWindow zIndex - calendar

I attach a page with dhtmlxCalendar in dhtmlxWindow. And calendar is cut.
Main page:
dhxWins = new dhtmlXWindows();
popupWindow = dhxWins.createWindow("newcontact_win", 0, 0, 330, 270);
popupWindow.center();
popupWindow.attachURL("calendar.html");
Attached page:
formData = [{type: "calendar", dateFormat: "%d-%M-%Y", serverDateFormat: "%Y-%m-%d", name: "start_date", label: "Calendar", readonly: true, calendarPosition: "right"}];
myForm = new dhtmlXForm("myForm", formData);

Your calendar renders within the most nested iframe, which has smaller dimension than calendar. Physically impossible to draw calendar inside such small area.
To get calendar visible normally you need to build your code without using iframes (i.e. without using attachURL), then it must rendered good.

Related

Golden layout popouts with AngularJS

I am using golden layout in single page application. Golden layout normal 'open in new window' works pretty well (https://jsfiddle.net/shafaq_kazmi/xs5r6mma/6/)
var myLayout = new GoldenLayout({
content: []
}, $('#layoutContainer'));
myLayout.registerComponent('example', function(container, state) {
container.getElement().html('<h2>Hello World</h2>');
});
myLayout.createDragSource($("#button"), {
type: 'component',
componentName: 'example',
componentState: {
text: 'Button'
}
});
myLayout.init();
But when I am trying to integrate it in SPA, when I popout any widget, the whole application gets loaded in popup window instead of the particular widget. Do I need to have some specific configurations to fix this behavior? How can I achieve the actual popout feature.
Any help on this?
Here is PR which fixed the issue with GL when used with SPA. Use latest js from github and try again
https://github.com/deepstreamIO/golden-layout/pull/152

Leaflet tap on marker for popup dont work with AngularJS / ui-leaflet on mobile devices

This is a specific Leaflet/AngularJS question and i hope someone can help me.
I use Leaflet (0.7.7) in an AngularJS Application with the ui-leaflet(1.0.0) directive. angular-ui/ui-leaflet
Everything works fine except of tapping the markers on the map for showing the popup on mobile devices (on Desktops everything works fine!). The click event is never fired. Instead of the click event on mobile devices the touchstart and the touchend events are fired while "tapping" on a marker.
In the _onUp Method which is being executed after the touchend event there is a little snippet which should perform a simulated click event on the tapped target.
// simulate click if the touch didn't move too much
if (this._isTapValid()) {
this._simulateEvent('click', first);
}
I included some debug messages and my application executes the _simulateEvent() Method after tapping on a marker.
The _simulateEvent() Method simply dispatches a click event on the tapped target:
var simulatedEvent = document.createEvent('MouseEvents');
simulatedEvent._simulated = true;
e.target._simulatedClick = true;
simulatedEvent.initMouseEvent(
type, true, true, window, 1,
e.screenX, e.screenY,
e.clientX, e.clientY,
false, false, false, false, 0, null);
e.target.dispatchEvent(simulatedEvent);
But then nothing else happens. The Popup dont appear. When i change the _simulateEvent() Method and "force" a click on the target everything works fine.
e.target.click();
The popup opens on tapping the marker.
Can someone maybe help me or explain me why the official implementation dont work for me?
EDIT:
My snippet for adding markers to the Map. I have an array of cities. For each city i add a marker to the markers.
addMarker(city) {
this.markers[city.id] = {
lat: city.coordinates.latitude,
lng: city.coordinates.longitude,
clickable: true,
dragable: false,
focus: false,
message: markerTemplate,
getMessageScope: _ => {
let $childScope = this.$scope.$new();
this.cities.map((_city) => {
if (_city.id == city.id) {
$childScope.city = _city;
}
});
$childScope.switchToCity = () => {
this.switchToCity(city.id);
};
return $childScope;
},
icon: {
iconUrl:'/images/pin_home.png',
iconSize: [40, 46],
iconAnchor: [20, 46]
},
label: {
message: city.name,
options: {
noHide: true
}
}
};
}
The markerTemplate is a AngularMaterial md-card directive with some informations about the city. Angular Material md-card
Then i pass the markers array to the leaflet drective:
<leaflet width="100%" height="100%" defaults="vm.mapOptions" maxbounds="vm.maxBounds" markers="vm.markers" lf-center="vm.center" id="world_map"></leaflet>
Where vm is my controller.
Use viewport height and viewport width instead of percentage in the leaflet directive.
<leaflet width="100vw" height="100vh" defaults="vm.mapOptions" maxbounds="vm.maxBounds" markers="vm.markers" lf-center="vm.center" id="world_map"></leaflet>
Also make sure you diable the tap on the container
<ion-content data-tap-disabled="true">

ExtJS 4.2 Show a 1 - 12 Month Dynamic calendar

In my ExtJS 4.2 Application I have the requirement to show from 1 to 12 months calendar depending on the Holiday calendar from a selected employee.
I need to show something like this:
So from the above approach I think this can be done by using DatePicker components (as many as needed)
I also found this sample of how to show a complete year info:
From the above sample I think the approach would be creating a dynamic grid with custom columns and rows.
Anyone has done something similar so can give me an idea of the best way to achieve this?
Appreciate in advance.
I used Extensible.calendar
Ext.define('App.view.calendar.calendar_v', {
extend: 'Extensible.calendar.CalendarPanel',
requires: ['Ext.panel.*',
'Extensible.calendar.data.MemoryEventStore',
'Extensible.calendar.CalendarPanel',
'Ext.toolbar.*',
'Ext.button.*',
'Ext.container.ButtonGroup',
'Ext.selection.CellModel',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.form.*',
'Ext.tip.QuickTipManager',
'Ext.form.field.ComboBox',
'Ext.layout.container.Table'],
controllers: ['Main'],
eventStore: eventStore,
xtype: 'calendar',
title: 'Custom Views',
width: 800,
height: 700,
activeItem: 3,
// These show by default, turn them off
showDayView: true,
showMonthView: true,
// Defaults to 3 days. You could also set the dayCount config
// inside multiDayViewCfg to change that.
showMultiDayView: true,
// Used with the custom week view configured below
weekText: 'Week',
weekViewCfg: {
// These settings create a fixed weekday view.
// This view will only show Mon-Fri.
dayCount: 5,
// Always start the view on Monday
startDay: 1,
startDayIsStatic: true,
// NOTE: the configs below apply to any DayView or WeekView. If you wanted all day
// and week views to share these same settings, you could simply pass these configs
// in the general viewCfg. Any views that do not use them will ignore them. They are
// only on this view in this sample to demonstrate how they can be easily customized per view.
// Hide the half-hour marker line
showHourSeparator: false,
// Start the view at 6:00
viewStartHour: 6,
// End the view at 8:00pm / 20:00
viewEndHour: 20,
// Default the scroll position on load to 8:00 if the body is overflowed
scrollStartHour: 8,
// Customize the hour (and event) heights. See the docs for details on setting this.
// This example will be double-height (the default is 42)
hourHeight: 84,
// Allow drag-drop, drag-create and resize of events in 10-minute increments
ddIncrement: 10,
// Since the hour blocks are double-height, we can shorten the minimum event display
// height to match the ddIncrement
minEventDisplayMinutes: 10
}
});
And then I load in events from a store
var x = 1;
var u = Ext.data.StoreManager.lookup('calendar.calendar_s');
u.load({
callback: function () {
Ext.each(Ext.data.StoreManager.lookup('calendar.calendar_s').data.items, function (value) {
eventStore.add({
CalendarId: (x + 1),
EndDate: value.data.date,
IsAllDay: true,
Location: "",
Notes: notes,
RecurRule: "",
Reminder: "",
StartDate: value.data.date,
Title: "",
Url: "sumpnsumpn"
})
});
}
});

ExtJS Carousel Implementation

I'm trying to make a carousel for displaying images, I got most of the functionality from a solution someone in sencha forums came up with. I made a few adjustments to the code and got it working at first glance.
Here's the original code on sencha forums...
http://www.sencha.com/forum/showthread.php?256456-an-Ext-JS-4-carousel-component&p=938789#post938789
This didn't work on ExtJS 4 so I made a few modifications for it to work and also to make it look better (to my eyes). Here's how it looks
I do have a problem or two though...
First off I can't figure out how to add a text over the images I'm displaying, I managed to add that line of text in the center but I also want to add a date to the images and that should display on top of each image container. I think it's pretty basic, but I can't figure out how... I don't have a full understanding of HTML, so that's not helping.
Secondly, and most important, I'm getting some weird behaviour when I close and reopen the window containing this carousel. I've seen this kind of behaviour before when using the same ID in multiple instances of a view in ExtJS, but I have changed all IDs to generate a new one whenever a new carousel window opens and still experience the same problem.
Here's what happens when I close and reopen the window...
And that happens with every window I open after closing the carousel
And last but not least!! I can't get the keydown event to work on this window, I have no clue why. I've tried setting the listener on the carousel container instead of the window but still get no firing whatsoever.
This is the code I'm using to create the carousel window...
var win = Ext.create('Ext.view.CarouselWindow');
win.show();
Ext.createWidget('carousel',{
xPos: win.getSize().width/2,
yPos: win.getSize().height/4,
FPS: 70,
reflHeight: 56,
height:'100%',
width:'100%',
reflGap:2,
bringToFront:true,
store:store,
images:store,
altBox:'imageNameLabel',
autoRotate: 'no',
renderTo: 'carousel-div',
listeners:{
keydown:function(){
console.log('asdasd')
}
}
});
This is the initComponent of the carousel component, which is rendered in the window.
initComponent: function(config) {
this.callParent(arguments);
this.container = this.renderTo ? Ext.get(this.renderTo) : this.up('container');
if (this.xRadius === 0){
this.xRadius = (this.container.getWidth()/2.3);
}
if (this.yRadius === 0){
this.yRadius = (this.container.getHeight()/6);
}
this.xCentre = this.xPos;
this.yCentre = this.yPos;
// Start with the first item at the front.
this.rotation = this.destRotation = Math.PI/2;
this.timeDelay = 1000/this.FPS;
// Turn on the infoBox
if(this.altBox !== '')
// Ext.get(this.altBox).applyStyles({display: 'block'});
if(this.titleBox !== '')
Ext.get(this.titleBox).applyStyles({display: 'block'});
//
// Turn on relative position for container to allow absolutely positioned elements
// within it to work.
this.container.applyStyles({ position:'relative', overflow:'hidden'});
// Setup the store.
this.initStore();
this.setUpContainerListener();
this.innerWrapper = this.container.createChild({
tag: 'div',
style: 'position:absolute;width:100%;height:100%;'
});
this.checkImagesLoaded();
},
And here's the Image component that the carousel uses...
/**
* #author Aymen ABDALLAH <aymen.abdallah#gmail.com>
* #docauthor Aymen ABDALLAH
*/
Ext.define('Ext.component.Image', {
config: {
orgWidth: 400,
orgHeight: 400,
reflHeight: 0,
reflOpacity: 0,
itemIndex: 0,
image: null,
reflection: null,
container: null,
alt: '',
title: '',
imageSrc: '',
imageOK: false
},
// id: '',
constructor: function(config){
this.initConfig(config);
this.imageOK = true;
this.image = new Ext.Element(document.createElement('img'));
this.image.set({
// id: this.id,
src: this.imageSrc,
class : 'carousel-image',
alt: this.alt,
title: this.title
});
this.image.setStyle({position : 'absolute'}); // This seems to reset image width to 0 on webkit!
},
setUpReflection: function(){
if (this.reflHeight > 0)
{
this.reflection = Ext.create('Ext.component.Reflection', {
imageHeight: this.orgHeight,
imageWidth: this.orgWidth,
image: this.image,
parent: this.container,
reflHeight: this.reflHeight,
reflOpacity: this.reflOpacity
});
}
},
generateId: function(){
// return Ext.data.UuidGenerator.create().generate();
},
getImage: function(){
return this.image;
}
});
I didn't want to flood this with code so I restricted to what I think might be useful, there might be some missing though, in that case just tell me and I'll update the post with the portion of the code you need.
EDIT
Here's a link to sencha fiddle showing the carousel and the error. To see the second error open the carousel by clicking the button, close it with ESC and then try to open it once again. You'll notice it either doesn't show or it shows like the screenshot I posted.
https://fiddle.sencha.com/#fiddle/2iu
EDIT 2
Just found out the problem comes from the images, if I comment these lines:
this.image = new Ext.Element(document.createElement('img'));
this.image.set({
id: this.id,
src: this.imageSrc,
class : 'carousel-image',
alt: this.alt,
title: this.title
});
the second error I listed disappears. Of course this is not a solution as the carousel won't display any image this way, but I thought this could be a useful piece of data for anyone interested in helping.
For those who visit this page (I know it's an old post),
The issue isn't actually with the second view, the first view causes a layout error.
The Ext.component.Image class is missing a render function, to fix this add
render: function () {
return;
}
to the class.
Not sure how to fix the other issue entirely, but you could change the image component to be a form/panel and have text, or use the caption tags.

Saving state of hbox widths after splitter move

I'm trying to save the visual state of a panel. The Panel consists of two child containers, with hbox/flex layout and a splitter between them.
{
xtype:'panel',
layout: {
align: 'stretch',
type: 'hbox'
},
items:[
{
xtype:'container',
title: 'left panel',
flex:1
},
{
xtype:'splitter'
},
{
xtype:'container',
title: 'left panel',
flex:2
}
]
}
I already have a working state manager. The "left panel" contains a grid, and the grid is storing it's column states just fine. The state manager fires from a controllers init function by:
var stateProvider=Ext.create('Ext.state.LocalStorageProvider');
Ext.state.Manager.setProvider(stateProvider);
The grid uses the framework standard approach for storing it's state by setting stateId: 'GridState' and stateful:true.
However I'm unable to figure out how ExtJS want's me to do the same with the flex values of the main layout. I've tried setting stateful and stateId on the splitter. I've tried without events, and with stateEvents: ['move']. I've also tried setting stateful on the leftpanel and with stateEvents to resize. Finally I've tried setting stateful on the parent panel, with and without stateEvents: afterlayout.
I do know that it's possible to fetch the event after the splitter is moved. Then I could store the flex values as custom states and manually look for them somewhere in the layout/render process, however I guess there must be a more standard approach for a problem that seems so trivial.
What is the standard framework approach for storing the "splitter position" / "flex values" of a hbox/vbox layout?
Yes there is a standard way to add states. And there is no default state for your splitter so you'll have to add these functions:
Example state:
getState: function () {
var me = this;
var state = {};
state.yourCustomState = 'state'; //you can save what you want
return state;
},
applyState: function (state) {
var me = this;
if (state && state.yourCustomState) {
//Do stuff
}
}
And you need your state to be triggered, you can use stateEvents: http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.resizer.Splitter-method-addStateEvents
You can add the resize event to your stateEvents.

Resources