-/*!
- * Ext JS Library 3.3.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 = [
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