1. #1
    Sencha User
    Join Date
    May 2013
    Posts
    1
    Vote Rating
    0
    shai is on a distinguished road

      0  

    Default Sencha Touch 2 Dataview not refreshed well

    Sencha Touch 2 Dataview not refreshed well


    I am developing in sencha touch 2.2. i added a Ext.dataview.DataView to create a rich list with several controls. i linked to it a Ext.dataview.component.DataItem as documented.
    the DataView is linked to a STORE which i load dynamically in my code several times. on the first time i load the STORE, the list is refreshed well, but in the next times, when the STORE rows are changed (add new rows or delete rows) the List is not refreshed well and a mix of old and new dataitems listed. * notice that the updateRecord of the DataItem is called, but it will not be able to draw the row in the adiditional rows
    i noticed that it is related to the caching mechanism of the DataView. when i put the maxItemCach property of the DataView to 0, the list cannot be expanded to more rows than the number of rows in the last time the store was loaded. meaning all the existing rows are replaced with the new store rows, but new indexes are not created. when i increase the cach value, if the store is re-load with less rows, the list show the new rows but do not clear the ones that it should. i also noticed that the extra rows are not really functional. i cannot click them for example.
    it looks like a draw problem.
    please help me. i am adding my code here:
    Ext.dataview.DataView:


    Code:
    Ext.define('MyApp.view.BusinessDataView', {    extend: 'Ext.dataview.DataView',    alias: 'widget.businessdataview',    config: {        id: 'BusinessDataView',        itemId: 'BusinessDataView',        scrollable: 'vertical',        deselectOnContainerClick: false,        defaultType: 'BusinessDataItem',        maxItemCache: 50,        selectedCls: 'Dataitem-selection',        store: 'BusinessStore',        useComponents: true    }});
    Ext.dataview.component.DataItem:

    Code:
    Ext.define('MyApp.view.BusinessDataItem', {    extend: 'Ext.dataview.component.DataItem',    alias: 'widget.BusinessDataItem',    config: {        height: '25%',        itemId: 'BusinessDataItem',        minHeight: 100,        padding: 10,        layout: {            type: 'fit'        },        itemCls: 'Dataitem',        items: [            {                xtype: 'container',                height: '100%',                width: '100%',                layout: {                    type: 'fit'                },                items: [                    {                        xtype: 'container',                        ui: '',                        width: '100%',                        layout: {                            align: 'stretchmax',                            type: 'hbox'                        },                        items: [                            {                                xtype: 'container',                                flex: 2,                                margin: '10 0 10 10',                                items: [                                    {                                        xtype: 'image',                                        cls: 'ListItemLogo',                                        height: 70,                                        id: 'Image',                                        width: 70,                                        src: 'resources/images/logo.png'                                    }                                ]                            },                            {                                xtype: 'container',                                flex: 3,                                margin: '10 10 10 0',                                items: [                                    {                                        xtype: 'component',                                        cls: 'ListItemInnerTitle',                                        html: '10.975 km <br> 48% full <br> +23',                                        itemId: 'Title',                                        styleHtmlCls: 'ListItemHtml',                                        styleHtmlContent: true,                                        width: '90%'                                    }                                ]                            },                            {                                xtype: 'container',                                flex: 1.5,                                margin: '0 0 10 0',                                layout: {                                    type: 'vbox'                                },                                items: [                                    {                                        xtype: 'component',                                        flex: 0.5,                                        cls: 'likesManWomCont',                                        html: '78 <br>51% <br> 49%',                                        itemId: 'likeComp',                                        minHeight: 60,                                        styleHtmlCls: 'ListItemHtml',                                        styleHtmlContent: true                                    },                                    {                                        xtype: 'container',                                        flex: 1                                    }                                ]                            },                            {                                xtype: 'container',                                flex: 1,                                margin: '0 0 0 10',                                items: [                                    {                                        xtype: 'button',                                        baseCls: 'GoBusinessButton',                                        itemId: 'GoBtn',                                        margin: '18 0 10 10',                                        minHeight: 50                                    }                                ]                            }                        ]                    }                ]            },            {                xtype: 'titlebar',                cls: 'dataitemTitle',                docked: 'top',                height: 'auto',                items: [                    {                        xtype: 'container',                        flex: 5,                        docked: 'right',                        minWidth: '150%',                        layout: {                            type: 'hbox'                        },                        items: [                            {                                xtype: 'container',                                html: '<img src="resources/images/green_b.png" height="8" width="8")>',                                itemId: 'dotcontainer',                                margin: '-6 4 0 20'                            },                            {                                xtype: 'component',                                flex: 2,                                baseCls: 'lastupdateLabel',                                html: 'Last Updated:<b>8 minutes ago</b>',                                itemId: 'lastupdatelbl2'                            }                        ]                    },                    {                        xtype: 'label',                        flex: 3,                        baseCls: 'BusinessNameLabel',                        docked: 'left',                        html: 'BusinessName',                        itemId: 'BusinessNamelbl'                    }                ]            }        ],        listeners: [            {                fn: 'onGoBtnTap',                event: 'tap',                delegate: '#GoBtn'            }        ]    },    onGoBtnTap: function(button, e, eOpts) {        console.log('gobtn tap');        //check if the screen was loaded already before        var Screen = Ext.ComponentQuery.query('#BusinessScreen');        if(Screen.length===0)//no        {            Screen = Ext.create('MyApp.view.BusinessScreen', {                id: 'BusinessScreen'            });            //Screen.business_id = record.get('business_id');            Screen.business_id = button.up('dataitem').getRecord(0)._data.business_id;            Screen.distance = button.up('dataitem').getRecord(0)._data.distance;            Ext.Viewport.setActiveItem(Screen);        }        else        {            //Screen[0].business_id = record.get('business_id');            Screen[0].business_id=button.up('dataitem').getRecord(0)._data.business_id;            Screen[0].distance = button.up('dataitem').getRecord(0)._data.distance;;            Ext.Viewport.setActiveItem(Screen[0]);            //TODO: save the selected business ID        }    },    updateRecord: function(record) {        // Provide an implementation to update this container's child items        this.callParent(arguments);         if(record)        {            var capacitypercent = 0;            if(record.get('capacitypercent'))            capacitypercent= record.get('capacitypercent');            var moreboys =0;            if(record.get('moreboys'))            moreboys= record.get('moreboys');            var moregirls=0;            if(record.get('moregirls'))            moregirls= record.get('moregirls');            var likescounter = "";            if(record.get('likescounter'))            likescounter= "";//record.get('likescounter');            var logo = record.get('logourl');            if(!logo || logo === null || logo==="")            {                logo='resources/images/logo.png';            }            this.down('image[itemId=Image]').setSrc(logo);            this.down('component[itemId=Title]').setHtml(''+record.get('distance')+' km <br> '+capacitypercent+'% full <br> +'+record.get('minage')+'');            this.down('label[itemId=BusinessNamelbl]').setHtml(record.get('business_name'));            this.down('component[itemId=likeComp]').setHtml(''+likescounter+'<br> '+moregirls+'%<br>'+moreboys+'%');            //calculate the last update minutes            //set the Rating button            //console.log(record.get('last_update_time'));            var LastupdateTime = record.get('last_update_time');            //console.log("LastRatingTime:"+LastRatingTime);            var diff;//the time diff between now and the last update time by user            var now = new Date(); // now            if(LastupdateTime)            {                                       //calculate the diff in minutes since last update                diff= now - LastupdateTime;                var sign=diff<0?-1:1;                diff/=sign; // or diff=Math.abs(diff);                var minutes,milliseconds,seconds;                diff=(diff-(milliseconds=diff%1000))/1000;                //diff=(diff-(seconds=diff%60))/60;                diff=((diff-(minutes=diff%60))/60);            }            else            {                diff=-1;//dummy value               }            if(diff===-1)            {                this.down('component[itemId=lastupdatelbl2]').setHtml('Last Updated:');            }            else            {                this.down('component[itemId=lastupdatelbl2]').setHtml('Last Updated:<b>'+diff+' minutes ago</b>');            }            if(diff<5 && diff>=0)            {                this.down('container[itemId=dotcontainer]').setHtml('<img src="resources/images/green_b.png" height="8" width="8")>');            }            else            {                this.down('container[itemId=dotcontainer]').setHtml('<img src="resources/images/greydot.png" height="8" width="8")>');            }            //this.show();            //this.down('component[itemId=Title]').destroy();        }    },    applyImage: function(config) {        return Ext.factory(config, Ext.Img, this.down('image[itemId=Image]'));    },    applyTitle: function(config) {        return Ext.factory(config, Ext.Component, this.getTitle());    },    applygoBtn: function(config) {        return Ext.factory(config, Ext.Button, this.getGoBtn());    },    updateImage: function(newImage, oldImage) {        if (oldImage) {            this.remove(oldImage);        }        if (newImage) {            this.add(newImage);        }    },    updateTitle: function(oldTitle, newTitle) {        if (newTitle) {            this.add(newTitle);        }        if (oldTitle) {            this.remove(oldTitle);        }    },    updategoBtn: function(oldgoBtn, newgoBtn) {        if (newgoBtn) {            this.add(newgoBtn);        }        if (oldgoBtn) {            this.remove(oldgoBtn);        }    },    initialize: function() {        /*this.callParent();        this.getItems().first().on('updatedata', this.updateItem, this);        this.updateItem(this);*/    },    updateItem: function(me) {        console.log('updateItem');    }});

  2. #2
    Sencha User
    Join Date
    Apr 2014
    Posts
    1
    Vote Rating
    0
    antanagildo is on a distinguished road

      0  

    Default Same problem

    Same problem


    Hey, how did you get along with this problem?

    Mine problem resembles yours a little bit.

    I have some Ext toggles that I create at run time, after the template is created. It renderTo some id's I have inserted into the template. It runs on a DataView refresh event.

    On first refresh it runs ok, after I change the value on the store, it does not call the event refresh again, I have one (alert(1); ) on the code and it just run once, but the template overwrites the old record item.

  3. #3
    Sencha Premium Member
    Join Date
    Oct 2008
    Location
    Nebraska
    Posts
    3
    Vote Rating
    1
    scottw@cashwa.com is on a distinguished road

      0  

    Default


    Try this: Ext.ComponentQuery.query('#BusinessDataView')[0].refresh();