X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6a7e4474cba9d8be4b2ec445e10f1691f7277c50..3789b528d8dd8aad4558e38e22d775bcab1cbd36:/examples/grid/sliding-pager.js

diff --git a/examples/grid/sliding-pager.js b/examples/grid/sliding-pager.js
index 7ed12cc7..59748fb0 100644
--- a/examples/grid/sliding-pager.js
+++ b/examples/grid/sliding-pager.js
@@ -1,9 +1,16 @@
-/*!
- * Ext JS Library 3.2.0
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
+Ext.Loader.setConfig({enabled: true});
+
+Ext.Loader.setPath('Ext.ux', '../ux/');
+
+Ext.require([
+    'Ext.data.*',
+    'Ext.grid.*',
+    'Ext.util.*',
+    'Ext.ux.data.PagingMemoryProxy',
+    'Ext.toolbar.Paging',
+    'Ext.ux.SlidingPager'
+]);
+
 Ext.onReady(function(){
 
     var myData = [
@@ -58,53 +65,84 @@ Ext.onReady(function(){
         return val;
     }
 
-    // create the data store
-    var store = new Ext.data.Store({
-        proxy: new Ext.ux.data.PagingMemoryProxy(myData),
-        remoteSort:true,
-        sortInfo: {field:'price', direction:'ASC'},
-        reader: new Ext.data.ArrayReader({
-            fields: [
-               {name: 'company'},
-               {name: 'price', type: 'float'},
-               {name: 'change', type: 'float'},
-               {name: 'pctChange', type: 'float'},
-               {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
-            ]
-        })
+    // register model
+    Ext.define('Company', {
+        extend: 'Ext.data.Model',
+        idProperty: 'company',
+        fields: [
+           {name: 'company'},
+           {name: 'price', type: 'float'},
+           {name: 'change', type: 'float'},
+           {name: 'pctChange', type: 'float'},
+           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
+        ]        
     });
+    
 
+    // create the data store
+    var store = Ext.create('Ext.data.Store', {
+        model: 'Company',
+        remoteSort: true,
+        pageSize: 10,
+        proxy: {
+            type: 'pagingmemory',
+            data: myData,
+            reader: {
+                type: 'array'
+            }
+        }
+    });
+    
     // create the Grid
-    var grid = new Ext.grid.GridPanel({
+    var grid = Ext.createWidget('gridpanel', {
+        title:'Sliding Pager',
         store: store,
-        columns: [
-            {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
-            {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
-            {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
-            {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
-            {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
-        ],
+        columns: [{
+                id:'company',
+                text: 'Company',
+                sortable: true,
+                dataIndex: 'company',
+                flex: 1
+            },{
+                text: 'Price',
+                sortable: true,
+                renderer: Ext.util.Format.usMoney,
+                dataIndex: 'price',
+                width: 75
+            },{
+                text: 'Change',
+                sortable: true,
+                renderer: change,
+                dataIndex: 'change',
+                width: 75
+            },{
+                text: '% Change',
+                sortable: true,
+                renderer: pctChange,
+                dataIndex: 'pctChange',
+                width: 75
+            },{
+                text: 'Last Updated',
+                sortable: true,
+                dataIndex: 'lastChange',
+                width: 75
+            }],
         stripeRows: true,
-        autoExpandColumn: 'company',
         height:320,
         width:600,
         frame:true,
-        title:'Sliding Pager',
-
-        plugins: new Ext.ux.PanelResizer({
-            minHeight: 100
-        }),
-
-        bbar: new Ext.PagingToolbar({
+        resizable: {
+            handles: 's'  
+        },
+        bbar: Ext.create('Ext.PagingToolbar', {
             pageSize: 10,
             store: store,
             displayInfo: true,
-
-            plugins: new Ext.ux.SlidingPager()
+            plugins: Ext.create('Ext.ux.SlidingPager', {})
         })
     });
 
     grid.render('grid-example');
 
-    store.load({params:{start:0, limit:10}});
+    store.load();
 });
\ No newline at end of file