ExtJS 3.3.0 をRTL修正して使用しています。フィールドを正しく配置するために、必要なすべてのクラスをオーバーライドしています。
ただし、フィールド ラベルが時々消えるというフローティング フォームの問題が引き続き発生します。この問題を調査したところ、ラベルが実際にはなくなっていないことがわかりました。識別可能な理由もなく、ラベルが左に飛び出してしまった (したがって表示されない) だけです。
これは私のダイアログがどのように見えるべきかです（そしてそれが最初に表示されます）：
残念ながら、2回目に表示されるのは次のようになります。
これは、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">
</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> </i>
</td>
<td class="x-btn-tc"></td>
<td class="x-btn-tr">
<i> </i>
</td>
</tr>
<tr>
<td class="x-btn-ml">
<i> </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> </i>
</td>
</tr>
<tr>
<td class="x-btn-bl">
<i> </i>
</td>
<td class="x-btn-bc"></td>
<td class="x-btn-br">
<i> </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> </i>
</td>
<td class="x-btn-tc"></td>
<td class="x-btn-tr">
<i> </i>
</td>
</tr>
<tr>
<td class="x-btn-ml">
<i> </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> </i>
</td>
</tr>
<tr>
<td class="x-btn-bl">
<i> </i>
</td>
<td class="x-btn-bc"></td>
<td class="x-btn-br">
<i> </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&cid=8ab8ba6a-1de0-4344-bed6-a48b93c497e6&vid=4cf57ca1-78ea-4d6a-94b5-cd20b322a2f8#"> </a>
注:これは IE でのみ発生します。
RTLIE にはモードの浮動要素に関する問題があり、浮動要素のコンテナーに幅を設定することで修正されたことを何度か読みました。
After render イベントでこれを実行しましたが、役に立ちませんでした:
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。また、助けはありません。
助言がありますか？