Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / examples / grid / paging.js
index 41b3a79..78a0f02 100644 (file)
-/*\r
- * Ext JS Library 2.2.1\r
- * Copyright(c) 2006-2009, Ext JS, LLC.\r
- * licensing@extjs.com\r
- * \r
- * http://extjs.com/license\r
- */\r
-\r
-Ext.onReady(function(){\r
-\r
-    // create the Data Store\r
-    var store = new Ext.data.JsonStore({\r
-        root: 'topics',\r
-        totalProperty: 'totalCount',\r
-        idProperty: 'threadid',\r
-        remoteSort: true,\r
-\r
-        fields: [\r
-            'title', 'forumtitle', 'forumid', 'author',\r
-            {name: 'replycount', type: 'int'},\r
-            {name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},\r
-            'lastposter', 'excerpt'\r
-        ],\r
-\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
-        proxy: new Ext.data.ScriptTagProxy({\r
-            url: 'http://extjs.com/forum/topics-browse-remote.php'\r
-        })\r
-    });\r
-    store.setDefaultSort('lastpost', 'desc');\r
-\r
-\r
-    // pluggable renders\r
-    function renderTopic(value, p, record){\r
-        return String.format(\r
-                '<b><a href="http://extjs.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',\r
-                value, record.data.forumtitle, record.id, record.data.forumid);\r
-    }\r
-    function renderLast(value, p, r){\r
-        return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);\r
-    }\r
-\r
-    var pagingBar = new Ext.PagingToolbar({\r
-        pageSize: 25,\r
-        store: store,\r
-        displayInfo: true,\r
-        displayMsg: 'Displaying topics {0} - {1} of {2}',\r
-        emptyMsg: "No topics to display",\r
-        \r
-        items:[\r
-            '-', {\r
-            pressed: true,\r
-            enableToggle:true,\r
-            text: 'Show Preview',\r
-            cls: 'x-btn-text-icon details',\r
-            toggleHandler: function(btn, pressed){\r
-                var view = grid.getView();\r
-                view.showPreview = pressed;\r
-                view.refresh();\r
-            }\r
-        }]\r
-    });\r
-\r
-    var grid = new Ext.grid.GridPanel({\r
-        el:'topic-grid',\r
-        width:700,\r
-        height:500,\r
-        title:'ExtJS.com - Browse Forums',\r
-        store: store,\r
-        trackMouseOver:false,\r
-        disableSelection:true,\r
-        loadMask: true,\r
-\r
-        // grid columns\r
-        columns:[{\r
-            id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })\r
-            header: "Topic",\r
-            dataIndex: 'title',\r
-            width: 420,\r
-            renderer: renderTopic,\r
-            sortable: true\r
-        },{\r
-            header: "Author",\r
-            dataIndex: 'author',\r
-            width: 100,\r
-            hidden: true,\r
-            sortable: true\r
-        },{\r
-            header: "Replies",\r
-            dataIndex: 'replycount',\r
-            width: 70,\r
-            align: 'right',\r
-            sortable: true\r
-        },{\r
-            id: 'last',\r
-            header: "Last Post",\r
-            dataIndex: 'lastpost',\r
-            width: 150,\r
-            renderer: renderLast,\r
-            sortable: true\r
-        }],\r
-\r
-        // customize view config\r
-        viewConfig: {\r
-            forceFit:true,\r
-            enableRowBody:true,\r
-            showPreview:true,\r
-            getRowClass : function(record, rowIndex, p, store){\r
-                if(this.showPreview){\r
-                    p.body = '<p>'+record.data.excerpt+'</p>';\r
-                    return 'x-grid3-row-expanded';\r
-                }\r
-                return 'x-grid3-row-collapsed';\r
-            }\r
-        },\r
-\r
-        // paging bar on the bottom\r
-        bbar: pagingBar\r
-    });\r
-\r
-    // render it\r
-    grid.render();\r
-\r
-    // trigger the data store load\r
-    store.load({params:{start:0, limit:25}});\r
-});\r
-\r
-\r
-\r
-/**\r
- * @class Ext.ux.SliderTip\r
- * @extends Ext.Tip\r
- * Simple plugin for using an Ext.Tip with a slider to show the slider value\r
- */\r
-Ext.ux.SliderTip = Ext.extend(Ext.Tip, {\r
-    minWidth: 10,\r
-    offsets : [0, -10],\r
-    init : function(slider){\r
-        slider.on('dragstart', this.onSlide, this);\r
-        slider.on('drag', this.onSlide, this);\r
-        slider.on('dragend', this.hide, this);\r
-        slider.on('destroy', this.destroy, this);\r
-    },\r
-\r
-    onSlide : function(slider){\r
-        this.show();\r
-        this.body.update(this.getText(slider));\r
-        this.doAutoWidth();\r
-        this.el.alignTo(slider.thumb, 'b-t?', this.offsets);\r
-    },\r
-\r
-    getText : function(slider){\r
-        return slider.getValue();\r
-    }\r
-});\r
+/*!
+ * Ext JS Library 3.3.1
+ * Copyright(c) 2006-2010 Sencha Inc.
+ * licensing@sencha.com
+ * http://www.sencha.com/license
+ */
+Ext.onReady(function(){
+
+    // create the Data Store
+    var store = new Ext.data.JsonStore({
+        root: 'topics',
+        totalProperty: 'totalCount',
+        idProperty: 'threadid',
+        remoteSort: true,
+
+        fields: [
+            'title', 'forumtitle', 'forumid', 'author',
+            {name: 'replycount', type: 'int'},
+            {name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
+            'lastposter', 'excerpt'
+        ],
+
+        // load using script tags for cross domain, if the data in on the same domain as
+        // this page, an HttpProxy would be better
+        proxy: new Ext.data.ScriptTagProxy({
+            url: 'http://extjs.com/forum/topics-browse-remote.php'
+        })
+    });
+    store.setDefaultSort('lastpost', 'desc');
+
+
+    // pluggable renders
+    function renderTopic(value, p, record){
+        return String.format(
+                '<b><a href="http://extjs.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
+                value, record.data.forumtitle, record.id, record.data.forumid);
+    }
+    function renderLast(value, p, r){
+        return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
+    }
+
+    var grid = new Ext.grid.GridPanel({
+        width:700,
+        height:500,
+        title:'ExtJS.com - Browse Forums',
+        store: store,
+        trackMouseOver:false,
+        disableSelection:true,
+        loadMask: true,
+
+        // grid columns
+        columns:[{
+            id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
+            header: "Topic",
+            dataIndex: 'title',
+            width: 420,
+            renderer: renderTopic,
+            sortable: true
+        },{
+            header: "Author",
+            dataIndex: 'author',
+            width: 100,
+            hidden: true,
+            sortable: true
+        },{
+            header: "Replies",
+            dataIndex: 'replycount',
+            width: 70,
+            align: 'right',
+            sortable: true
+        },{
+            id: 'last',
+            header: "Last Post",
+            dataIndex: 'lastpost',
+            width: 150,
+            renderer: renderLast,
+            sortable: true
+        }],
+
+        // customize view config
+        viewConfig: {
+            forceFit:true,
+            enableRowBody:true,
+            showPreview:true,
+            getRowClass : function(record, rowIndex, p, store){
+                if(this.showPreview){
+                    p.body = '<p>'+record.data.excerpt+'</p>';
+                    return 'x-grid3-row-expanded';
+                }
+                return 'x-grid3-row-collapsed';
+            }
+        },
+
+        // paging bar on the bottom
+        bbar: new Ext.PagingToolbar({
+            pageSize: 25,
+            store: store,
+            displayInfo: true,
+            displayMsg: 'Displaying topics {0} - {1} of {2}',
+            emptyMsg: "No topics to display",
+            items:[
+                '-', {
+                pressed: true,
+                enableToggle:true,
+                text: 'Show Preview',
+                cls: 'x-btn-text-icon details',
+                toggleHandler: function(btn, pressed){
+                    var view = grid.getView();
+                    view.showPreview = pressed;
+                    view.refresh();
+                }
+            }]
+        })
+    });
+
+    // render it
+    grid.render('topic-grid');
+
+    // trigger the data store load
+    store.load({params:{start:0, limit:25}});
+});