add extjs 6.0.1 sources

[extjs.git] / extjs / build / examples / classic / grid / filtered-buffered-store.js

Ext.require([\r
    'Ext.grid.*',\r
    'Ext.data.*',\r
    'Ext.util.*',\r
    'Ext.ux.form.SearchField'\r
]);\r
\r
Ext.onReady(function(){\r
    Ext.define('ForumThread', {\r
        extend: 'Ext.data.Model',\r
        fields: [{\r
            name: 'title',\r
            mapping: 'topic_title'\r
        }, {\r
            name: 'forumtitle',\r
            mapping: 'forum_title'\r
        }, {\r
            name: 'forumid',\r
            type: 'int'\r
        }, {\r
            name: 'username',\r
            mapping: 'author'\r
        }, {\r
                name: 'replycount', \r
                mapping: 'reply_count',\r
                type: 'int'\r
        }, {\r
                name: 'lastpost', \r
                mapping: 'post_time', \r
                type: 'date', \r
                dateFormat: 'timestamp'\r
        },\r
            'lastposter', 'excerpt', 'topic_id'\r
        ],\r
        idProperty: 'post_id'\r
    });\r
\r
    // create the Data Store\r
    var store = Ext.create('Ext.data.BufferedStore', {\r
        id: 'store',\r
        model: 'ForumThread',\r
        \r
        // The topics-remote.php script appears to be hardcoded to use 50, and ignores this parameter, so we\r
        // are forced to use 50 here instead of a possibly more efficient value.\r
        pageSize: 50,\r
\r
        // This web service seems slow, so keep lots of data in the pipeline ahead!\r
        leadingBufferZone: 1000,\r
        proxy: {\r
            // load using script tags for cross domain, if the data in on the same domain as\r
            // this page, an HttpProxy would be better\r
            type: 'jsonp',\r
            url: 'http://www.sencha.com/forum/topics-remote.php',\r
            reader: {\r
                rootProperty: 'topics',\r
                totalProperty: 'totalCount'\r
            },\r
            // sends single sort as multi parameter\r
            simpleSortMode: true,\r
            \r
            // Parameter name to send filtering information in\r
            filterParam: 'query'\r
        },\r
        listeners: {\r
            totalcountchange: onStoreSizeChange\r
        },\r
        remoteFilter: true,\r
        autoLoad: true\r
    });\r
    \r
    function onStoreSizeChange() {\r
        grid.down('#status').update({count: store.getTotalCount()});\r
    }\r
\r
    function renderTopic(value, p, record) {\r
        return Ext.String.format(\r
            '<a href="http://sencha.com/forum/showthread.php?p={1}" target="_blank">{0}</a>',\r
            value,\r
            record.getId()\r
        );\r
    }\r
\r
    var grid = Ext.create('Ext.grid.Panel', {\r
        width: 700,\r
        height: 470,\r
        collapsible: true,\r
        title: 'ExtJS.com - Browse Forums',\r
        store: store,\r
        loadMask: true,\r
        dockedItems: [{\r
            dock: 'top',\r
            xtype: 'toolbar',\r
            items: [{\r
                width: 400,\r
                fieldLabel: 'Search',\r
                labelWidth: 50,\r
                xtype: 'searchfield',\r
                store: store\r
            }, '->', {\r
                xtype: 'component',\r
                itemId: 'status',\r
                tpl: 'Matching threads: {count}',\r
                style: 'margin-right:5px'\r
            }]\r
        }],\r
        selModel: {\r
            pruneRemoved: false\r
        },\r
        multiSelect: true,\r
        viewConfig: {\r
            trackOver: false,\r
            emptyText: '<h1 style="margin:20px">No matching results</h1>'\r
        },\r
        // grid columns\r
        columns:[{\r
            xtype: 'rownumberer',\r
            width: 50,\r
            sortable: false\r
        },{\r
            tdCls: 'x-grid-cell-topic',\r
            text: "Topic",\r
            dataIndex: 'title',\r
            flex: 1,\r
            renderer: renderTopic,\r
            sortable: false\r
        },{\r
            text: "Author",\r
            dataIndex: 'username',\r
            width: 100,\r
            hidden: true,\r
            sortable: false\r
        },{\r
            text: "Replies",\r
            dataIndex: 'replycount',\r
            align: 'center',\r
            width: 70,\r
            sortable: false\r
        },{\r
            id: 'last',\r
            text: "Last Post",\r
            dataIndex: 'lastpost',\r
            width: 130,\r
            renderer: Ext.util.Format.dateRenderer('n/j/Y g:i A'),\r
            sortable: false\r
        }],\r
        renderTo: Ext.getBody()\r
    });\r
});\r