extjs: grila masca de încărcare

Eu folosesc grila extjs, și am un timer jQuery, care va apela funcția RenderGrid la fiecare 20 de secunde. Vreau să afișez masca pentru grila fiecare cronometru. Vă rugăm consultați.

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 om această abordare de lucru bine cu mine, dar acum browser-ul meu este agățat se pare, obiect grilă va intra în buclă infinită acest cod meu script, vă rugăm să primaide mine exemplu cu cronometrul dacă puteți:

    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
din aspectul codului dvs., re-creați grila la fiecare 20 de secunde bifați?
adăugat autor Ryan, sursa

1 răspunsuri

Ai putea folosi

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

Dar mi se pare că abordarea e ciudată, pare că singurul lucru care se schimbă la fiecare 20 de secunde este dada dvs., magazinul dvs., modelul coloanei, grila nu sa schimbat niciodată. Puteți face doar un simplu loadData (date obiect, [Boolean append]) în instrumentul dvs. de timp? API este aici

7
adăugat
thaks om această abordare de lucru bine cu mine, dar acum browser-ul meu este agățat se pare, obiect grilă va intra în buclă infinită acest cod meu script, vă rugăm să primaide mine exemplu cu cronometrul dacă puteți:
adăugat autor Ayman Barhoum, sursa
Știți ce linie cauzează buclă infinită?
adăugat autor Chao, sursa
JavaScript, România - Moldova
JavaScript, România - Moldova
254 participanți

Comunitatea Română JavaScript: github.com/js-ro Pentru confort, opriți notificările. Parteneri: @node_ro, @php_ro, @python_ro, @seo_ro, @RomaniaGroup, @ai_ro, @Grupuri_IT Offtop: @holywars_ro Joburi: @js_jobs_ro Sponsored with ❤️ by ciupacabra.com

JavaScript jobs România Moldova
JavaScript jobs România Moldova
109 participanți

Pentru confort opriți notificările. Vorbim despre posturi de muncă și freelance, proiecte proprii.