Компоновка элементов внутри WinJS-компонента ListView



default.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Recipe4.3</title>
      <!-- WinJS references -->
      <link href="WinJS/css/ui-light.css" rel="stylesheet" />
      <script src="WinJS/js/base.js"></script>
      <script src="WinJS/js/ui.js"></script>
      <!-- Recipe4.3 references -->
      <link href="/css/default.css" rel="stylesheet" />
      <script src="/js/default.js"></script>
      <script src="/js/data.js"></script>
   </head>
   <body class="win-type-body">
      <h1>Recipe 4.3</h1>
      <div id="template" data-win-control="WinJS.Binding.Template">
         <div>
            <h4 data-win-bind="innerText: name"></h4>
            <h6 data-win-bind="innerText: designation"></h6>
         </div>
      </div>
      <div id="listView1"
         data-win-control="WinJS.UI.ListView"
         data-win-options="{itemTemplate: select('#template')}">
      </div>
   </body>
</html>

data.js 
(function() {
    "use strict";

    function Initialize() {
        WinJS.UI.processAll().done(function() {
            var listControl1 = document.getElementById('listView1').winControl;
            var Employees = new WinJS.Binding.List([{
                id: 1,
                name: "Senthil Kumar",
                designation: "Mobile Developer"
            }, {
                id: 2,
                name: "Lohith GN",
                designation: "Web Developer"
            }, {
                id: 3,
                name: "Vidyasagar",
                designation: "Game Developer"
            }, {
                id: 4,
                name: "Michael",
                designation: "Architect"
            }]);
            listControl1.itemDataSource = Employees.dataSource;
            listControl1.addEventListener("iteminvoked", function(e) {
                var index = e.detail.itemIndex;
                e.detail.itemPromise.then(function(item) {
                    var message = new Windows.UI.Popups.MessageDialog(item.data.name);
                    message.showAsync();
                })
            })
        })
    }
    document.addEventListener("DOMContentLoaded", Initialize);
})();

ListView поддерживает следующие лейауты:
• The grid layout
• The list layout
• The cell-spanning layout

<div id="listView1"
   data-win-control="WinJS.UI.ListView"
   data-win-options="{itemTemplate: select('#template'),
   layout : {type:WinJS.UI.GridLayout,maximumRowsOrColumns : 1}}">
</div>


Можно также использовать:
• WinJS.UI.cellSpanningLayout
• WinJS.UI.ListLayout
Теги: