I used the following code to add a scroll event to sap.m.semantic.FullscreenPage instance but was not successful.
var oPage = this.byId("__fullscreen_page_worklist");
oPage.attachBrowserEvent("window.onscroll", function(oEvent) {
console.log(oEvent);
});
While for sap.m.page it works. What must be change?
Related
I am generating ion-slides asynchronously. However I believe I need to use update() function.
Below is the api section: https://ionicframework.com/docs/api/components/slides/Slides/#update
I am not sure how to use this function.
Could someone show me how to use this function?
Thanks!
this is how i did it in a past project:
first you have to get the instance of your slide:
$scope.$on("$ionicSlides.sliderInitialized", function(event, data){
//self is my controller
self.sliderInstance = data.slider;
//slidesLoaded is a custom var i used to store loaded slides
if(self.slidesLoaded.length < 1){
//initialisation stuff, or filling content
//...
self.sliderInstance.update();
}
});
then you can call it anytime you add a slide for example, in my case i did a dynamic next slide loading:
$scope.$on("$ionicSlides.slideChangeEnd", function(event, data){
var index_t = self.sliderInstance.activeIndex;
self.loadSlide(index_t + 1);
self.sliderInstance.update();
});
If I create a view and its controller in run time how can I connect it to a component while when I call getOwnerComponent it returns the component.
I can not found any setOwnerComponent for the controller or view.
You can do this by running the code that creates the new view inside a "runAsOwner" call:
var oView = oComponent.runAsOwner(function() {
return sap.ui.xmlview("myView", {
// view info
});
});
You can see more information about the runAsOwner function here. I have also made a small fiddle to demonstrate this: https://jsfiddle.net/93mx0yvt/21/.
i need to build the page by binding aggregation as below
view
<NavContainer
id="navCon"
class="navContainerControl sapUiSmallMarginBottom" height="50%">
</NavContainer>
controller
onInit : function()
{
var navCon = this.getView().byId("navCon");
navCon.bindAggregation('pages',{
path:'/pages',
factory : jQuery.proxy(this.createPages,this)
});
}
createPages : function(sid,context)
{
var eachpageData = context.getObject();
var grid = new sap.ui.layout.Grid({
defaultSpan:"L4 M6 S6"
});
var page = new sap.m.Page({
id : eachpageData.name,
title : eachpageData.name,
content : grid
});
grid.bindAggregation('content',{path:'data',factory :this.createPageContent});
return page;
},
But when i see from the debugger it has only one page
But when i call navto
handleNav : function(evt)
{
var navCon = this.getView().byId("navCon");
var target = evt.getSource().getText();
if (target) {
//var animation = this.getView().byId("animationSelect").getSelectedKey();
navCon.to(this.getView().byId(target));
} else {
navCon.back();
}
}
and if i see the navCon.getPages() will give 2 pages.
What mistake i have done here?
You are trying to pass the DOM element to the NavContainers.to(DOM) method. This is where its gone wrong.
But NavContainers.to() method can accept id(String) as parameter.
Change your handleNav method as follows it will work.
handleNav : function(evt)
{
var navCon = this.getView().byId("navCon");
var target = evt.getSource().getText();
if (target) {
navCon.to(target);
} else {
navCon.back();
}
}
NavContainers can display only one page. You can add more pages to the pages aggregation, but they will be visible only if a navigation event is fired with the proper parameters. After that, the layout of the new page is loaded and added to the DOM.
In case of SplitApp, application can display two pages (master and detail) if you see it on tablet or desktop; however it's implemented by the use of two NavContainers.
That's why the control inspector returns with one page before the navigation, second page is not part of the DOM until you navigates to it.
If you place a breakpoint into your code instead of using the control inspector, you can call the navCon.getPages() which should return with the number of pages in the aggregation.
I upgraded the kendo library to the 2014Q1 framework which had a few nice features that they were adding, however when I did that it broke any widget (grid, tabStrip, select lists, etc.) from rendering at all. I tracked it down to the layout/view not being able to activate the widget without being wrapped in a setTimeout set to 0. Am I missing something key here or did I build this thing in an invalid way?
http://jsfiddle.net/upmFf/
The basic idea of the problem I am having is below (remove the comments and it works):
var router = new kendo.Router();
var mainLayout = new kendo.Layout($('#mainLayout').html());
var view = new kendo.View('sample', {
wrap: false,
model: kendo.observable({}),
init: function() {
// setTimeout(function(){
$("#datepicker").kendoDatePicker();
// }, 0);
}
});
mainLayout.render('#container');
router.route('/', function() {
mainLayout.showIn('#app', view);
});
router.start();
Admittedly, I don't fully understand it, but hope this helps.
Basically when you try to init the #datepicker, the view elements have not been inserted into the DOM yet. You can put a breakpoint inside the init function, when it hits, check the DOM and you will see that the #app is an empty div, and #datepicker does not exist yet (at least not on the DOM).
kendo.Layout.showIn seems to need to exit in order for the view to finish rendering, but when it initializes the view's elements, it thinks the render is done and init is triggered incorrectly ahead of time. The setTimeout works because it runs the kendoDatePicker initialization asynch, the view is able to finish rendering before the timeout function.
Workarounds...
Trigger the view rendering from the view object itself:
var view = new kendo.View('sample', {
init: function() {
$("#datepicker").kendoDatePicker();
}
});
router.route('/', function() {
view.render('#app');
});
Select and find the datepicker from the view object itself:
var view = new kendo.View('sample', {
init: function() {
view.element.find("#datepicker").kendoDatePicker();
}
});
router.route('/', function() {
mainLayout.showIn('#app', view);
});
Near the bottom of this thread is where I got the idea for the 2nd option. Maybe someone else can come around and give a better explanation of whats going on.
i have a view called divChal. When i change the view to that i also want to change the selected Button in the tabbar to the button with the id tabBarButtonChal.
i tried it like this, which doesn't work.
var divChal = dijit.registry.byId("divChal");
dojo.aspect.after(divChal,"onBeforeTransitionIn", function(){
var tabBarButtonChal = dijit.registry.byId("tabBarButtonChal");
tabBarButtonChal.select();
});
greets Tom
This way to set a property on a node is to evoke set(property, value) on it:
dojo.aspect.after(divChal,"onBeforeTransitionIn", function(){
dijit.registry.byId("tabBarButtonChal").set('selected', true);
});