PDA

View Full Version : Paging Toolbar is not working



WhittenMike807
14 Mar 2011, 11:32 AM
I have the following code below, the paging toolbar shows up, but doesn't allow me to page...


/*!
* Ext JS Library 3.3.1
* Copyright(c) 2006-2010 Sencha Inc.
* [email protected]
* http://www.sencha.com/license
*/

Ext.onReady(function(){

Ext.QuickTips.init();

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var xg = Ext.grid;
// shared reader
var reader = new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price'},
{name: 'change'},
{name: 'pctChange'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]);


////////////////////////////////////////////////////////////////////////////////////////
// Grid 3
////////////////////////////////////////////////////////////////////////////////////////
var grid3 = new xg.GridPanel({
store: new Ext.data.Store({
reader: reader,
data: xg.dummyData
}),
cm: new xg.ColumnModel([
{id:'company',header: "Company Name", width: 30, sortable: true, dataIndex: 'company'},
{header: "Phone", width: 20, sortable: true, dataIndex: 'price', align: 'center'},
{header: "Asks / Amount", width: 20, sortable: true, dataIndex: 'change', align: 'center'},
{header: "Status", width: 20, sortable: true, dataIndex: 'pctChange', align: 'center'},
{header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange', align: 'center' }
]),
viewConfig: {
forceFit:true,
scrollOffset: -2
},
stripeRows: true,
width:700,
height: 300,
autoSizeColumns: true,
trackMouseOver:false,
disableSelection:true,
loadMask: true,
iconCls:'icon-grid',
renderTo: 'grid1',
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: grid3,
displayInfo: true
}),
// config options for stateful behavior
stateful: true,
stateId: 'grid',
});

});



// Array data for the grids
Ext.grid.dummyData = [
['Abilene Banking Center','903-534-2231','1 - $5400','New','10/6 12:00am'],
['Academy Sports & Outdoor','310-536-0611','-','Hot','10/6 12:00am'],
['Access Media Works','818-999-3212','-','Cold','10/5 12:00am'],
['Ad Club','248-974-7396','-','New','10/3 12:00am'],
['Ad Results, Inc.','415.775.2107','-','Hot','10/1 12:00am'],
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],

];

brittongr
14 Mar 2011, 12:08 PM
Are you forgetting to call loadData??



// manually load local data
store.loadData(myData);

WhittenMike807
14 Mar 2011, 12:19 PM
And you'll have to forgive my lack of knowledge of this, but i added that code you sent, and now it doesn't show up.

brittongr
14 Mar 2011, 1:54 PM
And you'll have to forgive my lack of knowledge of this, but i added that code you sent, and now it doesn't show up.

Don't worry, and sorry because i sent the code with other variable names...

try this



Ext.onReady(function(){

Ext.QuickTips.init();

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var xg = Ext.grid;
// shared reader
var reader = new Ext.data.ArrayReader({}, [
{
name: 'company'
},
{
name: 'price'
},
{
name: 'change'
},
{
name: 'pctChange'
},
{
name: 'lastChange',
type: 'date',
dateFormat: 'n/j h:ia'
}]);


////////////////////////////////////////////////////////////////////////////////////////
// Grid 3
////////////////////////////////////////////////////////////////////////////////////////
var grid3 = new xg.GridPanel(
{
store: new Ext.data.Store(
{
reader: reader,
data: xg.dummyData
}),
cm: new xg.ColumnModel([
{
id: 'company',
header: "Company Name",
width: 30,
sortable: true,
dataIndex: 'company'
},
{
header: "Phone",
width: 20,
sortable: true,
dataIndex: 'price',
align: 'center'
},
{
header: "Asks / Amount",
width: 20,
sortable: true,
dataIndex: 'change',
align: 'center'
},
{
header: "Status",
width: 20,
sortable: true,
dataIndex: 'pctChange',
align: 'center'
},
{
header: "Last Updated",
width: 20,
sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange',
align: 'center'
}]),
viewConfig:
{
forceFit: true,
scrollOffset: -2
},
stripeRows: true,
width: 700,
height: 300,
autoSizeColumns: true,
trackMouseOver: false,
disableSelection: true,
loadMask: true,
iconCls: 'icon-grid',
renderTo: 'grid1',
bbar: new Ext.PagingToolbar(
{
pageSize: 10,
store: grid3,
displayInfo: true
}),
// config options for stateful behavior
stateful: true,
stateId: 'grid',
});

grid3.loadData(Ext.grid.dummyData);
});



// Array data for the grids
Ext.grid.dummyData = [['Abilene Banking Center', '903-534-2231', '1 - $5400', 'New', '10/6 12:00am'], ['Academy Sports & Outdoor', '310-536-0611', '-', 'Hot', '10/6 12:00am'], ['Access Media Works', '818-999-3212', '-', 'Cold', '10/5 12:00am'], ['Ad Club', '248-974-7396', '-', 'New', '10/3 12:00am'], ['Ad Results, Inc.', '415.775.2107', '-', 'Hot', '10/1 12:00am'], ['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'], ['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'], ['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'], ['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'], ['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'], ['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'], ['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'], ['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'], ['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'], ['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am'], ['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am'], ['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am'], ['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am'], ['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am'], ['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am'], ['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am'], ['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am'], ['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am'], ['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am'], ['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am'], ['Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am'], ['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am'], ['Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am'], ['The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am'], ['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am'], ['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am'], ['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am'], ['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'], ['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am'], ];

WhittenMike807
15 Mar 2011, 5:18 AM
Thank you for you help first off. Maybe i don't have the right js file: here is what i have for my html file....


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Grid Plugins Example</title>

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../../resources/css/xtheme-gray.css" />

<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript" src="../../ext-all.js"></script>


<script type="text/javascript" src="../ux/RowExpander.js"></script>
<script type="text/javascript" src="grid-plugins.js"></script>

</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->

<div id="grid1"></div>

</body>
</html>

brittongr
15 Mar 2011, 7:56 AM
I tried here in my pc and the paging with local data is not working... i think that is because the data are loaded completely, so far i just have used a paging toolbar with remote data. I recommend you try one of those samples within the ext library using remote data... another thing that i noticed (and i haven't seen that when i sent you the code before) is this:

store: grid3

and it should be

store: store

You need to create the store apart in order to assign the variable there in the paging tool bar config...