IE中的RTL模式使ExtJS 3.3.0窗体中的字段标签对齐不正确

Question

我正在使用带有RTL修复的ExtJS 3.3.0，并且我对所有必需的类进行了覆盖以正确对齐字段。

我仍然遇到浮动表单的问题，但我的字段标签有时会消失。我已经调查了这个问题，并发现标签实际上并没有消失 - 它刚刚弹出到左边（因此没有显示），因为没有明显的原因。

以下是我的对话框应该的样子（在第一次显示时 ）：

不幸的是，这就是第二次时间的显示：

这是由ExtJS创建的窗口HTML（注意：文档的HTML标记为dir="rtl"）：

<div class="x-window-tl">
 <div class="x-window-tr">
  <div class="x-window-tc">
   <div style="mozuserselect: none; khtmluserselect: none" id="ext-gen129" class="x-window-header x-unselectable x-window-draggable"
    unselectable="on">
    <div id="ext-gen135" class="x-tool x-tool-close">
     &nbsp;
    </div>
    <span id="ext-gen141" class="x-window-header-text">שינוי תאריך אספקה</span>
   </div>
  </div>
 </div>
</div>
<div id="ext-gen130" class="x-window-bwrap">
 <div class="x-window-ml">
  <div class="x-window-mr">
   <div id="ext-gen134" class="x-window-mc">
    <div style="width: 297px; height: 40px" id="ext-gen131" class="x-window-body">
     <div style="width: 297px" id="ext-comp-1046" class=" x-panel x-form-label-left">
      <div id="ext-gen147" class="x-panel-bwrap">
       <form style="padding-bottom: 8px; padding-left: 8px; width: 297px; padding-right: 8px; height: 40px; padding-top: 8px"
        id="ext-gen128" class="x-panel-body x-panel-body-noheader x-form"
        method="post">
        <div style="width: 300px" dir="rtl" id="ext-gen149" class="x-form-item " tabindex="-1">
         <label style="width: 75px" id="ext-gen150" class="x-form-item-label" for="ext-comp-1045">
          תאריך חדש:</label>
         <div style="padding-right: 80px" id="x-form-el-ext-comp-1045" class="x-form-element">
          <div style="width: 133px" dir="rtl" id="ext-gen152" class="x-form-field-wrap x-form-field-trigger-wrap">
           <input style="width: 133px" id="ext-comp-1045" class="x-form-text x-form-field x-trigger-noedit"
            name="ext-comp-1045" readonly value="2012-11-22" size="10" autocomplete="off"
            qtip><img id="ext-gen153" class="x-form-trigger x-form-date-trigger" alt="" src="http://localhost/bDox/NipImages/s.gif">
          </div>
         </div>
         <div class="x-form-clear-left">
         </div>
        </div>
       </form>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
 <div id="ext-gen133" class="x-window-bl">
  <div class="x-window-br">
   <div class="x-window-bc">
    <div style="width: 297px" id="ext-gen132" class="x-window-footer x-panel-btns">
     <div style="width: 287px" id="ext-comp-1049" class="x-panel-fbar x-small-editor x-toolbar-layout-ct">
      <table class="x-toolbar-ct" cellspacing="0">
       <tbody>
        <tr>
         <td class="x-toolbar-right" align="center">
          <table cellspacing="0">
           <tbody>
            <tr class="x-toolbar-right-row">
             <td id="ext-gen142" class="x-toolbar-cell">
              <table style="width: 75px" id="ext-comp-1047" class="x-btn  x-btn-noicon" cellspacing="0">
               <tbody class="x-btn-small x-btn-icon-small-right">
                <tr>
                 <td class="x-btn-tl">
                  <i>&nbsp;</i>
                 </td>
                 <td class="x-btn-tc"></td>
                 <td class="x-btn-tr">
                  <i>&nbsp;</i>
                 </td>
                </tr>
                <tr>
                 <td class="x-btn-ml">
                  <i>&nbsp;</i>
                 </td>
                 <td class="x-btn-mc">
                  <em unselectable="on">
                   <button style="" id="ext-gen143" class=" x-btn-text">
                    אשר</button></em>
                 </td>
                 <td class="x-btn-mr">
                  <i>&nbsp;</i>
                 </td>
                </tr>
                <tr>
                 <td class="x-btn-bl">
                  <i>&nbsp;</i>
                 </td>
                 <td class="x-btn-bc"></td>
                 <td class="x-btn-br">
                  <i>&nbsp;</i>
                 </td>
                </tr>
               </tbody>
              </table>
             </td>
             <td id="ext-gen144" class="x-toolbar-cell">
              <table style="width: 75px" id="ext-comp-1048" class="x-btn  x-btn-noicon" cellspacing="0">
               <tbody class="x-btn-small x-btn-icon-small-right">
                <tr>
                 <td class="x-btn-tl">
                  <i>&nbsp;</i>
                 </td>
                 <td class="x-btn-tc"></td>
                 <td class="x-btn-tr">
                  <i>&nbsp;</i>
                 </td>
                </tr>
                <tr>
                 <td class="x-btn-ml">
                  <i>&nbsp;</i>
                 </td>
                 <td class="x-btn-mc">
                  <em unselectable="on">
                   <button style="" id="ext-gen145" class=" x-btn-text">
                    ביטול</button></em>
                 </td>
                 <td class="x-btn-mr">
                  <i>&nbsp;</i>
                 </td>
                </tr>
                <tr>
                 <td class="x-btn-bl">
                  <i>&nbsp;</i>
                 </td>
                 <td class="x-btn-bc"></td>
                 <td class="x-btn-br">
                  <i>&nbsp;</i>
                 </td>
                </tr>
               </tbody>
              </table>
             </td>
            </tr>
           </tbody>
          </table>
         </td>
         <td class="x-toolbar-left" align="left">
          <table class="x-toolbar-left-ct" cellspacing="0">
           <tbody>
            <tr>
             <td>
              <table cellspacing="0">
               <tbody>
                <tr class="x-toolbar-left-row">
                </tr>
               </tbody>
              </table>
             </td>
             <td>
              <table cellspacing="0">
               <tbody>
                <tr class="x-toolbar-extras-row">
                </tr>
               </tbody>
              </table>
             </td>
            </tr>
           </tbody>
          </table>
         </td>
        </tr>
       </tbody>
      </table>
     </div>
     <div id="ext-gen137" class="x-clear">
     </div>
    </div>
   </div>
  </div>
 </div>
</div>
<a id="ext-gen138" class="x-dlg-focus" tabindex="-1" href="http://localhost/bDox/Asn.aspx?n=20112112_18&amp;cid=8ab8ba6a-1de0-4344-bed6-a48b93c497e6&amp;vid=4cf57ca1-78ea-4d6a-94b5-cd20b322a2f8#">&nbsp;</a>

注意：这只发生在IE中。

我已多次阅读IE在RTL模式下遇到浮动元素的问题，并且修复是将宽度设置为浮动元素的容器。

我在渲染后事件上做了这个，但无济于事：

newDateField.on('afterrender', function (field) {
    var elem = field.getEl(),
        p = elem.parent(),
        formItem = elem.parent('.x-form-item');

    p.setWidth(elem.getWidth());
    formItem.setWidth(300);
}, this);

我还尝试删除DOCTYPE并使用STRICT DOCTYPE。也没有帮助。

有什么建议吗？