dojox/mobile/DataCarousel

Authors: Yoshiroh Kamiyama
Atsushi Ono
Developers:Yoshiroh Kamiyama
since:V1.8

Introduction

Deprecated. Since V1.8, use dojox/mobile/StoreCarousel instead.

DataCarousel is a subclass of dojox/mobile/Carousel which can generate contents according to the given dojo/data store.

DataCarousel.png

Constructor Parameters

Inherited from dojox/mobile/_DataMixin

Parameter Type Default Description
store Object null Reference to data provider object used by this widget.
query Object null A query that can be passed to 'store' to initially filter the items. See dojo/data for details.
queryOptions Object null An optional parameter for the query. See dojo/data for details.

Examples

Declarative example

In this example, no CarouselItem is defined as children of DataCarousel. The CarouselItems are generated according to sample.json. Each item in the json object is used as attributes for CarouselItem widget.

<!-- Need to load the theme files for Carousel and PageIndicator as well as the base theme file -->
<script type="text/javascript" src="dojox/mobile/deviceTheme.js"
        data-dojo-config="mblThemeFiles: ['base','Carousel','PageIndicator']"></script>
require([
    "dojox/mobile",
    "dojox/mobile/parser",
    "dojox/mobile/DataCarousel",
    "dojo/data/ItemFileReadStore"
]);
<div data-dojo-type="dojo/data/ItemFileReadStore"
        data-dojo-id="sampleStore" data-dojo-props='url:"sample.json"'></div>
<div id="carousel1" data-dojo-type="dojox/mobile/DataCarousel"
        data-dojo-props='store:sampleStore, height:"150px", navButton:true, numVisible:2, title:"Category"'>
</div>
// sample.json
{
    "items": [
        { "src": "images/dish.jpg", "value": "dish", "headerText": "dish" },
        { "src": "images/glass.jpg", "value": "glass", "headerText": "glass" },
        { "src": "images/stone.jpg", "value": "stone", "headerText": "stone" },
        { "src": "images/shell.jpg", "value": "shell", "headerText": "shell" }
    ]
}
DataCarousel-example1.png

Programmatic example

<!-- Need to load the theme files for Carousel and PageIndicator as well as the base theme file -->
<script type="text/javascript" src="dojox/mobile/deviceTheme.js"
        data-dojo-config="mblThemeFiles: ['base','Carousel','PageIndicator']"></script>
require([
    "dojo/ready",
    "dojo/data/ItemFileReadStore",
    "dojox/mobile/DataCarousel",
    "dojox/mobile",
    "dojox/mobile/parser"
], function(ready, ItemFileReadStore, DataCarousel){
    ready(function(){
        var sampleStore = new ItemFileReadStore({url: "sample.json"});
        var carousel = new DataCarousel({
            store: sampleStore,
            height: "150px",
            navButton: true,
            numVisible: 2,
            title: "Category"
        }, "carousel1");
        carousel.startup();
    });
});
<div id="carousel1"></div>
// sample.json
{
    "items": [
        { "src": "images/dish.jpg", "value": "dish", "headerText": "dish" },
        { "src": "images/glass.jpg", "value": "glass", "headerText": "glass" },
        { "src": "images/stone.jpg", "value": "stone", "headerText": "stone" },
        { "src": "images/shell.jpg", "value": "shell", "headerText": "shell" }
    ]
}
DataCarousel-example1.png

Filtering items

You can initially filter items by using "query" parameter. This example filters the items with value starting with "s".

<!-- Need to load the theme files for Carousel and PageIndicator as well as the base theme file -->
<script type="text/javascript" src="dojox/mobile/deviceTheme.js"
        data-dojo-config="mblThemeFiles: ['base','Carousel','PageIndicator']"></script>
require([
    "dojox/mobile",
    "dojox/mobile/parser",
    "dojox/mobile/DataCarousel",
    "dojo/data/ItemFileReadStore"
]);
<div data-dojo-type="dojo/data/ItemFileReadStore"
    data-dojo-id="sampleStore" data-dojo-props='url:"sample.json"'></div>
<div id="carousel1" data-dojo-type="dojox/mobile/DataCarousel"
    data-dojo-props='store:sampleStore, height:"150px", navButton:true, numVisible:2,
                     title:"Category", query:{value:"s*"}'>
</div>
// sample.json
{
    "items": [
        { "src": "images/dish.jpg", "value": "dish", "headerText": "dish" },
        { "src": "images/glass.jpg", "value": "glass", "headerText": "glass" },
        { "src": "images/stone.jpg", "value": "stone", "headerText": "stone" },
        { "src": "images/shell.jpg", "value": "shell", "headerText": "shell" }
    ]
}
DataCarousel-example5.png