Javascript 在网格列表中的第一项上设置默认焦点

渲染网格后，如何将焦点设置为第一项。我遇到了一个问题，当网格更新（集合更改）时，整个应用程序的焦点就会丢失

我正在使用月光石图书馆

 { 
    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}
   ]
 }

---

这里只是猜测一下，因为我没有使用Moonstone，但是当调用render方法时，普通的enyo.Datalist实际上并没有呈现它的列表内容。相反，实际的渲染任务被延迟，并在稍后由gridList的委托执行

您可能希望深入研究gridList委托的代码，并查看它是如何工作的。您可能会创建一个自定义委托（通过扩展原始委托），并在重置和/或刷新方法中高亮显示第一个子委托：

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

---

这里只是猜测一下，因为我没有使用Moonstone，但是当调用render方法时，普通的enyo.Datalist实际上并没有呈现它的列表内容。相反，实际的渲染任务被延迟，并在稍后由gridList的委托执行

您可能希望深入研究gridList委托的代码，并查看它是如何工作的。您可能会创建一个自定义委托（通过扩展原始委托），并在重置和/或刷新方法中高亮显示第一个子委托：

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

---

鲁本的回答补充了我在Enyo论坛上发布的回答，为了完整起见，我将其包括在这里：

试用

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

我在采样器中的Moonstone DataGridList示例中添加了一个rendered（）函数，我发现这是可行的：

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

---

它没有及时起作用。

鲁本的回答补充了我在Enyo论坛上发布的答案，为了完整起见，我将其包括在这里：

试用

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

我在采样器中的Moonstone DataGridList示例中添加了一个rendered（）函数，我发现这是可行的：

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

它在没有延迟的情况下无法工作。

hightlight（）

是Spotlight的私有方法，它只添加了

Spotlight

类，而不添加Spotlight管道的其余部分

spot（）

是您应该使用的方法，它在内部调用

highlight（）

@ruben ray vreeken认为数据列表延迟渲染是正确的。找到第一个控件的最简单方法是设置moon.datalistspottlightsupport提供的

enyo.kind({
名称：“ex.App”，
班级：'月亮'，
绑定：[
{从：“.collection”到：“.$.gridList.collection”}
],
组成部分：[
{name:'gridList'，kind:'moon.DataGridList'，classes:'enyo-fit'，initialFocusIndex:0，components:[
{kind:“moon.CheckboxItem”，绑定：[
{从：“.model.text”到：“.content”}，
{从：“.model.selected”到：“.checked”，单向：false}
]}
]}
],
create:enyo.inherit（函数（sup）{
返回函数（）{
辅助应用（此，参数）；
//至少在这里，应用程序是以指针模式启动的，因此可以找到第一个控件
//不明显（尽管它会在5路操作后从该控件恢复）。
//关闭指针模式就可以了。
enyo.Spotlight.setPointerMode（false）；
this.set（“collection”，新的enyo.collection（this.generateRecords（））；
};
}),
generateRecords:函数（）{
var记录=[]，
idx=this.modelIndex | | 0；
对于（；records.length<20；++idx）{
var title=（idx%8==0）？“具有长标题”：“；
var subTitle=（idx%8==0）？“Lorem ipsum dolor sit amet”：“subTitle”；
记录。推送({
选择：false，
文本：“项目”+idx+标题，
潜台词：副标题，
url:“http://placehold.it/300x300/“+Math.floor（Math.random（）*0x1000000）.toString（16）+”/ffffff&text=Image”+idx
});
}
//更新我们的内部索引，使其始终生成唯一值
this.modelIndex=idx；
退货记录；
},
});
新的ex.App（）.renderInto（document.body）；

hightlight（）

是Spotlight的私有方法，它只添加了

Spotlight

类，而不添加Spotlight管道的其余部分

spot（）

是您应该使用的方法，它在内部调用

highlight（）

@ruben ray vreeken认为数据列表延迟渲染是正确的。找到第一个控件的最简单方法是设置moon.datalistspottlightsupport提供的

enyo.kind({
名称：“ex.App”，
班级：'月亮'，
绑定：[
{从：“.collection”到：“.$.gridList.collection”}
],
组成部分：[
{name:'gridList'，kind:'moon.DataGridList'，classes:'enyo-fit'，initialFocusIndex:0，components:[
{kind:“moon.CheckboxItem”，绑定：[
{从：“.model.text”到：“.content”}，
{从：“.model.selected”到：“.checked”，单向：false}
]}
]}
],
create:enyo.inherit（函数（sup）{
返回函数（）{
辅助应用（此，参数）；
//至少在这里，应用程序是以指针模式启动的，因此可以找到第一个控件
//不明显（尽管它会在5路操作后从该控件恢复）。
//关闭指针模式就可以了。
enyo.Spotlight.setPointerMode（false）；
this.set（“collection”，新的enyo.collection（this.generateRecords（））；
};
}),
generateRecords:函数（）{
var记录=[]，
idx=this.modelIndex | | 0；
对于（；records.length<20；++idx）{
var title=（idx%8==0）？“具有长标题”：“；
var subTitle=（idx%8==0）？“Lorem ipsum dolor sit amet”：“subTitle”；
记录。推送({
选择：false，
文本：“项目”+idx+标题，
潜台词：副标题，