add extjs 6.0.1 sources

[extjs.git] / extjs / examples / modern / touchtomatoes / app / view / MoviesListView.js

Ext.define('TouchTomatoes.view.MoviesListView', {\r
    extend: 'Ext.Container',\r
    xtype: 'movieslistview',\r
    requires: [\r
        'Ext.dataview.DataView',\r
        'Ext.dataview.List',\r
        'TouchTomatoes.proxy.RottenTomatoes', 'TouchTomatoes.model.Movie'],\r
    config: {\r
        layout: "vbox",\r
        title: null,\r
        header: {\r
            iconCls: "fa fa-bars",\r
            ui: "plain",\r
            docked: "left"\r
        },\r
        menu: null,\r
        enablePaging: false,\r
        autoLoad: false,\r
        proxy: {}\r
    },\r
    _headerBar: null,\r
    _list: null,\r
    _store: null,\r
    _itemTemplate: null,\r
\r
    initialize: function() {\r
        this.create();\r
    },\r
\r
    create: function() {\r
        this.removeAll(false);\r
        this.add(this.getHeaderBar());\r
        this.add(this.getList());\r
\r
        this.down("list").getStore().load();\r
    },\r
\r
\r
    getHeaderBar: function() {\r
        if (!this._headerBar) {\r
            this._headerBar = Ext.create("Ext.Toolbar", {\r
                xtype: "toolbar",\r
                layout: {\r
                    type: 'hbox',\r
                    pack: 'center'\r
                },\r
                title: this.getTitle(),\r
                items: this.getHeader()\r
            });\r
        }\r
        return this._headerBar;\r
    },\r
\r
    getList: function() {\r
        if (!this._list) {\r
            this._list = Ext.create("Ext.dataview.List", {\r
                flex: 1,\r
                emptyText: 'No movies found.',\r
                loadingText: "Loading Movies",\r
                cls: 'grid',\r
                plugins: this.getEnablePaging() ? {\r
                    xclass: 'Ext.plugin.ListPaging',\r
                    autoPaging: true\r
                } : null,\r
                mode: "simple",\r
                store: this.getStore(),\r
                itemTpl: this.getItemTemplate()\r
            });\r
        }\r
        return this._list;\r
    },\r
\r
    getStore: function() {\r
        if (!this._store) {\r
            this._store = Ext.create("Ext.data.Store", {\r
                model: "TouchTomatoes.model.Movie",\r
                autoLoad: this.getAutoLoad() === true,\r
                remoteFilter: true,\r
                pageSize: 20,\r
                proxy: this.getProxy()\r
            });\r
        }\r
        return this._store;\r
    },\r
\r
    getItemTemplate: function() {\r
        if (!this._itemTemplate) {\r
            this._itemTemplate = new Ext.XTemplate(\r
                '<div class="movie">',\r
                '<div class="title">{title}</div>',\r
                '<div class="img" style="background-image: url(\'{posters.detailed}\')"></div>',\r
                '<div class="ratings">',\r
                '<div class="user fa fa-user<tpl if=\"ratings.audience_score &gt; 60\"> success</tpl><tpl if=\"ratings.audience_score &lt; 0\"> unknown</tpl>"><tpl if=\"ratings.audience_score &gt;= 0\">{ratings.audience_score}<tpl else>&nbsp;</tpl></div>',\r
                '<div class="spacer"></div>',\r
                '<div class="critics fa fa-pencil<tpl if=\"ratings.critics_score &gt; 60\"> success</tpl><tpl if=\"ratings.critics_score &lt; 0\"> unknown</tpl>"><tpl if=\"ratings.critics_score &gt;= 0\">{ratings.critics_score}<tpl else>&nbsp;</tpl></div>',\r
                '</div>',\r
                '</div>'\r
            )\r
        }\r
        return this._itemTemplate;\r
    },\r
\r
    applyProxy: function(config) {\r
        if (Ext.isSimpleObject(config)) {\r
            return Ext.factory(config, 'TouchTomatoes.proxy.RottenTomatoes')\r
        }\r
        return config;\r
    },\r
\r
    updateProxy: function(value) {\r
        if (this._store) {\r
            this._store.setProxy(value);\r
            this._store.load();\r
        }\r
    },\r
\r
    updateEnablePaging: function(currentValue, oldValue) {\r
        if (currentValue != oldValue && (currentValue != false && oldValue != undefined)) {\r
            this.create();\r
            this._store.load();\r
        }\r
        return currentValue;\r
    }\r
});\r