add extjs 6.0.1 sources

[extjs.git] / extjs / build / examples / classic / view / animated-dataview.js

Ext.require([\r
    'Ext.data.*',\r
    'Ext.util.*',\r
    'Ext.view.View',\r
    'Ext.ux.DataView.Animated',\r
    'Ext.XTemplate',\r
    'Ext.panel.Panel',\r
    'Ext.layout.container.Fit',\r
    'Ext.toolbar.*',\r
    'Ext.slider.Multi'\r
]);\r
\r
Ext.onReady(function() {\r
    //data to be loaded into the ArrayStore\r
    var data = [\r
        [true,  false, 1,  "LG KS360", 54, "240 x 320 pixels", "2 Megapixel", "Pink", "Slider", 359, 2.400000],\r
        [true,  true,  2,  "Sony Ericsson C510a Cyber-shot", 180, "320 x 240 pixels", "3.2 Megapixel", "Future black", "Candy bar", 11, 0.000000],\r
        [true,  true,  3,  "LG PRADA KE850", 155, "240 x 400 pixels", "2 Megapixel", "Black", "Candy bar", 113, 0.000000],\r
        [true,  true,  4,  "Nokia N900 Smartphone 32 GB", 499, "800 x 480 pixels", "5 Megapixel", "( the image of the product displayed may be of a different color )", "Slider", 320, 3.500000],\r
        [true,  false, 5,  "Motorola RAZR V3", 65, "96 x 80 pixels", "0.3 Megapixel", "Silver", "Folder type phone", 5, 2.200000],\r
        [true,  true,  6,  "LG KC910 Renoir", 242, "240 x 400 pixels", "8 Megapixel", "Black", "Candy bar", 79, 0.000000],\r
        [true,  true,  7,  "BlackBerry Curve 8520 BlackBerry", 299, "320 x 240 pixels", "2 Megapixel", "Frost", "Candy bar", 320, 2.640000],\r
        [true,  true,  8,  "Sony Ericsson W580i Walkman", 120, "240 x 320 pixels", "2 Megapixel", "Urban gray", "Slider", 1, 0.000000],\r
        [true,  true,  9,  "Nokia E63 Smartphone 110 MB", 170, "320 x 240 pixels", "2 Megapixel", "Ultramarine blue", "Candy bar", 319, 2.360000],\r
        [true,  true,  10, "Sony Ericsson W705a Walkman", 274, "320 x 240 pixels", "3.2 Megapixel", "Luxury silver", "Slider", 5, 0.000000],\r
        [false, false, 11, "Nokia 5310 XpressMusic", 140, "320 x 240 pixels", "2 Megapixel", "Blue", "Candy bar", 344, 2.000000],\r
        [false, true,  12, "Motorola SLVR L6i", 50, "128 x 160 pixels", "", "Black", "Candy bar", 38, 0.000000],\r
        [false, true,  13, "T-Mobile Sidekick 3 Smartphone 64 MB", 75, "240 x 160 pixels", "1.3 Megapixel", "", "Sidekick", 115, 0.000000],\r
        [false, true,  14, "Audiovox CDM8600", 5, "", "", "", "Folder type phone", 1, 0.000000],\r
        [false, true,  15, "Nokia N85", 315, "320 x 240 pixels", "5 Megapixel", "Copper", "Dual slider", 143, 2.600000],\r
        [false, true,  16, "Sony Ericsson XPERIA X1", 399, "800 x 480 pixels", "3.2 Megapixel", "Solid black", "Slider", 14, 0.000000],\r
        [false, true,  17, "Motorola W377", 77, "128 x 160 pixels", "0.3 Megapixel", "", "Folder type phone", 35, 0.000000],\r
        [true,  true,  18, "LG Xenon GR500", 1, "240 x 400 pixels", "2 Megapixel", "Red", "Slider", 658, 2.800000],\r
        [true,  false, 19, "BlackBerry Curve 8900 BlackBerry", 349, "480 x 360 pixels", "3.2 Megapixel", "", "Candy bar", 21, 2.440000],\r
        [true,  false, 20, "Samsung SGH U600 Ultra Edition 10.9", 135, "240 x 320 pixels", "3.2 Megapixel", "", "Slider", 169, 2.200000]\r
    ];\r
\r
    Ext.define('Mobile', {\r
        extend: 'Ext.data.Model',\r
        fields: [\r
            {name: 'hasEmail', type: 'bool'},\r
            {name: 'hasCamera', type: 'bool'},\r
            {name: 'id', type: 'int'},\r
            'name',\r
            {name: 'price', type: 'int'},\r
            'screen',\r
            'camera',\r
            'color',\r
            'type',\r
            {name: 'reviews', type: 'int'},\r
            {name: 'screen-size', type: 'int'}\r
        ]\r
    });\r
\r
    var store = Ext.create('Ext.data.ArrayStore', {\r
        model: 'Mobile',\r
        sortInfo: {\r
            field    : 'name',\r
            direction: 'ASC'\r
        },\r
        data: data\r
    });\r
\r
    //filters the store based on the current slider values\r
    function filterData(slider) {\r
        var values  = slider.getValues();\r
\r
        store.getFilters().replaceAll({\r
            fn: function(record) {\r
                return record.get('price') >= values[0] && record.get('price') <= values[1];\r
            }\r
        });\r
\r
        store.sort('name', 'ASC');\r
    }\r
\r
    var dataview = Ext.create('Ext.view.View', {\r
        store: store,\r
        tpl  : Ext.create('Ext.XTemplate',\r
            '<tpl for=".">',\r
                '<div class="phone">',\r
                    '<img width="64" height="64" src="images/phones/{[values.name.replace(/ /g, "-")]}.png" />',\r
                    '<strong>{name}</strong>',\r
                    '<span>{price:usMoney} ({reviews} Review{[values.reviews == 1 ? "" : "s"]})</span>',\r
                '</div>',\r
            '</tpl>'\r
        ),\r
\r
        plugins : [\r
            Ext.create('Ext.ux.DataView.Animated', {\r
                duration  : 550,\r
                idProperty: 'id'\r
            })\r
        ],\r
        id: 'phones',\r
\r
        itemSelector: 'div.phone',\r
        overItemCls : 'phone-hover',\r
        multiSelect : true,\r
        scrollable  : true\r
    });\r
\r
    var phoneSlider = Ext.create('Ext.slider.Multi', {\r
        hideLabel: true,\r
        width    : 300,\r
        minValue : 0,\r
        maxValue : 500,\r
        values   : [80, 320],\r
\r
        listeners: {\r
            changecomplete: filterData\r
        }\r
    });\r
\r
    Ext.create('Ext.panel.Panel', {\r
        title: 'Animated DataView',\r
        layout: 'fit',\r
        items : dataview,\r
        height: 555,\r
        width : 650,\r
        tbar  : [\r
            'Filter phone price:',\r
            ' ',\r
            phoneSlider\r
        ],\r
        renderTo: 'docbody'\r
    });\r
\r
    //perform initial filter\r
    filterData(phoneSlider);\r
});\r