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

Question

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

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

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

Answer 1

hightlight() - частный метод для Spotlight, который добавляет только класс 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); 

Answer 2

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

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

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

Answer 3

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

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

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

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

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

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