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

Question

Once a grid is rendered how can I set focus to the first item. I am running into a problem where when the grid is updated (collection changes) then focus is lost for the entire application .

I am using the moonstone library.

 { 
    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() is a private method for Spotlight which only adds the spotlight class but does not do the rest of the Spotlight plumbing. spot() is the method you should be using which calls highlight() internally.

@ruben-ray-vreeken is correct that DataList defers rendering. The easiest way to spot the first control is to set initialFocusIndex provided by 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

Just guessing here as I don't use Moonstone, but the plain enyo.Datalist doesn't actually render its list content when the render method is called. Instead the actual rendering task is deferred and executed at a later point by the gridList's delegate.

You might want to dive into the code of the gridList's delegate and check out how it works. You could probably create a custom delegate (by extending the original) and highlight the first child in the reset and/or refresh methods:

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

Answer 3

Ruben's answer adds on to my answer that I posted in the Enyo forums, which I'm including here for the sake of completeness:

Try using

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

I added a rendered() function to the Moonstone DataGridList sample in the Sampler and I found that this works:

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

It didn't work without the delay.