EXTJS 4.2 Paging toolbar formatissue

Question

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"
                    })

                });

score 0 · Answer 1 · answered Sep 03 '14 at 17:21

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)

enter image description here

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()
});

EXTJS 4.2 Paging toolbar formatissue

1 Answers1