dojox/mobile/StoreCarousel

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

Introduction

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

StoreCarousel.png

Constructor Parameters

Inherited from dojox/mobile/_StoreMixin

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/store for details.
queryOptions Object null An optional parameter for the query. See dojo/store for details.
labelProperty String "label" A property name (a property in the dojo/store item) that specifies that item's label.
childrenProperty String "children" A property name (a property in the dojo/store item) that specifies that item's children.

Examples

Declarative example

In this example, no CarouselItem is defined as children of StoreCarousel. 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/StoreCarousel",
    "dojo/store/JsonRest"
]);
<div data-dojo-type="dojo/store/JsonRest"
        data-dojo-id="sampleStore" data-dojo-props='target:"sample.json"'></div>
<div id="carousel1" data-dojo-type="dojox/mobile/StoreCarousel"
        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" }
    ]
}
StoreCarousel-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/store/JsonRest",
    "dojox/mobile/StoreCarousel",
    "dojox/mobile",
    "dojox/mobile/parser"
], function(ready, JsonRest, StoreCarousel){
    ready(function(){
        var sampleStore = new JsonRest({target: "sample.json"});
        var carousel = new StoreCarousel({
            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" }
    ]
}
StoreCarousel-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/StoreCarousel",
    "dojo/store/Memory"
], function(){
    storeData = {
        "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" }
        ]
    };
});
<div data-dojo-type="dojo/store/Memory"
    data-dojo-id="sampleStore" data-dojo-props='data:storeData'></div>
<div id="carousel1" data-dojo-type="dojox/mobile/StoreCarousel"
    data-dojo-props='store:sampleStore, height:"150px", navButton:true, numVisible:2,
                     title:"Category", query:{value:/^s/}'>
</div>
StoreCarousel-example5.png