Установить фокус по умолчанию на первый элемент в списке сетки

Как только сетка отрисована, как я могу установить фокус на первый элемент. Я сталкиваюсь с проблемой, когда при обновлении сетки (изменения коллекции) фокус теряется для всего приложения.

Я использую библиотеку лунного камня.

 { 
    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}
   ]
 }
Источник

3 ответа

Решение

hightlight() это частный метод для Spotlight, который только добавляет spotlight класс, но не делает все остальное в центре внимания сантехники. spot() это метод, который вы должны использовать, какие вызовы highlight() внутренне.

@ ruben-ray-vreeken правильно, что DataList откладывает рендеринг. Самый простой способ определить первый элемент управления - установить initialFocusIndex предоставлено moon.DataListSpotlightSupport.

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);
Источник

Просто предположите, что я не использую Moonstone, но простой enyo.Datalist не отображает содержимое списка при вызове метода render. Вместо этого фактическая задача рендеринга откладывается и выполняется в более поздний момент делегатом gridList.

Возможно, вы захотите погрузиться в код делегата gridList и проверить, как он работает. Возможно, вы могли бы создать пользовательский делегат (путем расширения оригинала) и выделить первый дочерний элемент в методах сброса и / или обновления:

enyo.Spotlight.highlight(this.$.gridList.childForIndex(0));
Источник

Ответ Рубена дополняет мой ответ, который я разместил на форумах Enyo, и который я включил сюда для полноты картины:

Попробуйте использовать

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

Я добавил функцию Rendered() в образец Moonstone DataGridList в Sampler и обнаружил, что это работает:

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

Это не сработало без задержки.

Источник
Другие вопросы по тегам