css - 分页工具栏中的图标未显示

标签 css extjs extjs4

我正在使用版本 4.05 中的 Sencha ExtJS 框架,但遇到以下问题。我正在显示 Ext.Grids,它在网格底部有一个分页工具栏。在 Sencha 示例页面上,网格将显示一些带有图标的按钮(第一页、上一页、下一页、最后一页、刷新)。

不幸的是图标没有显示在我的网格中:

The Pagination Toolbar

如您所见,按钮实际上在那里,并且它们工作正常,只是没有显示图标。

对图像的引用是正确的,并且图像存在并且可供浏览器访问。 (如果我在 Firebug 中查看按钮的 css 并将鼠标悬停在 imageurl 上,它将显示正确的图标)。

我注意到的一件事是,由于某种原因 <span>应显示图标的元素在 Firebug View 中“变灰”。 (在 Sencha 示例页面上它不是)。

The Part of the DOM corresponding to the Refresh button

该元素的 CSS 对我来说看起来不错:

The CSS of the span element

注意:可以找到使用的完整 CSS 文件 HERE

关于主题的简短说明:我只是通过更改 .sass 模板的主要颜色并将 ext-all.css 编译为我的主题的新主题来制作这个灰色主题(名为“文档”)。所以我没有对图标进行任何更改。

任何可能导致此问题的建议?

最佳答案

不访问实际代码就很难调试。但是,我注意到在您上面复制的 CSS 以及您发布的 css 链接(据说是整个 css)中,这两套 css(我能找到)都没有引用 x- btn-icon 类本身,但它是灰色 span 元素上的类(连同 x-tbar-loading)。那么,那个类(class)在做什么呢?它在哪里定义?可能存在您的问题。

编辑:我访问了 Sencha 网站并在网格样本上设置了一个图标。当我从元素中删除 x-btn-icon 类时,我相信我重复了你的问题。因此,您的 css 中似乎缺少该类的必要定义。在他们的网站上,它在 ext-all.css 中定义。

关于css - 分页工具栏中的图标未显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7928138/

相关文章:

jquery - 使用 css 下拉选择屏幕出现错误

html - 列反向灵活排序

extjs - 如何在 ExtjS 6/7 中导入 ES6 模块

sdk - [WARN] 当前工作目录 (C :\xampp\htdocs\sencha folder) is not a recognized Sencha SDK or application folder.

javascript - 在 Extjs 4 中使用 getClass 隐藏操作列图标

extjs - 将选定的复选框数量限制为 5

javascript - ExtJs 4 Grid - 列选择列表作为单独的菜单按钮

javascript - 基思伍德 JQuery SVG : the SVG does not drawn in the div

css - 为什么 Font Squirrel 的 @font-face 定义包含两个 src 声明?

javascript - ExtJS 3.4 MessageBox 按钮是、否奇怪的行为