ExtJS paging toolbar malformed

Question

Using ExtJS 4.2.1 I added a paging toolbar to a grid panel. Everything works fine except that the toolbar is rendered malformed. The page input field is far to small and has some weird frames around it. With a little luck I can type something into the field but I can't read anything. I see this with both default theme, neptune and gray theme and it is the same for Chrome and Firefox:

I used the default themes. Any idea about this?

In case this is a theme or CSS related problem (is it?) here is what I am including currently (trying neptune theme):

<link rel='stylesheet' id='extjsstyle-css'  href='http://127.0.0.1/wordpress/wp-includes/js/extjs/resources/css/ext-all-neptune-debug.css?ver=3.8.1' type='text/css' media='all' />

<script type='text/javascript' src='http://127.0.0.1/wordpress/wp-includes/js/extjs/ext-dev.js'></script>

When adding the following include as proposed in another thread it gets a little better (frames little more centric) but still no number visible and toolbar still much to high:

<script type='text/javascript' src='http://127.0.0.1/wordpress/wp-includes/js/extjs/ext-theme-neptune.js'></script>

This is the code that fails for me:

var dummyStore = Ext.create('Ext.data.Store', {
    storeId: 'DummyStore',
    pageSize: 1,
    fields: [ 'Data' ],
    data: [ { Data: 0 } ]
});

var pagingToolbar = Ext.create('Ext.toolbar.Paging', {
    store: dummyStore,
    dock: 'bottom',
    displayInfo: true
});

var panel = Ext.create('Ext.grid.Panel', {
    title: 'Test',
    store: dummyStore,
    columns: [ { text: 'Data', dataIndex: 'Data', flex: 1 } ],
    height: 550,
    width: 620,
    renderTo: 'myHtmlDiv',
    dockedItems: [ pagingToolbar ]
});

However I don't think this problem is data store related.

I did not do any stylings on my own.

UPDATE: If I copy the essential code and the includes into a blank HTML file, everything is displayed properly. Obviously this is a problem that arises due to something that Wordpress adds to the page. In the moment I have no clue how to tackle such a problem.

Answer 1

I did not find a satisfying solution. Also the manufacturer of ExtJS (Sencha) could not give me a solution. It seems currently the only way to safely embed ExtJS content without CSS collisions is to use an iframe. I read about similar problems using other JS frameworks too so I suppose this generally is a problem.