extjs:マスクグリッドを読み込む

extjsグリッドを使用していますが、20秒ごとに RenderGrid 関数を呼び出すjQueryタイマーがあります。私は、各タイマーティックごとにグリッドのマスクを表示したい。お知らせ下さい。

function RenderGrid(dataObj) {

        var jasonContent = JSON.parse(dataObj)

        if (document.getElementById('panel').innerHTML != '') {
            document.getElementById('panel').innerHTML = '';
        }
        var myData = {
            records: jasonContent
        };

        var fields = [
   { name: 'Position_ID', mapping: 'Position_ID' },
   { name: 'PriorityCount', mapping: 'PriorityCount' },
   { name: 'MyCheckBox', mapping: 'MyCheckBox' },
   { name: 'Veh_Plateno', mapping: 'Veh_Plateno' },
   { name: 'Drv_Firstname', mapping: 'Drv_Firstname' },
   { name: 'GPSTimeAsString', mapping: 'GPSTimeAsString' },
   { name: 'Speed', mapping: 'Speed' },
   { name: 'SubFleet_Name', mapping: 'SubFleet_Name' }

];

        var gridStore = new Ext.data.JsonStore({
            fields: fields,
            data: myData,
            root: 'records'

        });


        var cols = [

    { id: 'Position_ID', header: "Position_ID", width: 160, sortable: true, dataIndex: 'Position_ID', hidden: true, hideable: false },
    { header: "", width: 30, sortable: false, dataIndex: 'MyCheckBox', renderer: renderCheckBox, hideable: false, menuDisabled: true },
    { header: "", width: 30, sortable: false, dataIndex: 'PriorityCount', renderer: renderIcon, hideable: false, menuDisabled: true },
    { header: "Veh_Plateno", width: 100, sortable: true, dataIndex: 'Veh_Plateno' },
    { header: "Drv_Firstname", width: 100, sortable: true, dataIndex: 'Drv_Firstname' },
    { header: "GPSTime", width: 100, sortable: true, dataIndex: 'GPSTimeAsString' },
    { header: "Speed", width: 100, sortable: true, dataIndex: 'Speed' },
    { header: "SubFleet_Name", width: 100, sortable: true, dataIndex: 'SubFleet_Name' }

];

        gridStore.setDefaultSort('Veh_Plateno', 'asc');

        var grid = new Ext.grid.GridPanel({
            ddGroup: 'gridDDGroup',
            store: gridStore,
            renderTo: 'panel',
            columns: cols,
            enableDragDrop: true,
            stripeRows: true,
            pageSize:25,
            header: false,
            loadMask: true,
            autoExpandColumn: 'Position_ID',
            width: 900,
            height: 325,
            region: 'west',
            title: 'Data Grid',
            selModel: new Ext.grid.RowSelectionModel({ singleSelect: false }),
            listeners: {
                'rowdblclick': function (grid, rowIndex, e) {
                    var rec = grid.getStore().getAt(rowIndex);
                    var columnName = grid.getColumnModel().getDataIndex(2);
                    Ext.MessageBox.alert('', rec.get(columnName));

                   //do something 
                }

            }
        });

        //grid.getEl().mask();
        //grid.store.reload();
        //grid.getEl().unmask();

        //gridStore.load({ params: { start:0, limit: 25} }); 
        /// grid.loadMask.show();


        grid = null;
        cols = null;
        fields = null;
        gridStore = null;
        myData = null;

    }

