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

Set default focus on first item in grid list

本文关键字：一项 焦点 默认 设置 列表 网格      更新时间：2023-09-26

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

我正在使用月光石图书馆。

 { 
    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}
   ]
 }
hightlight()是 Spotlight 的

私有方法，它只添加 spotlight 类，但不执行 Spotlight 管道的其余部分。 spot()是您应该使用的方法，该方法在内部调用highlight()。

@ruben-ray-vreeken 是正确的，DataList 延迟呈现。发现第一个控件的最简单方法是设置月球提供的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);

只是在这里猜测，因为我不使用月光石，而是使用普通的 enyo。调用呈现方法时，Datalist 实际上不会呈现其列表内容。相反，实际的呈现任务被推迟，并由 gridList 的委托在稍后执行。

您可能希望深入了解 gridList 委托的代码并查看其工作原理。您可以创建自定义委托(通过扩展原始委托(并在重置和/或刷新方法中突出显示第一个子项：

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

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

尝试使用

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

我在采样器中的月光石数据网格列表示例中添加了一个 rendered(( 函数，我发现这有效：

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

没有延迟就行不通。

相关文章：