Wrong set spot control in DataGridList
Hi all,
I have a moon.DataGridList that have 2 row moon.GridListImageItem
and
then i custom spotlithRightChange to catch when at item 6th press right it next to 7th item, but spotlight jum to 8th item.
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, Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
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.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; } } ] } ] }, ]You have a couple options: set renderDelay to
nulland leave your code as is (the public API way) or overridedidRenderinstead ofrendered(the private API way).events:{ onRenderFinished:'' }, rendered:function(){ this.inherited(arguments); this.doRenderFinished(); },intomoon.GridListImageItemi 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?{ name: "panels", kind: "moon.Panels", animate:false, arrangerKind: "CarouselArranger", classes: "enyo-fit full", components:[ { name:'HomePanel', kind:'clip.HomePanel' }, { name:'ListPanel', kind:'clip.ListPanel' } ] }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/
spotlightDisabled: falseon it which will cause Spotlight to skip it or you canreturn 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!
spotlightFocused:function(inSender,inEvent){ if(inEvent.originator.for == 'item2') { enyo.Spotlight.spot(this.$.item); } },