X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/25ef3491bd9ae007ff1fc2b0d7943e6eaaccf775..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/examples/grid/paging.js

diff --git a/examples/grid/paging.js b/examples/grid/paging.js
index 705d84c8..7a748a62 100644
--- a/examples/grid/paging.js
+++ b/examples/grid/paging.js
@@ -1,121 +1,142 @@
-/*!
- * Ext JS Library 3.0.3
- * Copyright(c) 2006-2009 Ext JS, LLC
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-Ext.onReady(function(){
+Ext.Loader.setConfig({enabled: true});
 
-    // create the Data Store
-    var store = new Ext.data.JsonStore({
-        root: 'topics',
-        totalProperty: 'totalCount',
-        idProperty: 'threadid',
-        remoteSort: true,
+Ext.Loader.setPath('Ext.ux', '../ux/');
+Ext.require([
+    'Ext.grid.*',
+    'Ext.data.*',
+    'Ext.util.*',
+    'Ext.toolbar.Paging',
+    'Ext.ux.PreviewPlugin',
+    'Ext.ModelManager',
+    'Ext.tip.QuickTipManager'
+]);
+
+
+
+Ext.onReady(function(){
+    Ext.tip.QuickTipManager.init();
 
+    Ext.define('ForumThread', {
+        extend: 'Ext.data.Model',
         fields: [
             'title', 'forumtitle', 'forumid', 'author',
             {name: 'replycount', type: 'int'},
             {name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
-            'lastposter', 'excerpt'
+            'lastposter', 'excerpt', 'threadid'
         ],
-
-        // 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'
-        })
+        idProperty: 'threadid'
     });
-    store.setDefaultSort('lastpost', 'desc');
 
+    // create the Data Store
+    var store = Ext.create('Ext.data.Store', {
+        pageSize: 50,
+        model: 'ForumThread',
+        remoteSort: true,
+        proxy: {
+            // load using script tags for cross domain, if the data in on the same domain as
+            // this page, an HttpProxy would be better
+            type: 'jsonp',
+            url: 'http://www.sencha.com/forum/topics-browse-remote.php',
+            reader: {
+                root: 'topics',
+                totalProperty: 'totalCount'
+            },
+            // sends single sort as multi parameter
+            simpleSortMode: true
+        },
+        sorters: [{
+            property: 'lastpost',
+            direction: '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 renderTopic(value, p, record) {
+        return Ext.String.format(
+            '<b><a href="http://sencha.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://sencha.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
+            value,
+            record.data.forumtitle,
+            record.getId(),
+            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']);
+
+    function renderLast(value, p, r) {
+        return Ext.String.format('{0}<br/>by {1}', Ext.Date.dateFormat(value, 'M j, Y, g:i a'), r.data['lastposter']);
     }
 
-    var grid = new Ext.grid.GridPanel({
-        width:700,
-        height:500,
-        title:'ExtJS.com - Browse Forums',
+
+    var pluginExpanded = true;
+    var grid = Ext.create('Ext.grid.Panel', {
+        width: 700,
+        height: 500,
+        title: 'ExtJS.com - Browse Forums',
         store: store,
-        trackMouseOver:false,
-        disableSelection:true,
+        disableSelection: true,
         loadMask: true,
-
+        viewConfig: {
+            id: 'gv',
+            trackOver: false,
+            stripeRows: false,
+            plugins: [{
+                ptype: 'preview',
+                bodyField: 'excerpt',
+                expanded: true,
+                pluginId: 'preview'
+            }]
+        },
         // grid columns
         columns:[{
-            id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
-            header: "Topic",
+            // id assigned so we can apply custom css (e.g. .x-grid-cell-topic b { color:#333 })
+            // TODO: This poses an issue in subclasses of Grid now because Headers are now Components
+            // therefore the id will be registered in the ComponentManager and conflict. Need a way to
+            // add additional CSS classes to the rendered cells.
+            id: 'topic',
+            text: "Topic",
             dataIndex: 'title',
-            width: 420,
+            flex: 1,
             renderer: renderTopic,
-            sortable: true
+            sortable: false
         },{
-            header: "Author",
+            text: "Author",
             dataIndex: 'author',
             width: 100,
             hidden: true,
             sortable: true
         },{
-            header: "Replies",
+            text: "Replies",
             dataIndex: 'replycount',
             width: 70,
             align: 'right',
             sortable: true
         },{
             id: 'last',
-            header: "Last Post",
+            text: "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,
+        bbar: Ext.create('Ext.PagingToolbar', {
             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();
+                pressed: pluginExpanded,
+                enableToggle: true,
+                toggleHandler: function(btn, pressed) {
+                    var preview = Ext.getCmp('gv').getPlugin('preview');
+                    preview.toggleExpanded(pressed);
                 }
             }]
-        })
+        }),
+        renderTo: 'topic-grid'
     });
 
-    // render it
-    grid.render('topic-grid');
-
     // trigger the data store load
-    store.load({params:{start:0, limit:25}});
+    store.loadPage(1);
 });