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

【问题标题】：Set default focus on first item in grid list将默认焦点设置在网格列表中的第一项上
【发布时间】：2023-03-25 00:21:01
【问题描述】：

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

我正在使用月光石库。

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

【问题讨论】：

您使用的是哪个版本的 Enyo？

标签： javascript enyo

【解决方案1】：

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);

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

Ruben 的回答补充了我在 Enyo 论坛上发布的回答，为了完整起见，我将其包括在此处：

尝试使用

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

我在 Sampler 中的 Moonstone DataGridList 示例中添加了一个 render() 函数，我发现这是可行的：

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

没有延迟。

【讨论】：