How to Reload or refresh tab panel in ext js

Question

setInterval(function() {
              currentdetik += 1;
              document.getElementById("demo").innerHTML = " [ " + lastURLSegment + " ] Update Terbaru: " +  new Date() + " >> Refresh in : " + (timer - currentdetik)  + " detik";
              if (currentdetik >= timer) {
                    window.location.load();
                    //pelpadam.view.Refresh();
                    //tabpelpadam.load();
                    currentdetik = 0;
                }
            }, 1000);

i've try some solution, but it's not working. i just want my tab panel refresh after the timer is 0, not all of the page

Answer 1

Depending of the content inside your tabpanel I would suggest different approaches:

• A rather complex view has to be updated: see my fiddle on how to remove all items and recreate by adding the view again.
• Updating a grid: --> reload store
• Updating data in a view: --> use templates or use data-binding

Bonus Answer:

• In the fiddle I added a task to the taskmanage rather than using setInterval

Answer 2

var tabpelpadam = Ext.create('Ext.panel.Panel', {
    title: 'Info Pelanggan Padaenter code herem',
    cls: 'inner-tab-custom',
    id: 'pelpadam',
    closeAction: 'destroy',
    layout: 'border',
    closable: true,
    hideMode: Ext.isIE ? 'offsets' : 'display',
    items: {
        region: 'center',
        layout: 'fit',
        id: 'padampanel',
        xtype: 'gmappanel',
        zoomLevel: 5,
        setCenter: {
            lat: -2.51515,
            lng: 117.58667
        },
        listeners: {            
            'mapready': function (map) {
                var maps = map.gmap;
                var infoWindow = new google.maps.InfoWindow();
                var image = {
                    url: 'image/pin_green.png',
                    size: new google.maps.Size(32, 32),
                    //origin: new google.maps.Point(0,0), // origin
                    top:'50%',
                    left:'50%',
                };

                var padamStore = Ext.create('Ext.data.Store', {
                    fields: ['Distribusi', 'Area', 'Rayon', 'Posko', 'NoLap', 'Lat', 
                    'Lng', 'Nama', 'IdPel', 'TglPadam'],
                    proxy: {
                        type: 'ajax',
                        url: 'data/pelpadam_read.php',
                        actionMethods: {
                            read: 'POST'
                        },
                        reader: { 
                            type: 'json',
                            root: 'data',
                        }
                    },
                    autoLoad: true,
                    listeners: {
                        load: function (a, b) {
                            console.log(b);
                            var inpelpadam = [];
                            /*------------------------------------*/   
                            for (var i = 0; i < b.length; i++) {
                                inpelpadam[i] = new google.maps.Marker({
                                    position: new google.maps.LatLng(b[i].data.Lat, b[i].data.Lng),
                                    map: maps,
                                    icon: image,
                                    idpel: b[i].data.IdPel,
                                    nama: b[i].data.Nama,
                                    distri: b[i].data.Distribusi,
                                    area: b[i].data.Area,
                                    rayon: b[i].data.Rayon,
                                    posko: b[i].data.Posko,
                                    tglpadam: b[i].data.TglPadam,
                                    lat: b[i].data.Lat,
                                    lng: b[i].data.Lng
                                });