Javascript ExtJS内联宽度导致firefox中出现宽度错误

我们正在使用ExtJS4.1.2创建一个面板，其中工具栏停靠在顶部。为了达到我们想要的外观和感觉，我们已经覆盖了大部分样式。尽管我们尽了最大的努力来对齐和调整，但是在Firefox中我们遇到了一个奇怪的问题，这个面板出现的页面的默认宽度是20000px。我相信有问题的元素是ExtJS用一个类“x-box-inner”创建的某个内部组件。在dom浏览器视图中，我可以看到

<div id="mylist" class="x-panel listpanel x-panel-default">    
 <div id="toolBar###(ExtJSid)" class="x-toolbar-docked-top x-toolbarhttp://i.stack.imgur.com/ddvdF.png x-toolbar-default  x-docked x-docked-top ..." style="width: 735px;..." ...>
  <div id="anotherXtJSid" class="x-box-inner " style="width: 735px; ..." ...>
    <div id="anotherExtJSid" style="width:20000;..." (no class)>
...

创建ExtJS面板时使用此类：

Ext.define('List', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.mylist',
     ... // no width defined. It messes up all components within panel.
    height: 750,
    frame: false,
    cls: 'listpanel',
    bubbleEvents: [
    ...
    ],

 ...

    initComponent: function () {
        this.callParent(arguments);
        this.add({
            xtype: 'listbody',
            ownerCt: this,
        ...
     },
...

x-box-inner

上的

width:auto

和

+div

似乎固定了宽度，尽管我仍然可以在DOM检查器中看到宽度为

width:20000px

的ExtJS元素。但是，这似乎是任意的，它打破了

overfow:visible

——当用户单击下拉按钮时，面板的工具栏下拉弹出窗口之一现在消失在面板下方

---

有没有（其他）方法来增加这个神秘的ExtJS元素的宽度？

因此，通过进一步的实验和我同事的一些建议，答案就在这里

使用

width:100%

而不是

width:auto

使用

而不是

+

影响宽度的所有子项

为

x-box-internal

制定另一条规则，而不使用

>div

，仅用于控制

溢出：可见

制定规则

！重要信息

，以便它们不会被其他样式覆盖

样式表保持不变，但有以下

x-box-inner

规则更改：

     .x-box-inner > div {
       width: 100% !important;
     }

     x.box-inner {
         overflow: visible !important;
     }
...

---

通常这是所选布局的问题，但如果没有任何代码，我们将无能为力；SCS和面板的创建还有很多，但我相信这些是影响超宽div的唯一部分。

     .x-box-inner > div {
       width: 100% !important;
     }

     x.box-inner {
         overflow: visible !important;
     }
...