Ext2.0を使ってみた

Javascript


とっても素敵なEditorGridPanelには罠がある

jsonと絡める場合の注意


サンプルだとJsonReaderが使われているけどうまくいかないのでArrayReaderを使う。
Extのフォーラムでも同じ質問が出てたっぽい。

var ds = new Ext.data.Store({
    proxy: new Ext.data.HttpProxy({url: 'ほげぴよJSON！'}),
    reader: new Ext.data.ArrayReader({}, columnNameArray)
});

各カラムにスタイルを指定する場合


もっとset〜みたいなのがあってもよさそうだけどないのでレンダラを指定してそこで行う。
styleっていうメソッドもあるんだけど書いても反映されないのでcssで指定する。

function renderColumn (string, metadata, record, rowIndex, colIndex) {
    if (colIndex % 2 == 1) {
        metadata.css = metadata.css + ' altNormal';
    }
    return string.replace(/\n/g, '<br>');
}

各行にスタイルを指定する場合


こちらもset〜みたいなのがあってもよさそうだけどない。
しかもレンダラもよくわからない。けどcssを取得できるので戻り値で上書きする。
なんとも不思議なつくりだ。

// グリッドの生成
var grid = new Ext.grid.EditorGridPanel ({
    el:'grid',
    ・
    ・
    viewConfig: {
        showPreview:true,
        getRowClass : function(record, rowIndex){
            if (!record.data.disable) {
                return 'disableStyle';
            }
        }
    },
    ・
    ・
});

解決できなかった点

  • EditorGridPanel横スクロールすると右端まで行ったときヘッダーがずれる
  • 一番したの行はtextareaにすると編集ができなくなる（たぶんzIndexが悪さをしてフォームが裏に回りこんでいる）
  • firefoxではスクロールした画面で編集ができなくなる（たぶんzIndexが悪さをしてフォームが裏に回りこんでいる）


これはもう、自力ではどうにもしたくなかったので放置


JQueryと組み合わせてつかってるけどかなり良い。