extjs:加载掩码网格

Question

我正在使用 extjs 网格，我有一个 jQuery 计时器，它将每 20 秒调用一次 RenderGrid 函数。我想在每个计时器滴答声中显示网格的掩码。请指教。

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;

    }

---

谢谢，这个方法对我来说工作得很好，但现在我的浏览器似乎挂了，网格对象将进入无限循环，这是我所有的脚本代码，如果可以的话，请给我提供带有计时器的示例:

    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 "<img class=Blink src='" + val + "'>";
        }
    }
    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();

    });

Answer 1

你可以使用

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

但我发现你的方法有点奇怪，似乎每 20 秒唯一改变的是你的 dada、你的商店、列模型、网格从未改变。你能在你的计时器处理程序中做一个简单的 loadData(Object data, [Boolean append] ) 吗？ API在这里