ExtJS分页工具栏格式错误

Question

使用ExtJS 4.2.1我在网格面板中添加了一个分页工具栏。除了工具栏呈现格式错误外，一切正常。页面输入字段很小，并且周围有一些奇怪的帧。运气不错，我可以在场上输入一些东西，但我无法阅读任何内容。我看到这个默认主题，海王星和灰色主题，Chrome和Firefox也是如此：

我使用了默认主题。有什么想法吗？

如果这是一个主题或CSS相关的问题（是吗？）这是我目前包括的（尝试海王星主题）：

<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>

当在另一个线程中添加以下内容时，它会变得更好（框架更加中心），但仍然没有数字可见，工具栏仍然很高：

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

这是我失败的代码：

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

但是我不认为这个问题与数据存储有关。

我自己没有做任何风格。

更新：如果我将基本代码和包含复制到空白HTML文件中，则所有内容都会正确显示。显然，这是由于Wordpress添加到页面中而引起的问题。目前我不知道如何解决这个问题。

Answer 1

使用Chrome开发者工具，我比较了已损坏工具栏的输入字段表和Sencha example的HTML表示形式。有区别。损坏的输入字段子树具有：

"numberfield-1014" -> "top: 13px" instead of 1px
"numberfield-1014-bodyEl" -> additional class "x-form-trigger-wrap-focus"
"numberfield-1014-inputEl" -> additional classes "x-form-focus x-field-form-focus x-field-default-form-focus"

更多考虑这个问题.... CSS可能会意外地改变输入字段的格式（基于元素类和许多其他元素功能）。但是，良好和畸形元素的类是如何变化的呢？ CSS不会改变类属性，是吗？这种差异可能来自哪里？

我还检查了CSS规则。我可以在wordpress二十四主题中找出一条规则，使外框可见：

table,
th,
td {
    border: 1px solid rgba(0, 0, 0, 0.1);
}

这是主题重置部分的一部分。禁用它时，框架会消失。

另一个规则就是这个：

.entry-content td,
.comment-content td {
    padding: 8px;
}

它可以防止输入字段正确显示。禁用此功能后，只需固定条形中所有项目的垂直位置，即可使条形图正确显示。

知道这些影响的根本原因是什么？

Answer 2

我找不到令人满意的解决方案。 ExtJS（Sencha）的制造商也无法给我一个解决方案。目前看来，在没有CSS冲突的情况下安全嵌入ExtJS内容的唯一方法是使用iframe。我也读过使用其他JS框架的类似问题，所以我认为这通常是一个问题。