Grid View

id: com.appcelerator.grid

The Grid widget provides a cross-platform grid of views that automatically lay themselves out in the view similar to the iOS native Dashboard control.

Manifest

• Version: 1.0 (stable)
• Supported Platforms: iOS, Android, Mobile Web

Quick Start

Adding the Grid Widget to Your Alloy Project

In your application's config.json file you will want to include the following line in your dependencies:

 "dependencies": {
     "com.appcelerator.grid":"1.0"
 }

Creating a Local Copy

To create a copy local to your application so that you can further modify it, then you will need to:

1. Create a widgets directory in your app directory if it does not already exist.
2. Copy the com.appcelerator.grid folder into your app/widgets directory.

Create a Grid in the View

You can add a Grid to a view by requiring the Grid widget.

    <Widget id="grid" src="com.appcelerator.grid"/>

Assign it an ID that you can use in your controller, for example, id="grid". You can now access the Grid using $.grid in your controller.

Initializing the Grid in the Controller

The grid does not have any items in it until you initialize it in your controller. Before you open your window, you will want to call the grid with the init method. For example:

     $.grid.init({
         items: [
              { id : '1', click: function (e) { alert("clicked!"); }, crossClick: function (e) { alert("cross clicked!"); }, backgroundImage : '/images/photo.png'},
              { id : '2'},
              { id : '3', click: function (e) { alert("clicked!"); }},
              { id : '4', click: function (e) { alert("clicked!"); }, crossClick: function (e) { alert("cross clicked!"); }},
              { id : '5', click: function (e) { alert("clicked!"); }, crossClick: function (e) { alert("cross clicked!"); }, backgroundImage : '/images/photo.png'},
              { id : '6', click: function (e) { alert("clicked!"); }, crossClick: function (e) { alert("cross clicked!"); }, backgroundColor : 'gray'},
         ],
         itemWidth: Alloy.isTablet ? 200: 100,
         itemHeight: Alloy.isTablet ? 200 : 100,
         backgroundColor: red,
         backgroundSelectedColor: brightred
     });

Relaying out the Grid

If you ever have a need to relayout the Grid for a reason other than orientation (which is automatically supported), you can call the relayout method directly.

     $.grid.relayout();

The grid will calculate a new gutter between the items and animate the items into place one at a time.

Note: If you use autoLayout="true" (default) then a Ti.Gesture event handler will be used to relayout the widget based on orientation changes. To avoid any potential memory leaks associated with using these global event handlers, you must call the destroy() function on the widget when you are done using it. This will free all memory resources associated with the widget. If you have autoLayout="false", then you are not required to call destroy() when you are done with the widget.