thaks manこのapprochは私とうまく動作しますが、今はブラウザがぶら下がっているようです。グリッドオブジェクトは無限ループに入ります。このスクリプトコードはすべて、タイマーで私に例を与えてください。

    var grid = null;
    function RenderPositionsGrid(dataObj) {


        var jasonContent = JSON.parse(dataObj)



        var myData = {
            records: jasonContent
        };
        if (grid == null) {


            var fields = [
   { name: 'Position_ID', mapping: 'Position_ID' },
   { name: 'PriorityCount', mapping: 'PriorityCount' },
   { name: 'MyCheckBox', mapping: 'MyCheckBox' },
   { name: 'Veh_Plateno', mapping: 'Veh_Plateno' },
   { name: 'Drv_Firstname', mapping: 'Drv_Firstname' },
   { name: 'GPSTimeAsString', mapping: 'GPSTimeAsString' },
   { name: 'Speed', mapping: 'Speed' },
   { name: 'SubFleet_Name', mapping: 'SubFleet_Name' }

];

            var gridStore = new Ext.data.JsonStore({
                fields: fields,
                data: myData,
                root: 'records'

            });


            var cols = [

    { id: 'Position_ID', header: "Position_ID", width: 160, sortable: true, dataIndex: 'Position_ID', hidden: true, hideable: false },
    { header: "", width: 30, sortable: false, dataIndex: 'MyCheckBox', renderer: renderCheckBox, hideable: false, menuDisabled: true },
    { header: "", width: 30, sortable: false, dataIndex: 'PriorityCount', renderer: renderIcon, hideable: false, menuDisabled: true },
    { header: "Veh_Plateno", width: 100, sortable: true, dataIndex: 'Veh_Plateno' },
    { header: "Drv_Firstname", width: 100, sortable: true, dataIndex: 'Drv_Firstname' },
    { header: "GPSTime", width: 100, sortable: true, dataIndex: 'GPSTimeAsString' },
    { header: "Speed", width: 100, sortable: true, dataIndex: 'Speed' },
    { header: "SubFleet_Name", width: 100, sortable: true, dataIndex: 'SubFleet_Name' }

];

            gridStore.setDefaultSort('Veh_Plateno', 'asc');

            grid = new Ext.grid.GridPanel({
                ddGroup: 'gridDDGroup',
                store: gridStore,
                renderTo: 'panel',
                columns: cols,
                enableDragDrop: true,
                stripeRows: true,
                pageSize: 25,
                header: false,
                loadMask: true,
                autoExpandColumn: 'Position_ID',
                width: 900,
                height: 325,
                region: 'west',
                title: 'Data Grid',
                selModel: new Ext.grid.RowSelectionModel({ singleSelect: false }),
                listeners: {
                    'rowdblclick': function (grid, rowIndex, e) {
                        var rec = grid.getStore().getAt(rowIndex);
                        var columnName = grid.getColumnModel().getDataIndex(2);
                        Ext.MessageBox.alert('', rec.get(columnName));

                       //do something 
                    }

                }
            });

        }
        else {
            grid.store.loadData(myData);
        }

    }
    function renderIcon(val) {
        if (val) {

            val = '../images/grid/icon_warning.png';
            return "";
        }
    }
    function renderCheckBox(val, cell, record) {
        var x = '<input onclick="alert(' + cell.id + ')" type="checkbox" name="mycheckbox" />';
        //var x = '<input type="checkbox" name="mycheckbox" />';
        return x;

    }
    function renderDate(date) {
        alert(date);

        return date.format("d.m.Y");
    }

    function BindGridView() {

        Data.GetVehiclePositions(onSuccess, onFail, null);

    }
    function onSuccess(result) {

        RenderPositionsGrid(result);

        var timeout = 4000; var timer;
        timer = $.timer(timeout, function() { BindGridView(result); });
    }
    function onFail(result) {
        alert("fail");
    }
    function blink() {

        $('.Blink').delay(100).fadeTo(200, 0.5).delay(200).fadeTo(100, 1, blink);
    }

    Ext.onReady(function() {

        BindGridView();
        blink();

    });
2
追加された 編集された
ビュー: 1
あなたのコードの外観から、20秒ごとにグリッドを再作成していますか?
追加された 著者 Ryan,

1 答え

あなたは使うことができます

var myMask = new Ext.LoadMask(grid.getEl(), {msg:"Please wait..."});
myMask.show();

しかし、私はあなたのアプローチが奇妙だと思っています、20秒ごとに変わる唯一のものはあなたのダダ、あなたの店、列モデル、グリッドは決して変わっていないようです。 タイマーハンドラで単純な loadData(Object data、[Boolean append])を実行できますか? API ここにある

7
追加された
thaks manこのapprochは私とうまく動作しますが、今はブラウザがぶら下がっているようです。グリッドオブジェクトは無限ループに入ります。このスクリプトコードはすべて、タイマーで私に例を与えてください。
追加された 著者 Ayman Barhoum,
どの線が無限ループを引き起こしているのか知っていますか?
追加された 著者 Chao,