0

使用 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 在页面中添加的内容而出现的问题。目前我不知道如何解决这样的问题。

4

2 回答 2

0

使用 Chrome 开发人员工具，我比较了损坏的工具栏和 Sencha 示例的输入字段表的 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 241 主题中找出一条规则，使外框可见：

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

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

另一个规则是：

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

它会阻止输入字段正确显示。禁用此功能后，只需修复栏中所有项目的垂直位置，以使栏看起来正确。

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

于 2014-03-28T09:37:23.623 回答
0

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

于 2014-03-31T07:08:19.637 回答