extjs: laad maskerraster

Ik gebruik het extjs-rooster en ik heb een jQuery-timer, die elke 20 seconden de functie RenderGrid aanroept. Ik wil maskeren voor rooster elke timer teek. Adviseer, alstublieft.

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 deze approch werkt goed met mij, maar nu mijn browser het lijkt te lijken, zal grid object in oneindige lus deze al mijn scriptcode invoeren, geef me alsjeblieft voorbeeld met timer als je kunt:

    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
van het uiterlijk van je code, maak je het raster opnieuw om de 20 seconden?
toegevoegd de auteur Ryan, de bron

1 antwoord

Je zou kunnen gebruiken

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

Maar ik vind je aanpak een beetje raar, het lijkt erop dat het enige dat elke 20 seconden verandert je dada is, je winkel, kolommodel, het raster is nooit veranderd. Kun je gewoon een eenvoudige loadData (Objectgegevens, [Booleaanse append]) in je timerhandler doen? de API is hier

7
toegevoegd
thaks man deze approch werkt goed met mij, maar nu mijn browser het lijkt te lijken, zal grid object in oneindige lus deze al mijn scriptcode invoeren, geef me alsjeblieft voorbeeld met timer als je kunt:
toegevoegd de auteur Ayman Barhoum, de bron
weet jij welke lijn de oneindige lus veroorzaakt?
toegevoegd de auteur Chao, de bron