I am using a sap.ui.unified.ShellLayout with a toolbar at the top and a sap.ui.core.ComponentContainer underneath. The content of the component container is exchanged on navigation while the toolbar stays. Unfortunately, the whole shell (layout) has a scrollbar although only the component container should have one.
How can I disable the scrolling for the ShellLayout?
Method init in the view:
sap.ui.unified.ShellLayout.prototype.init.call(this);
var that = this;
this.setHeaderVisible(false);
// action bar
this.oToolbar = new sap.m.Toolbar({
transparent: true,
content: [
new sap.m.ToolbarSpacer(),
new sap.m.Text({
text: "Elektronischer Einkaufszettel"
}),
new sap.m.ToolbarSpacer()
],
height: "3rem"
});
this.addContent(this.oToolbar);
this.oComponentContainer = new sap.ui.core.ComponentContainer({
name: 'router',
enableScrolling: true
});
this.addContent(this.oComponentContainer);
this.oFlexBox = new sap.m.FlexBox({
alignItems: "Start",
items: [
new sap.m.Button({
width: "100%",
type: "Transparent",
icon: "sap-icon://product",
class: "sapUiSmallMarginEnd",
layoutData: new sap.m.FlexItemData({
growFactor: 1
}),
press: function(oEvent) {
var sTarget = "Products";
that.onButtonClick(oEvent, that, sTarget);
}
}),
new sap.m.Button({
width: "100%",
type: "Emphasized",
icon: "sap-icon://cart",
class: "sapUiSmallMarginEnd",
layoutData: new sap.m.FlexItemData({
growFactor: 1
}),
press: [that, "ShopperMenu", that.onButtonClick]
}),
new sap.m.Button({
width: "100%",
type: "Transparent",
icon: "sap-icon://list",
class: "sapUiSmallMarginEnd",
layoutData: new sap.m.FlexItemData({
growFactor: 1
}),
press: [that, "RequesterMenu", that.onButtonClick]
})
]
});
this.addContent(this.oFlexBox);
Thanks
I finally found the solution in using the sap.ui.layout.FixFlex control.
Regards,
Anton
Related
I wanted to create a Tippy with a button in it:
let tippyActions = function() {
var tippys = document.querySelectorAll('*[id^="tippy"]');
tippys.forEach(tpy => tippy(tpy, {content: tippyContent(tpy),
placement: "left",
trigger: 'click',
allowHTML: true,
hideOnClick: false,
interactive: true,
//zIndex: 99999,}))
}
let tippyContent = function ( tpy) {
let buttonsDiv = document.createElement("div")
let btn1 = document.createElement("a")
btn1.href = `/go/${tpy.url}`
buttonsDiv.appendChild(btn1);
return buttonsDiv.innerHTML;
}
But as soon as I set the interactive flag to true the tippys body disappears:
After reading a bit I first thought I have a zIndex problem, but that apparently was not it.
Turns out that I missed to read a part of the FAQ section in the documentary, where it states that adding appendTo: document.body can solve the problem, which it did in my case:
let tippyActions = function() {
var tippys = document.querySelectorAll('*[id^="tippy"]');
tippys.forEach(tpy => tippy(tpy, {content: tippyContent(tpy),
placement: "left",
trigger: 'click',
allowHTML: true,
hideOnClick: false,
appendTo: document.body, // <---
interactive: true}))
}
I use fullCalendar 2.6 and I only want one allday event per day.
I use this :
eventOverlap: false
It works if I put an event and move it on a day which has already an event : they won't overlap.
But if I click on a day which has already an event, it overlaps and I get 2 events (or more) at the same date...
I use this too on my select function :
overlap: false
which does not do the trick..
What can I do ? any idea ?
And another issue is when I use ajax to send start/end dates, it only works when I click to add an event but not when I move it using arrows when I put my cursor on the edge of the event to change its size...
My code :
function renderCalendar() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay',
},
defaultDate: dateNow,
defaultView: 'month',
lang: 'fr',
height: 'auto',
editable: true,
allDaySlot: true,
weekNumbers: false,
timeFormat: 'H:mm',
slotEventOverlap: false,
weekends: true,
selectable: true,
selectHelper: true,
eventOverlap: false,
select: function(start, end) {
var title = 'Occupé';
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end,
allDay: true,
overlap: false,
color: '#bf0000',
textColor: '#ffffff',
};
$('#calendar').fullCalendar('renderEvent', eventData, true);
}
$('#calendar').fullCalendar('unselect');
alert(start);
alert(end);
}
});
Thanks for your help !
well.. selectOverlap set to "false" is the solution :)
for the second problem, the solution must be eventResizeStop but I didn't find it yet
Try this.
select: function(start, end) {
var title = 'Occupé';
var eventData;
var sameDayEvents = $('#calendar').fullCalendar( 'clientEvents' ,function(event) {
if (event.start.format('YYYY-mm-dd') == start.format('YYYY-mm-dd')) {
return true;
} else {
return false;
}
});
if (!sameDayEvents.length && title) {
eventData = {
title: title,
start: start,
end: end,
allDay: true,
overlap: false,
color: '#bf0000',
textColor: '#ffffff',
};
$('#calendar').fullCalendar('renderEvent', eventData, true);
}
$('#calendar').fullCalendar('unselect');
alert(start);
alert(end);
}
Plunkr: http://plnkr.co/edit/LoMmQ3y4snPrELJz9ZSq?p=preview
Can anyone help me on how to disable maximization of the window by double-clicking on its title? I tried to disable the dblclick event with the following code, but it doesn't seem to work.
$(document).on('dblclick','.k-window-titlebar',function(e){
e.preventDefault();
console.log('dblclick');
return false;
});
// Window definition
var win = $("#win1").kendoWindow({
width: "300px",
height: "100px",
title: "Window 1",
actions: [],
**resizable: false**
}).data("kendoWindow");
resizable: false - Will prevent from maximizing the window.
This is not a nice solution but might work, try toggling back to the previous size:
// Window definition
var win = $("#win1").kendoWindow({
width: "300px",
height: "100px",
title: "Window 1",
actions: []
}).data("kendoWindow");
$(document).on('dblclick','.k-window-titlebar',function(e){
// Restore old size
win.toggleMaximization();
});
The following code worked for me:
// Window definition
var win = $("#win1").kendoWindow({
width: "300px",
height: "100px",
title: "Window 1",
actions: []
}).data("kendoWindow");
win.wrapper.children('.k-window-titlebar:first-child')
.dblclick(function (e) {
e.preventDefault();
return false;
});
Try this: http://plnkr.co/edit/kAhw2A?p=preview
I am new to Sencha Touch and trying Sencha Touch version 2 for a demo of xtemplates. This is what I have code.
Ext.application({
name: 'Templates',
launch: function(){
var content, planetInfo, planetEarth;
planetEarth = { name: "Earth", mass: 1.00 };
planetInfo = new Ext.XTemplate(
"<h2>{name}</h2>mass: {mass}"
);
content = new Ext.Panel({
fullscreen: true,
scroll: 'vertical',
tpl: planetInfo
});
content.update(planetEarth);
}
});
output for this code should be in HTML format in the panel. But I just get [object Object]. Please help.
Don't use content.update(planetEarth) method, because it is deprecated in sencha-touch-2.
Here is an example of the correct code:
Ext.application({
name: 'Templates',
launch: function() {
var content, planetInfo, planetEarth;
planetEarth = { name: "Earth", mass: 1.00 };
planetInfo = new Ext.XTemplate(
"<h2>{name}</h2>mass: {mass}"
);
content = Ext.create("Ext.Panel", {
fullscreen: true,
scroll: 'vertical',
tpl: planetInfo,
data: planetEarth
});
}
});
To update display values (Sencha Touch 2), use "setRecord(with new model instance)".
me.getSomeComponentWithTpl().setRecord(someModelInstance);
I have a Sencha Touch app that has a nested list.
The nestedList automatically creates its own toolBar.
I would like to dock a panel below the toolbar, but above the list-items. And I only need this on the top-level of the list. I am hoping to have it disappear after the first leaf is selected.
Does this sound like something doable? As you can see in my code, I only have the ability to dock an item panel on top of the current toolbar.
Thanks so much in advance. I really appreciate any advice you guys might have.
Al.
Below is what I have so far...
// Menu Pages
var menu = new Ext.NestedList({
fullscreen: true,
title: 'Menu',
displayField: 'text',
store: menu_store,
// ** This is the dockedItem I would like to insert between the toolbar and list-items
dockedItems: [ {
xtype : 'panel',
dock : 'top',
html : '<span>This is the logo panel</span>',
cls : 'front-logo-panel',
flex : 1
}],
// Add Panel for Leaf nodes
getDetailCard: function(item, parent) {
var itemData = item.attributes.record.data,
parentData = parent.attributes.record.data,
detailCard = new Ext.Panel({
scroll: 'vertical',
cls: 'menu-item-panel',
styleHtmlContent : true,
tpl: menuTemplate,
// add button to Leaf Node
listeners: {
activate: function() {
Ext.getCmp('itemToolbar').setTitle('New Title Bar');
}
}
});
detailCard.update(itemData);
this.backButton.setText(parentData.text);
return detailCard;
},
// add template for all nodes
getItemTextTpl: function() {
var tplConstructor =
'<tpl if="newItem">' +
'<span class="list-new-item">New Item!</span>' +
'</tpl>'+
'{text}' +
'<tpl>'+
'<div class="metadata">' +
'{description:ellipsis(40)}' +
'</div>' +
'</tpl>';
return tplConstructor;
}
});
Old question, I know, but to solve this, you can remove the toolbar from the list (without destroying it) and add it to a panel above the list. All nestedList functionality stays the same on the toolbar. Here's the solution I have:
First, I created a view that extends from NestedList and contains a toolbar:
Ext.define('MyApp.view.DynamicList', {
extend: 'Ext.dataview.NestedList',
alias: 'widget.dynamiclist',
config: {
toolbar: {
xtype: 'toolbar',
docked: 'top',
itemId: 'header-bar',
layout: {
pack: 'end',
type: 'hbox'
},
items: [
{
xtype: 'spacer'
},
{
xtype: 'button',
itemId: 'show-nav-sheet-button',
ui: 'plain',
width: 45,
iconCls: 'more'
}
]
}
}
});
Next, I created a main panel with a vbox layout that contains a child panel and this toolbar:
Ext.define('MyApp.view.MainContainer', {
extend: 'Ext.Container',
requires: [
'MyApp.view.DynamicList'
],
config: {
id: 'main-container',
layout: {
type: 'vbox'
},
items: [
{
xtype: 'panel',
flex: 1,
itemId: 'info-container'
},
{
xtype: 'dynamiclist',
flex: 1
}
]
}
});
Then, in a controller, I listen for the initialize event of the nested list. When it's fired, I remove the toolbar from the nested list and add it to the panel.
onNestedListInitialize: function() {
// need to wait until everythin is initialized;
var me = this;
var renderFn = function renderPanels() {
var main = me.getMainContainer();
// wait until main is intialized;
if(!main) {
Ext.defer(renderFn, 50, this);
return;
}
var list = main.down('#my-list');
var infocont = main.down('#info-container');
// wait until the container's components are initialized
if(!list || !infocont) {
Ext.defer(renderFn, 50, this);
return;
}
// remove the toolbar from the list, and add it to the container.
var toolbar = list.down('#header-bar');
list.remove(toolbar, false);
infocont.add(toolbar);
}
// call the function for the first time.
renderFn();
}
Note, I had to add a few checks to make sure the components were correctly initialized before using them, but the heart of it comes to the list.remove(toolbar, false) followed by the infocont.add(toolbar) commands. The false flag in the .remove() method means that the item won't be destroyed, so it's available to be re-added to the panel.