2

リモートストアを持つextjs 4グリッドパネルがあります。列のレンダラーには、ID を NAME に変更する関数があります。ほとんどの場合、問題なく動作しますが、(~40%) グリッドに空の列が表示されることがあります。デバッグしようとしました - ストアは定義されていますが、そのアイテムは空です。私の心には、ストアがまだロードされていないか、すでに破壊されています（可能な場合）。

完全なデータでグリッドを正しく表示するには?

私の簡略化されたコードがあります：

必要なコンポーネントのロード

Ext.Loader.setConfig({
    enabled:true
});

Ext.Loader.setPath('Ext.ux', '/js/ux');

Ext.require([
    'Ext.grid.*',
    'Ext.data.*'
]);

Ext.onReady(function () {

モデルの作成

    Ext.define('Expense', {
        extend:'Ext.data.Model',
        fields:[
            {name:'id', type:'number'},
            {name:'cost_id', type:'string'},
            {name:'comment', type:'string'}

        ]
    });

    Ext.define('Cost', {
        extend:'Ext.data.Model',
        fields:[
            {name:'id', type:'string'},
            {name:'name', type:'string'},
            {name:'displayname', type:'string'}
        ]
    });

ストアを作成する

    store = Ext.create('Ext.data.Store', {
        autoDestroy:true,
        model:'Expense',
        autoLoad:true,
        autoSync:true,
        pageSize:30,
        proxy:{
            type:'ajax',
            url:'/expenses/gettable',
            reader:{
                type:'json',
                root:'data',
                record:'Expense'
            }, writer:{
                type:'json'
            },
            api:{
                create:'/expenses/create',
                update:'/expenses/update',
                destroy:'/expenses/delete'
            }
        }
    });

    costsStore = Ext.create('Ext.data.Store', {
        autoDestroy:true,
        model:'Cost',
        autoLoad:true,
        autoSync:true,
        proxy:{
            type:'ajax',
            url:'/costs/gettable',
            reader:{
                type:'json',
                record:'Cost'
            }, writer:{
                type:'json',

                allowSingle:false
            },
            api:{
                create:'/costs/create',
                update:'/costs/update'
            }
        }
    });

グリッド パネルの構成

    grid = Ext.create('Ext.grid.Panel', {
        store:store,
        autoSync:true,
        columns:[
            {
                id:'comment',
                header:'Задача',
                dataIndex:'comment',
                flex:5
            },
            {
                id:'cost',
                header:'Cost',
                dataIndex:'cost_id',
                flex:5,
                editor:{
                    xtype:'combobox',
                    store:costsStore,
                    valueField:'id',
                    displayField:'name',
                    name:'cost_id'
                },
                renderer:function (value, meta, record) {
                    if (value != '') {
                        ind = costsStore.find('id', value);
                        elem = costsStore.getAt(ind);
                        if (elem) {

                            return elem.data['name'];
                        }
                    }
                }
            }
        ],
        renderTo:'editor-grid'
    });

});

グリッドレンダリングイベントでストアを手動でロードしようとしました:

grid = Ext.create('Ext.grid.Panel', {
    listeners:{
        beforerender:function(){
            store.load();
            costsStore.load();
        }
    }
    ...
});

空のテーブルを最大 10% のケースに減らしますが、0% ではありません...

私が見つけた唯一の方法は、すべてのストアをロードした後に遅延を設定し、次のようなグリッドを表示することです:

listeners:{
    'load':function(){
        window.setTimeout("getGrid()", 1000);
    }
}

getGrid() は grid.panel を作成する関数です。

すべてのストアがロードされた後にのみグリッドを表示するか、データをロードできない場合にエラーを表示するには、どうすればよいですか?

4

1 に答える 1

0

sra が示唆したように、問題はレンダラー内でストアを使用することに起因するようですが、ストアがロードされていることを確認することはできません。

この回答では、この問題に対する最もエレガントな解決策と思われるものをいくつかのコード例とともに説明しました。

于 2012-10-01T23:00:38.807 に答える