Wrong set spot control in DataGridList

tienn2t · March 2016

Hi all,
I have a moon.DataGridList that have 2 row moon.GridListImageItem

{
kind:"moon.DataGridList",
name:"resultList",
minWidth:250,
minHeight:300,
space:20,
fit:true,
ontap:'itemSelected',
scrollerOptions:{
vertical:'hidden',
horizontal:'hidden'
},
components:[
{
kind:"moon.GridListImageItem",
centered:false,
useSubCaption:false,
imageSizing:"cover",
spotlightType:'img',
 style:"width:271px; height:271px",

}
]
},

and

then i custom spotlithRightChange to catch when at item 6th press right it next to 7th item, but spotlight jum to 8th item.

spotlightRightChanged:function(inSender,inEvent){
console.log(inEvent.index);
if(inEvent.index == 5){
var components = this.getComponents();
console.log(this.$.resultList.childForIndex(6));
enyo.Spotlight.setCurrent(this.$.resultList.childForIndex(6));
}else if(inEvent.index == 11){
if(this.currentPage+1<=this.totalPage) {
this.set("currentPage",this.currentPage+1);
console.log('Next trang');
enyo.Spotlight.spot(this.$.resultList.childForIndex(0));
this.$.resultList.reset();
this.collection.set("offset", 100 * Math.random());
}
}
},</code>

Please help me fix it,

theryanjduffy · March 2016

My guess is you need to return true; in your onSpotlightRight handler. Without that, the event will bubble up to the main spotlight handler which will try to focus the control to the right of the currently spotted (which you programmatically set to the 7th) which is the 8th.

tienn2t · March 2016

Many thanks @theryanjduffy, it solved my problem.

tienn2t · May 2016

Hi @theryanjduffy and all, how to catch event moon.DataGridList finished render all item?
I try to use rendered function to raise event to parent component but not working

..
components:[
{
kind:"moon.DataGridList",
name:"resultList",
minWidth:250,
minHeight:334,
classes:"item-square",
space:20,
fit:true,
style:'margin-top:20px',
ontap:'itemSelected',
scrollOptions:{
vertical:'hidden',
horizontal:'hidden'
},
events:{
onRenderFinished:''
},
rendered:function(){
this.inherited(arguments);
this.doRenderFinished();
},
components:[
{
kind:"moon.GridListImageItem",
centered:false,
useSubCaption:false,
imageSizing:"cover",
spotlightType:'img',
style:"width:271px; height:271px",
scrollOptions:{
vertical:'hidden',
horizontal:'hidden'
},
bindings:[
{from:"model.title", to:"caption"},
{from:"model.tv_thumb_url",to:"source"},
{
from:"model.vip_mode",
to:"vip",
transform:function(data){
this.removeClass('vip');
if(data>0) {
this.addClass('vip');
}
return data;
}
}
]
}
]
},
]

theryanjduffy · May 2016

DataList employs a deferred rendering strategy to improve rendering performance. Unfortunately, it doesn't have a public API to hook into completing that rendering.

You have a couple options: set renderDelay to null and leave your code as is (the public API way) or override didRender instead of rendered (the private API way).

tienn2t · May 2016

Thanks @theryanjduffy, i check DataGridList not have rendered function, when i move code

 events:{
onRenderFinished:''
},
rendered:function(){
this.inherited(arguments);
this.doRenderFinished();
},

into moon.GridListImageItem i can catch onRenderFinished event in parent, but it show warning log.

enyo.kind.inherited: unable to find requested super-method from -> undefined in moon.GridListImageItem, how to fix that warning?

tienn2t · May 2016

@theryanjduffy : i have a moon.Panels with CarouselArranger kind and include 2 panels (HomePanel and ListPanel). ListPanel is paginator page, when active panel is ListPanel (ListPanel show, HomePanel hide) and i next page, i see a problem that in loading data of new page, panels lost focus current panel (ListPanel) and HomePanel is showed after loaded data, it show ListPanel again and hide HomPanel. How to fix not show HomePanel when i loading data new page in ListPanel?? Thank you somuch

{
name: "panels",
kind: "moon.Panels",
animate:false,
arrangerKind: "CarouselArranger",
classes: "enyo-fit full",
components:[
{
name:'HomePanel',
kind:'clip.HomePanel'
},
{
name:'ListPanel',
kind:'clip.ListPanel'
}
]
}

theryanjduffy · May 2016

I'm not sure what the problem is based on your description. Are you able to reproduce it within jsfiddle?

tienn2t · May 2016

Hi @theryanjduffy how to set spot in focus event, in my code i check if item2 focus, i set spotlight item1, but not working.

enyo.kind({
name:'test',
classes:'moon enyo-fit',
components:[
{
name:'item',
kind:'moon.Item',
content:'item 1'
},
{
name:'item2',
kind:'moon.Item',
content:'item 2'
}
],
handlers:{
onSpotlightFocus:'focus'
},
focus:function(inSender, inEvent){
if(inEvent.originator.name =="item2"){
console.log('focus 2 ');
enyo.Spotlight.spot(this.$.item);
}
}
});

https://jsfiddle.net/tienn2t/n48hk3ae/1/

theryanjduffy · May 2016

There are a couple ways to control spotlight. If you want to prevent a control from being spotted, you can either set spotlightDisabled: false on it which will cause Spotlight to skip it or you can return true; from the onSpotlightFocus handler either on that control on one of its ancestors. If you do the latter, you should also programmatically spot something otherwise spotlight focus will disappear. In the former case, Spotlight correctly handles spotting a different control.

Similar to your code above, you can also programmatically spot another control in the onSpotlightFocused handler which would effectively move the focus to that control after the first had focus. The nuanced difference here is that in handling onSpotlightFocus and returning true, the control never receives spotlight focus (iow, control != enyo.Spotlight.getCurrent()) whereas when handling onSpotlightFocused, the control receives focus (control == enyo.Spotlight.getCurrent()) and then it is immediately moved to another control.

Hope that helps!

tienn2t · May 2016

thank you @theryanjduffy so much, i call spot in onSpotlightFocused event and success spotlight to item, many thanks for your support

spotlightFocused:function(inSender,inEvent){
if(inEvent.originator.for == 'item2') {
enyo.Spotlight.spot(this.$.item);
}
},

Wrong set spot control in DataGridList

Comments

Howdy, Stranger!

Quick Links

Categories