tohokuaikiのチラシの裏

技術的ネタとか。

extjsのGrid内のセルでリンクを作った場合、IE6だと変なところにジャンプして困った

こんな状況、ほとんどないんだろうけど・・・・。

  1. ExtjsでGridを使った。Gridは次の感じ
  2. widthをFixに
  3. autoHeightをtrueに
  4. layoutはfit
  5. 要は、Grid内で横スクロールさせるようにしたかった
    var grid = new Ext.grid.GridPanel({
        layout: "fit",
        width: 650
        autoScroll: true,
        autoExpandMax: 800,
        autoExpandMin: 50,
        height: auto,
        autoHeight: true
  1. セル内でリンクを作る
    var cm = new Ext.grid.ColumnModel({
      columns: [
          {
           header: "",
           width: 75,
           dataIndex: 'pr_id',
           renderer: function(value, p, record){/* ここにリンク作成HTML */}
         }]
    });

みたいな。

こんなグリッドを作ったのだけど。

これ、IE6だとどーしても横スクロールが収まらない。overflowあたりのCSSがたぶんきいてないんだな。どうしようもない。

まぁそれは見た目上のことだからなんとか我慢してもらうとして、セル内に作成したリンクが効かない。

具体的には、横スクロールを右に持って行ったときに表示されるリンクの所をクリックしてもhref="#"を押したときと同じ挙動になる。

びよーんってGridの左端にスクロールジャンプする。

これは困った。

DataStoreの'load'にListenerを加えて

    ds.addListener('load', (function(grid){ 
        return function(store)
        {
            if (Ext.isIE6){
                grid.getEl().on('click', function(eve, ele, option){
                    return false;
                });
            }
        }
    })(grid));

とかしても全く効果なし。

あー、って思って半ばあきらめかけてたんだけど、なぜか、リンクをテーブルタグでくくってやるとうまくいった。ホントかよ。

さっきの

renderer: function(value, p, record){/* ここにリンク作成HTML */}

renderer: function(value, p, record){return '<table><tr><td><a href=""></a></td></tr></table>';}

って感じに。

なぜかはさっぱりわからない。