在網格列表中的第一項上設置默認焦點

一旦網格被渲染，我如何將焦點設置爲第一項。我遇到了一個問題，當網格更新（集合更改）時，整個應用程序都會失去焦點。在網格列表中的第一項上設置默認焦點

我正在使用月光石圖書館。

{ 
    kind: "ameba.DataGridList", name: "gridList", fit: true, spacing: 20, minWidth: 300, minHeight: 270, spotlight : 'container', 
    scrollerOptions: 
    { 
     kind: "moon.Scroller", vertical:"scroll", horizontal: "hidden", spotlightPagingControls: true 
    }, 
    components: [ 
     {kind : "custom.GridItemControl", spotlight: true} 
    ] 
}

來源

2014-12-18 Fabii

您正在使用哪個Enyo的版本？ – Pre101

@ Pre101 2.4.0-pre.2 – Fabii

hightlight()是Spotlight的私有方法，它只添加spotlight類，但不會執行Spotlight管道的其餘部分。 spot()是您應該在內部調用highlight()的方法。

@ ruben-ray-vreeken是正確的DataList延遲渲染。發現第一個控件的最簡單方法是設置由moon.DataListSpotlightSupport提供的initialFocusIndex。

http://jsfiddle.net/dcw7rr7r/1/

enyo.kind({ 
    name: 'ex.App', 
    classes: 'moon', 
    bindings: [ 
     {from: ".collection", to: ".$.gridList.collection"} 
    ], 
    components: [ 
     {name: 'gridList', kind:"moon.DataGridList", classes: 'enyo-fit', initialFocusIndex: 0, components: [ 
      {kind:"moon.CheckboxItem", bindings: [ 
       {from:".model.text", to:".content"}, 
       {from:".model.selected", to: ".checked", oneWay: false} 
      ]} 
     ]} 
    ], 
    create: enyo.inherit(function (sup) { 
     return function() { 
      sup.apply(this, arguments); 

      // here, at least, the app starts in pointer mode so spotting the first control 
      // isn't apparent (though it would resume from that control upon 5-way action). 
      // Turning off pointer mode does the trick. 
      enyo.Spotlight.setPointerMode(false); 
      this.set("collection", new enyo.Collection(this.generateRecords())); 
     }; 
    }), 
    generateRecords: function() { 
     var records = [], 
      idx  = this.modelIndex || 0; 
     for (; records.length < 20; ++idx) { 
      var title = (idx % 8 === 0) ? " with long title" : ""; 
      var subTitle = (idx % 8 === 0) ? "Lorem ipsum dolor sit amet" : "Subtitle"; 
      records.push({ 
       selected: false, 
       text: "Item " + idx + title, 
       subText: subTitle, 
       url: "http://placehold.it/300x300/" + Math.floor(Math.random()*0x1000000).toString(16) + "/ffffff&text=Image " + idx 
      }); 
     } 
     // update our internal index so it will always generate unique values 
     this.modelIndex = idx; 
     return records; 
    }, 
}); 

new ex.App().renderInto(document.body);

來源

2014-12-23 16:58:16 ryanjduffy

只是猜測這裏我不使用月光石，但普通enyo.Datalist實際上並沒有呈現其列表內容時，渲染方法被調用。相反，實際的渲染任務被延遲，並在稍後由gridList的委託執行。

您可能想要深入瞭解gridList委託的代碼並查看它是如何工作的。你很可能在復位創建一個自定義委託（通過擴展原件），並突出顯示的第一個孩子和/或刷新方法：

enyo.Spotlight.highlight(this.$.gridList.childForIndex(0));

來源

2014-12-22 15:58:12

魯本的回答增添到我的回答，我張貼在Enyo論壇，我包括這裏完整起見：

嘗試使用

enyo.Spotlight.highlight(this.$.gridList.childForIndex(0));

我添加了一個渲染（）函數在採樣月光石DataGridList樣品，我發現這工作：

rendered: function() { 
    this.inherited(arguments); 
    this.startJob("waitforit", function() { 
     enyo.Spotlight.highlight(this.$.gridList.childForIndex(0)); 
    }, 400); 
},

它沒有延遲沒有工作。

來源

2014-12-22 17:34:38

在網格列表中的第一項上設置默認焦點

回答

相關問題