i have used ExtJs 4.2 grid with paging toolbar.Paging toolbar is malformed only in Firefox,however it is displayed properly in Chrome and IE.
The image is same as displayed in post ExtJS paging toolbar malformed
I have included the files
<link href="../../ext-4.2.0.663/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="<%=ResolveUrl("~/ext-4.2.0.663/ext-all.js")%>" type="text/javascript"></script>
ExtJs code block:
grid1 = new xg.GridPanel({
store: store,
// cm: cm1,
columns: [ <%= gridColumns %>],
loadMask: true,
layout: 'auto',
width: getGridWidth(),
renderTo: 'bdy',
viewConfig: {
//forceFit: false
onLoad: Ext.emptyFn,
preserveScrollOnRefresh: true,
scroll: 'both'
} ,
bbar: new Ext.PagingToolbar({
// pageSize: 10,//<<---does not required in ExtJs 4.2 as this property is no more found in Ext.PagingToolbar
id: "gridPaging",
store: (store),
displayInfo: true,
displayMsg: 'Displaying records {0} - {1} of {2}',
emptyMsg: "No records to display"
})
});
I have run the sample code in firefox and it is perfectly working fine. Why are you providing store as (store), try to fix the store then it works.(BTW I tested it in Extjs 4.2.1)
Here is the sample code.
var store = Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
bbar: new Ext.PagingToolbar({
id: "gridPaging",
store: store,
displayInfo: true,
displayMsg: 'Displaying records {0} - {1} of {2}',
emptyMsg: "No records to"
}),
renderTo: Ext.getBody()
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.