[Seasar-user:7651] Re: [Teeda]非同期Gridでの不具合

2007年 5月 16日 (水) 09:51:34 JST

後藤(goto)です。

Prototype.jsが原因で動かないのは、非同期Gridのリクエストが不正になってしまい、
最初の50件しか表示されないという件のみです。

非同期Gridでレイアウトが崩れるというのはPrototype.jsとは無関係なはず、
というのを確認してみると、IEでもPrototype.jsとは無関係にレイアウトが崩れてしまいました。
＃ここでいっている表示が崩れるというのは前にも書いたとおり
＃ヘッダ部とボディ部の幅が異なってしまうというものです。

というわけでわかりやすく順番を変えて整理すると、

１．非同期Gridにするとテーブルヘッダ部とボディ部で幅がずれてしまう。
Prototype.jsとは無関係。
IE、Firefox共に再現。
再現するにはソート順に徐々に表示文字列を長くしたデータを沢山用意するだけ。
（私が用意した件数は250件）
Teeda.THtmlGrid.adjustGridSize()が呼ばれるタイミングが現状は
HTMLの描画タイミングに依存しているため、50件超でも件数が少ない
（非同期リクエストの発行回数が少ないorレスポンスがすぐに返ってくる）
場合は再現しない可能性がある。


２．Prototype.jsと同時使用すると非同期Gridのリクエストが不正になってしまい、
最初の50件しか表示されない。
IE、Firefox共に再現。
Prototype.jsを使用しなければもちろん問題なく動作する。
再現するには50件超のデータを用意する必要がある。


この２点になります。

環境は、

WindowsXPSP2
IE6.0/Firefox2.0.0.3
Seasar2.4.12
Teeda1.0.7-SNAPSHOT
JavaSE5 Update11
Tomcat5.5.23

です。

２．に関してはPrototype.jsを使用するとArrayのprototypeにいろいろなFunctionが
追加されてしまい、非同期Gridのリクエストパラメータが不正になってしまうのが原因です。
最初のメールで添付したパッチのようにajax.jsを修正すればPrototype.jsを使用しても
正しいリクエストが生成されました。


１．に関して、IEでは問題ないと先日報告しましたが、再度確認したところ
IEでもレイアウトが崩れていました。
IEでレイアウトが崩れなかったケースというのは
Teeda.THtmlGrid.adjustGridSize()
をコールバックの最後で複数回呼ぶようにハックして、かつ、
Teeda.THtmlGrid._adjustWidth()
の中にalert()文を挿入した場合でした。
おそらく
Teeda.THtmlGrid.adjustGridSize()
が呼ばれてstyle.width属性を変更するタイミングとブラウザでの描画タイミング
の問題でうまくいかないのかなと思います。


報告の仕方が下手ですみません。
よろしくお願いします。

