CellSpanning

http://msdn.microsoft.com/en-us/library/windows/apps/jj657974.aspx

O listview


<div id="myListView"
    data-win-control="WinJS.UI.ListView"
    data-win-options="{
        itemDataSource: DataExamples.myCellSpanningData.dataSource,
        itemTemplate:  Templates.myCellSpanningJSTemplate
        layout: { 
            groupInfo: DataExamples.groupInfo,
            itemInfo: DataExamples.itemInfo,
            type: WinJS.UI.CellSpanningLayout
        }
    }"
></div>

O segredo é:  groupInfo, itemInfo e itemTemplate.
Os 3 elementos você deve expor via namespace e os 3 você também tem que usar o comando
WinJS.Utilities.markSupportedForProcessing(nome da função);



O grouInfo é uma função. Só tem que configurar o tamanho menor da célula...

// Enable cell spanning and specify // the cellWidth and cellHeight for the items
var groupInfo = function groupInfo() {
     return { enableCellSpanning: true, cellWidth: 310, cellHeight: 80 };
    };

WinJS.Utilities.markSupportedForProcessing(groupInfo);



O itemInfo é uma função que retorna o tamanho do item


// Item info function that returns the size of a cell spanning item
var itemInfo = WinJS.Utilities.markSupportedForProcessing(function itemInfo(itemIndex) {
    var size = { width: 310, height: 80 };

    // Get the item from the data source
    var item = DataExamples.myCellSpanningData.getAt(itemIndex);
    if (item) {

        // Get the size based on the item type
        switch (item.type) {
            case "smallListIconTextItem":
                size = { width: 310, height: 80 };
                break;
                   
            case "mediumListIconTextItem":
                size = { width: 310, height: 170 };
                break;
                   
            case "largeListIconTextItem":
                size = { width: 310, height: 260 };
                break;

            default:
        }
    }
    return size;
});

O o template é uma função que retorna o HTML do item.. praticamente você monta item a item na mão

var myCellSpanningJSTemplate = function myCellSpanningJSTemplate(itemPromise) {
    return itemPromise.then(function (currentItem) {
        var result = document.createElement("div");

        // Use source data to decide what size to make the
        // ListView item
        result.className = currentItem.data.type;
        result.style.overflow = "hidden";

        // Display image
        var image = document.createElement("img");
        image.className = "regularListIconTextItem-Image";
        image.src = currentItem.data.picture;
        result.appendChild(image);

        var body = document.createElement("div");
        body.className = "regularListIconTextItem-Detail";
        body.style.overflow = "hidden";
        result.appendChild(body);

        // Display title
        var title = document.createElement("h4");
        title.innerText = currentItem.data.title;
        body.appendChild(title);

        // Display text
        var fulltext = document.createElement("h6");
        fulltext.innerText = currentItem.data.text;
        body.appendChild(fulltext);

        return result;
    });
};

Nenhum comentário:

Postar um comentário