1. #1
    Sencha User
    Join Date
    Jul 2011
    Posts
    1
    Vote Rating
    0
    BlackPantha is on a distinguished road

      0  

    Default Unanswered: Load new Data in Store but LoadRecord loads old Data in formPanel

    Unanswered: Load new Data in Store but LoadRecord loads old Data in formPanel


    Hello together,

    I have a Form that submit the data correctly to the Server and if I load the store with the new Data it will work correctly too. But if I load the new record into the formPanel again, this formPanel takes the old Record what I have updated before. Nothing would help...
    form.reset() before loading the new Data?- Not working...
    field.setValue() with this Data will also not working...
    Two other workmates looks over my code but they can't also find any wrong codesections...

    this is the store with model:
    Code:
            Ext.regModel('calEvents', {
                fields: [
                {name: 'id',            type: 'string'},
                {name: 'cdId',            type: 'string'},
                {name: 'cdUid',            type: 'string'},
                {name: 'cdText',        type: 'string'},
                {name: 'cdStart',        type: 'string'},
                {name: 'cdEnd',            type: 'string'},
                {name: 'cdFulltime',    type: 'string'},
                {name: 'cdRemember',    type: 'string'},
                {name: 'cdStatus',        type: 'string'},
                {name: 'cdNotes',        type: 'string'},
                {name: 'cdPrivate',        type: 'string'},
                {name: 'cdUrl',            type: 'string'},
                {name: 'IsNew',            type: 'string'},
                {name: 'cdUserInvite',    type: 'string'},
                {name: 'cdUserShort',    type: 'string'},
                {name: 'cdExtCount',    type: 'string'},
                {name: 'cdrStart',        type: 'string'},
                {name: 'cdrEnd',        type: 'date',dateFormat:'Y-m-d'},
                {name: 'cdrFrequenz',    type: 'integer'},
                {name: 'cdWeekDay',        type: 'string'},
                {name: 'cdStartDate',    type: 'date',dateFormat:'Y-m-d'},
                {name: 'cdStartTime',    type: 'string'},
                {name: 'cdStartHour',    type: 'string'},
                {name: 'cdStartMin',    type: 'string'},
                {name: 'cdEndHour',        type: 'string'},
                {name: 'cdEndMin',        type: 'string'},
                {name: 'cdEndTime',        type: 'string'},
                {name: 'cdrDays',        type: 'string'}
                ]
            });
            var calStore = new Ext.data.Store({
                model            : 'calEvents',
                autoLoad        : true,
                storeId            : 'calStore',
                sorters            : 'cdStart',
                getGroupString    : function(record){
                    var headTpl =
                        '<table class=\'calTable\'>'+
                            '<tr class=\'calTableHeaderRow\'>'+
                                '<td class=\'calTableLeft\'>'+
                                    record.get('cdWeekDay')+
                                '</td>'+
                                '<td class=\'calTableHeaderCenter\'>'+
                                    record.get('cdStartDate').format('d.m.Y')+' (KW '+(calWeek)+')'+
                                '</td>'+
                                '<td class=\'calTableRight\'>'+
    //                                '<img src=\'../skins/images/mobile/addButton.jpg\'>'+
                                '</td>'+
                            '</tr>'+
                        '</table>';
                    return headTpl;
                },
                proxy    : {
                    type            : 'ajax',
                    url             : '../libs/mobile/dispatchMobile.php',
                    method            : 'POST',
                    actionMethods    : {
                        create : 'POST',
                        read   : 'POST',
                        update : 'POST',
                        destroy: 'POST'
                    },
                    extraParams: {
                        modul        : 'loadUserCal',
                        calStart    : calWeekStart,
                        calEnd        : calWeekEnd,
                        cuId        : cuId
                    },
                    reader: {
                        type: 'json',
                        root: 'calEvents',
                        idProperty: 'cdId'
                    }
                }
            });
    this is the part where the formPanel is called by:

    Code:
           var calTpl = new Ext.XTemplate(
                '<table class="calTable">',
                    '<tr class="calTableBodyRow">',
                        '<td class="calTableLeft" onclick="openMyEntry(\'{cdId}\');">',
                            '{cdStartTime}',
                        '</td>',
                        '<td class="calTableCenter" onclick="openMyEntry(\'{cdId}\');">',
                            '{cdText}',
                        '</td>',
                        '<td class="calTableRight">',
    //                        '<tpl if="test">',
    //                            '<button class="calTableButton" onclick="removeEvent({cdId});">',
                                    '<img src="../skins/images/mobile/trash.gif" onclick="removeEvent({cdId});">',
    //                            '</button>',
    //                        '</tpl>',
                        '</td>',
                    '</tr>',
                '</table>'
            );
            var calendarBox = new Ext.List({
                width        : '100%',
                id            : 'calendarBox',
                store        : calStore,
                height    : '293px',
                scroll        : {
                    direction    : 'vertical'
                },
                itemTpl        : calTpl,
                hidden        : true,
                grouped        : true,
                listeners    : {
                    beforeshow: function(){
                        this.setHeight(Ext.getCmp('centerBox').getHeight()-tabBarBottom.getHeight());
                    }
                }
            });
            openMyEntry = function(_data){
    
                Ext.getCmp('searchBox').hide();
                Ext.getCmp('calendarBox').hide();
                Ext.getCmp('newEntryBox').show();
                Ext.getCmp('newEntryBar').show();
                Ext.getCmp('teamChangeBar').hide();
                Ext.getCmp('searchBar').hide();
                Ext.getCmp('kwChoiceBar').hide();
                Ext.getCmp('newEntryBox').setHeight(Ext.getCmp('centerBox').getHeight()-Ext.getCmp('tabBarBottom').getHeight());
                Ext.getCmp('tabBarBottom').doComponentLayout();
                Ext.getCmp('centerBox').doLayout();
    
                if(_data != ''){
                    Ext.getCmp('newEntryTitle').setTitle('Bearbeiten');
                    console.log(_data);
                    var myNewValue = Ext.StoreMgr.get('calStore').getById(_data);
                        console.log(myNewValue);
                        Ext.getCmp('cdUid').setValue(cuId);
                        Ext.getCmp('cdId').setValue(_data);
                        Ext.getCmp('cdText').setValue(calStore.getById(_data).data.cdText);
                        Ext.getCmp('cdStartDate').setValue(calStore.getById(_data).data.cdStartDate);
                        Ext.getCmp('cdrEnd').setValue(calStore.getById(_data).data.cdrEnd);
                        Ext.getCmp('cdrFrequenz').setValue(calStore.getById(_data).data.cdrFrequenz);
                        Ext.getCmp('cdFulltime').setValue(calStore.getById(_data).data.cdFulltime);
                        Ext.getCmp('cdStartTime').setValue(calStore.getById(_data).data.cdStartTime);
                        Ext.getCmp('cdEndTime').setValue(calStore.getById(_data).data.cdEndTime);
                        Ext.getCmp('cdNotes').setValue(calStore.getById(_data).data.cdNotes);
                        Ext.getCmp('cdPrivate').setValue(calStore.getById(_data).data.cdPrivate);
                }
            };
    and here is the formPanel:
    Code:
            var newEntryBox = new Ext.form.FormPanel({
                id        : 'newEntryBox',
                hidden    : true,
                layout    : 'vbox',
                width    : '100%',
                border    : false,
                frame    : false,
                fullscreen : true,
                scroll    : {
                    direction    : 'vertical'
                },
                items    : [{
                    xtype            : 'hiddenfield',
                    id                : 'cdId',
    
                },{
                    xtype            : 'hiddenfield',
                    id                : 'cdUid',
                    value            : cuId
    
                },{
                    xtype    : 'fieldset',
                    width    : '100%',
                    title    : 'Neuer Eintrag',
                    id        : 'newEntryTitle',
                    defaults: {
                        labelWidth: '30%',
                        align: 'right'
                    },
                    items: [{
                        xtype        : 'textareafield',
                        id            : 'cdText',
                        label        : 'Beschreibung',
                        labelWidth    : '22%',
                        labelAlign    : 'top',
                        required    : true
                    },{
                        xtype            : 'datepickerfield',
                        label            : 'Start',
                        id                : 'cdStartDate',
                        required        : true,
                        value            : new Date(),
                        picker            : {
                            yearTo        : 2040
                        }
                    },{
                        xtype            : 'datepickerfield',
                        label            : 'Ende',
                        id                : 'cdrEnd',
                        required        : true,
                        value            : new Date(),
                        picker            : {
                            yearTo        : 2099
                        }
                    },{
                        xtype            : 'comboboxfield',
                        name            : 'cdrFrequenz',
                        id                : 'cdrFrequenz',
                        displayField    : 'Frequenz',
                        valueField        : 'cdrFrequenzt',
                        store            : new Ext.data.Store({
                            model: 'remind',
                            data : [
                            {cdrFrequenzt: 0,       Frequenz: 'einmalig'},
                            {cdrFrequenzt: 7,        Frequenz: 'woechentlich'},
                            {cdrFrequenzt: 14,       Frequenz: 'zweiwöchig'},
                            {cdrFrequenzt: 28,    Frequenz: 'monatlich'}
                            ]
                        })
                    },{
                        xtype            : 'togglefield',
                        id                : 'cdFulltime',
                        label            : 'Ganztägig',
                        textAlign            : 'right',
                        listeners        : {
                            change        : function(a,b,c){
                                if(1 != c){
                                    Ext.getCmp('cdStartTime').enable();
                                    Ext.getCmp('cdEndTime').enable();
                                }
                                else{
                                    Ext.getCmp('cdStartTime').disable();
                                    Ext.getCmp('cdEndTime').disable();
                                }
                            }
                        }
                    },new Ext.ux.form.TimePicker({
                        name             : 'cdStartTime',
                        label            : 'Uhrzeit',
                        id                : 'cdStartTime',
                        minuteScale        : 15,
                        hourFrom        : 1,
                        hourTo            : 14,
                        value: {
                            hour    : (new Date().getHours()+1)%24,
                            minute    : 0
                        }
                    }),new Ext.ux.form.TimePicker({
                        name             : 'cdEndTime',
                        label            : 'Dauer',
                        id                : 'cdEndTime',
                        minuteScale        : 15,
                        hourFrom        : 1,
                        hourTo            : 14,
                        value: {
                            hour    : 1,
                            minute    : 0
                        }
                    }),{
                        xtype        : 'textareafield',
                        id            : 'cdNotes',
                        label        : 'Details',
                        labelWidth    : '22%',
                        labelAlign    : 'top',
                        required    : true
                    },{
                        xtype        : 'togglefield',
                        id            : 'cdPrivate',
                        label        : 'Privat'
    
                    }]
                }]
            });
    /**
     * The toolbar to submit the form
     */
            var newEntryBar    = new Ext.Toolbar({
                dock         : 'top',
                id            : 'newEntryBar',
                layout        : {
                    pack: 'center',
                    type: 'hbox'
                },
                items        : [{
                    xtype            : 'button',
                    text            : 'Speichern',
                    id                : 'savebutton',
                    ui                : 'confirm',
                    width            : '40%',
                    handler            : function (){
                        Ext.getCmp('newEntryBox').submit({
                            method    : 'post',
                            url        : '../libs/mobile/dispatchMobile.php',
                            scope    : this,
                            params    : {
                                modul: 'submitEvent'
                            },
                            success    : function(){
                                Ext.getCmp('searchBox').hide();
                                Ext.getCmp('newEntryBox').hide();
                                Ext.getCmp('newEntryBox').reset();
                                Ext.getCmp('kwChoiceBar').show();
                                Ext.getCmp('searchBar').hide();
                                Ext.getCmp('teamChangeBar').hide();
                                Ext.getCmp('newEntryBar').hide();
                                Ext.getCmp('calendarBox').show();
                                Ext.getCmp('tabBarBottom').setActiveItem(0);
                                Ext.getCmp('centerBox').doLayout();
                                Ext.StoreMgr.get('calStore').load({params:{modul:'loadUserCal',calStart:calWeekStart,calEnd:calWeekEnd,cuId:cuId}});
                            }
                        });
                    },
                    listeners        :{
                        beforerender: function(){
                            if(sessId == cuId){
                                Ext.getCmp('savebutton').show();
                                Ext.getCmp('declinebutton').setWidth('40%');
                            }
                            else{
                                Ext.getCmp('savebutton').hide();
                                Ext.getCmp('declinebutton').setWidth('70%');
                            }
                        }
                    }
                },{
                    xtype            : 'button',
                    text            : 'Abbrechen',
                    ui                : 'decline',
                    id                : 'declinebutton',
                    width            : '40%',
                    handler            : function(){
                        Ext.getCmp('searchBox').hide();
                        Ext.getCmp('newEntryBox').hide();
                        Ext.getCmp('kwChoiceBar').show();
                        Ext.getCmp('calendarBox').show();
                        Ext.getCmp('searchBar').hide();
                        Ext.getCmp('teamChangeBar').hide();
                        Ext.getCmp('tabBarBottom').setActiveItem(0);
                        Ext.getCmp('newEntryBar').hide();
                        Ext.getCmp('centerBox').doLayout();
    
                    }
                }]
            });
    I need your Help, I can't find the mistake

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,652
    Vote Rating
    901
    Answers
    3575
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I don't see where you are using loadRecord. Also, I don't like the usage of id and getCmp... those should only be used when debugging.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    16
    Vote Rating
    0
    Answers
    1
    Travisrowland is on a distinguished road

      0  

    Default


    I am having this same exact issue, the crazy thing is that the data displays correctly everywhere else in the app and when I load a different record into the form, the different record displays, then when I go back to load the original record in the form it still has the old data!!! I checked in my store and the data is correct, but when loaded into the form it is the old data. What in the heck!?!?!?!?!?!?

  4. #4
    Sencha User
    Join Date
    Jan 2012
    Posts
    16
    Vote Rating
    0
    Answers
    1
    Travisrowland is on a distinguished road

      0  

  5. #5
    Sencha Premium Member findajit's Avatar
    Join Date
    Mar 2009
    Location
    Hyderabad, India
    Posts
    62
    Vote Rating
    0
    Answers
    6
    findajit is on a distinguished road

      0  

    Default


    @Travisrowland,

    While the workaround is okay, can you paste an example code, which can reproduce the issue?
    My Book on Sencha Touch - Sencha Touch Cookbook (2nd Edition)
    My older book on Sencha Touch - Sencha Touch Cookbook
    My Sencha Touch Blog - Walking Tree Sencha Touch Blog
    My ExtJS Blog - Walking Tree ExtJS Blog

    Buy ExtJS Components from - Walking Tree e-Store

  6. #6
    Sencha User
    Join Date
    Jan 2012
    Posts
    16
    Vote Rating
    0
    Answers
    1
    Travisrowland is on a distinguished road

      0  

    Default


    Code:
    	editVenue : function(options) {
    		venue = this.store.getById(Number(Orderace.user.VenueId));
    		Orderace.views.venueEditForm.load(venue);
    		Orderace.views.viewport.setActiveItem('venueEditForm');
    	},
    That is an edit function, which loads the record into the form. Once the form is submitted, it saves the data to a remote store and then uses ajax to load the fresh data into the store via a proxy. When you come back to the edit form and try to load the record again, it loads the old data. Here is my proxy/store code:

    Function to initiate the loading of the store from the proxy:
    Code:
    	list : function(options) {
    		// Dynamically update proxy URL and extraParams
    		this.store.getProxy().url = Orderace.config.ServerUrl + '/' + Orderace.user.Token + '/venues/list.json';
    		this.store.getProxy().extraParams = Ext.applyIf( data = {
    			user_id : Orderace.user.Id
    		}, {
    			HMAC : Orderace.utils.getHMAC(data)
    		});
    		// Load the remote store
    		this.store.load();
    		// Show the venue list
    		Orderace.views.viewport.setActiveItem('venuesList');
    	},
    Venues store:
    Code:
    Orderace.stores.Venues = new Ext.data.Store({
    	model : 'Venue',
    	proxy : {
    		type : 'ajax',
    		timeout : 5000,
    		actionMethods : {
    			create : 'POST',
    			read : 'POST',
    			update : 'POST',
    			destroy : 'POST'
    		},
    		limitParam : null,
    		listeners : {
    			exception : function() {
    				Orderace.controllers.Venues.store = Orderace.stores.VenuesOffline;
    				Orderace.stores.VenuesOffline.load();
    			}
    		}
    	},
    	listeners : {
    		beforeLoad : function() {
    			Orderace.stores.Venues.getProxy().setReader();
    		},
    		load : function(store, records, success) {
    			Orderace.stores.VenuesOffline.proxy.clear();
    			this.each(function(record) {
    				Orderace.stores.VenuesOffline.add(record.data)[0];
    			});
    			Orderace.stores.VenuesOffline.sync();
    		}
    	},
    	// Fixing Sencha Touch Bug
    	// http://www.sencha.com/forum/showthread.php?138329-Store-findById-uses-old-dataset-after-second-load()&highlight=getbyid
        getById : function(id) {
            return this.data.findBy(function(record) {
                return record.getId() === id;
            });
        }
    });
    
    
    Orderace.stores.VenuesOffline = new Ext.data.Store({
    	model : 'Venue',
    	proxy : {
    		type : 'localstorage',
    		id : 'orderace-venues'
    	}
    });