07/05/15 に Shinpei Ohtani<[E-MAIL ADDRESS DELETED]> さんは書きました:
> 大谷です。
>
> ちょっと状況を整理させてください。
> 後藤さんの言っている全ての事象はPrototype.jsと
> 一緒に使った場合なんでしょうか。
>
> 現状のTeedaのSNAPSHOT（Seasar2.4.13-rc2-SNAPSHOT）では
> ひとまずPrototype.jsなしではFireFox/IE共に動きます。
>
>
> 07/05/15 に O.Goto<[E-MAIL ADDRESS DELETED]> さんは書きました:
> > 後藤(goto)です。
> >
> > Seasar2.4.12
> > Teeda1.0.7-SNAPSHOT
> > です。
> >
> > よろしくお願いします。
> >
> > On Tue, 15 May 2007 17:44:00 +0900
> > "Shinpei Ohtani" <[E-MAIL ADDRESS DELETED]> wrote:
> >
> > > 大谷です。
> > >
> > > 返事が遅くなってすいません。
> > > お使いのS2とTeedaのバージョンも教えていただけるでしょうか。
> > >
> > > 宜しくお願いします。
> > >
> > > 07/05/15 に O. Goto<[E-MAIL ADDRESS DELETED]> さんは書きました:
> > > > 後藤(goto)です。
> > > >
> > > > ブラウザを書くのを忘れていました。
> > > >
> > > > Firefox2.0.0.3(WindowsXPSP2)
> > > > で確認しています。
> > > > IE6.0では問題なく幅の調整ができています。
> > > >
> > > > 07/05/15 に O. Goto<[E-MAIL ADDRESS DELETED]> さんは書きました:
> > > > > 後藤(goto)です。
> > > > >
> > > > > 追加報告です。
> > > > > > また、現状のタイミングの
> > > > > > Teeda.THtmlGrid.adjustGridSize()
> > > > > > を残すとレイアウトが崩れてしまったので
> > > > > > 非同期で50件超の場合にはコールバックFunctionの終わりのみの方がいいみたいです。
> > > > > > もしかすると複数回コールバックが呼ばれる場合は一番最後のコールバックのみにした方が
> > > > > > いいのかもしれません。
> > > > > >
> > > > > 複数回コールバックが呼ばれるようにデータの件数を用意したところ、
> > > > > 予想通り幅の調整はうまくいきませんでした。
> > > > > ソート順で徐々に表示される文字幅が増えていくようなデータを用意して確認しました。
> > > > > コールバックが呼ばれる回数をカウントしておいて、最後に呼ばれたときだけ
> > > > > Teeda.THtmlGrid.adjustGridSize()
> > > > > を呼ぶようにしたところ幅の調整はうまくいきました。
> > > > > どのようにレイアウトが崩れるかを書き忘れていましたが、
> > > > > テーブルボディに該当する部分がテーブルヘッダに該当する部分より
> > > > > 幅が広くなってしまいます。
> > > > >
> > > > > 今のところ同期Gridにして逃げていますが、できれば非同期Gridにしたいと思っています。
> > > > > Teeda.THtmlGrid.adjustGridSize()
> > > > > を複数回呼んでも大丈夫なように変更するのが簡単だと思ったのですが、
> > > > > どうして複数回呼んだら駄目なのかが未だにわからず・・・
> > > > >
> > > > > 07/05/11 に O. Goto<[E-MAIL ADDRESS DELETED]> さんは書きました:
> > > > > > 後藤(goto)です。
> > > > > >
> > > > > > Teeda Extensionで非同期Gridを使用していて、
> > > > > > prototype.js(http://www.prototypejs.org/)
> > > > > > を同時に使用すると、
> > > > > > 最初の50件以降の表示がされなくなってしまうことに気がつきました。
> > > > > >
> > > > > > ajax.jsを添付したパッチのように修正すれば回避できるようです。
> > > > > >
> > > > > > また、prototype.jsとは無関係ですが、
> > > > > > Teeda.THtmlGrid.adjustGridSize()
> > > > > > が呼ばれるタイミングは現状最初にHTMLが描画されるタイミングのみとなっているようで、
> > > > > > 同期Gridや非同期で50件以内であれば問題ないのですが、
> > > > > > 非同期で50件超の場合にレイアウトが崩れてしまう場合があります。
> > > > > > ＃GrigYのみしか確認していません。
> > > > > >
> > > > > > 非同期で50件超の場合には
> > > > > > Teeda.THtmlGrid.adjustGridSize()
> > > > > > をコールバックFunctionの終わりにすれば解決できると思います。
> > > > > >
> > > > > > また、現状のタイミングの
> > > > > > Teeda.THtmlGrid.adjustGridSize()
> > > > > > を残すとレイアウトが崩れてしまったので
> > > > > > 非同期で50件超の場合にはコールバックFunctionの終わりのみの方がいいみたいです。
> > > > > > もしかすると複数回コールバックが呼ばれる場合は一番最後のコールバックのみにした方が
> > > > > > いいのかもしれません。
> > > > > >
> > > > > >
> > > > > > ちなみに
> > > > > > Kumu.Ajax.executeTeedaAjax()
> > > > > > を下記のようにハックして確認しました。
> > > > > >
> > > > > > --------
> > > > > > var adjustGridSizeOrg = Teeda.THtmlGrid.adjustGridSize;
> > > > > > Teeda.THtmlGrid.adjustGridSize = function() {}; /* HTMLに書かれているものを無効化 */
> > > > > > var executeTeedaAjaxOrg = Kumu.Ajax.executeTeedaAjax;
> > > > > > Kumu.Ajax.executeTeedaAjax = function(callback, param, responseType) {
> > > > > >   var f = function(arg) {
> > > > > >     //alert("collback");
> > > > > >     var ret = callback(arg);
> > > > > >     adjustGridSizeOrg('xxxGridY'); /* callbak終わりにadjust */
> > > > > >     return ret;
> > > > > >   }
> > > > > >   f.toString = function() {
> > > > > >     return callback.toString();
> > > > > >   };
> > > > > >   return executeTeedaAjaxOrg(f, param, responseType);
> > > > > > };
> > > > > > --------
> > > > > >
> > > > > >
> > > > >
> > > > _______________________________________________
> > > > Seasar-user mailing list
> > > > [E-MAIL ADDRESS DELETED]
> > > > https://ml.seasar.org/mailman/listinfo/seasar-user
> > > >
> > >
> > >
> > > --
> > > =============================
> > > Shinpei Ohtani
> > > [E-MAIL ADDRESS DELETED]
> > > =============================
> > > _______________________________________________
> > > Seasar-user mailing list
> > > [E-MAIL ADDRESS DELETED]
> > > https://ml.seasar.org/mailman/listinfo/seasar-user
> > >
> > _______________________________________________
> > Seasar-user mailing list
> > [E-MAIL ADDRESS DELETED]
> > https://ml.seasar.org/mailman/listinfo/seasar-user
> >
>
>
> --
> =============================
> Shinpei Ohtani
> [E-MAIL ADDRESS DELETED]
> =============================
> _______________________________________________
> Seasar-user mailing list
> [E-MAIL ADDRESS DELETED]
> https://ml.seasar.org/mailman/listinfo/seasar-user
>