ExtJS分页工具栏格式错误 [英] ExtJS paging toolbar malformed

问题描述

使用ExtJS 4.2.1我将一个页面工具栏添加到网格面板。一切正常，除了工具栏呈现格式错误。页面输入字段很小，周围有一些奇怪的框架。有一点运气，我可以在现场输入东西，但我看不懂。我看到这与默认主题，海王星和灰色主题，它是相同的Chrome和Firefox：

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?

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

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>

这是为我失败的代码：

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.

更新：如果我将基本代码和包含复制到空白的HTML文件中，显示正确。显然这是由于Wordpress添加到页面中的一些问题。在这一刻我不知道如何解决这个问题。

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.

推荐答案

我没有找到令人满意的解决方案。 ExtJS（Sencha）的制造商也不能给我一个解决方案。似乎目前安全嵌入ExtJS内容没有CSS碰撞的唯一方法是使用iframe。我也读过关于使用其他JS框架的类似问题，所以我想这通常是一个问题。

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.

这篇关于ExtJS分页工具栏格式错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！