1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    84
    Answers
    7
    Vote Rating
    0
    suamikim is on a distinguished road

      0  

    Default Unanswered: Dataview with nested data (hasMany): Datamanipulation not working

    Unanswered: Dataview with nested data (hasMany): Datamanipulation not working


    Hy there,

    I'm displaying some nested data with a dataview. I've managed to do this by using the hasMany-relationship in my models and overriding some functions of the dataview. This is working just fine except that the dataview does not update properly after manipulating the store (deleting or updating records).

    The store's model looks like this:
    PHP Code:
        // Define the pet-model
        
    Ext.define('Pet', {
            
    extend'Ext.data.Model',
            
    fields: [
                { 
    name'name'type'string' },
                { 
    name'type'type'string' }
            ]
        });

        
    // Define the person-model (each person has many pets...)
        
    Ext.define('Person', {
            
    extend'Ext.data.Model',
            
    fields: [{ name'name'type'string' }],
            
    hasMany: { model'Pet'name'pets' }
        }); 
    I've overriden 5 methods of the dataview to make it show the xtemplate with nested data correctly. I took the overrides from this thread and adjusted them a little to fit my needs:
    PHP Code:
            updateIndexes: function(startIndexendIndex) {
                var 
    ns this.all.elements,
                    
    records this.store.getRange(),
                    
    recordsCnt records.length || 0,
                    
    allRecords = [],
                    
    i;

                
    Ext.iterate(records, function (recordidx) {
                    var 
    pets record.pets();

                    
    pets.each(function(recipe) {
                        
    allRecords.push(recipe);
                    });
                });

                
    startIndex startIndex || 0;
                
    endIndex endIndex || ((endIndex === 0) ? : (ns.length 1));
                for(
    startIndex<= endIndexi++) {
                    
    ns[i].viewIndex i;
                    
    ns[i].viewRecordId = ((allRecords.length i) && allRecords[i]) ? allRecords[i].internalId undefined;
                    if (!
    ns[i].boundView) {
                        
    ns[i].boundView this.id;
                    }
                }
            },

            
    prepareData: function(dataindexrecord) {
                var 
    associatedDataattr;

                if (
    record) {
                    
    associatedData record.getAssociatedData();
                    for (
    attr in associatedData) {
                        if (
    associatedData.hasOwnProperty(attr)) {
                            
    data[attr] = associatedData[attr];
                        }
                    }
                }
                return 
    data;
            },

            
    collectData: function(recordsstartIndex){
                var 
    data = [],
                    
    i,
                    
    len records.length,
                    
    record;

                for (
    0leni++) {
                    
    record records[i];
                    
    data[i] = this.prepareData(record.datastartIndex irecord);
                }
                return 
    data;
            },

            
    bufferRender: function(recordsindex){
                var 
    me this,
                    
    div me.renderBuffer || (me.renderBuffer document.createElement('div'));

                
    me.tpl.overwrite(divme.collectData(recordsindex));

                return 
    Ext.query(me.getItemSelector(), div);
            },

            
    getRecord: function(node) {
                var 
    recordId Ext.getDom(node).viewRecordId,
                    
    record = (recordId this.store.data.getByKey(recordId) : undefined);

                if (!
    record && (undefined !== recordId)) {
                    
    this.store.each(function(rec) {
                        
    record rec.pets().data.getByKey(recordId);
                        return (
    record === undefined);
                    });
                }

                return 
    record;
            } 
    I've put together a little live example: http://jsfiddle.net/6GFc2/

    As you can see the nested data is displayed just fine but after the deletion of a "sub-record" (by clicking the x) the dataview is not updated correctly even though the store is (as you can see in the debug output panel).

    I'd really appreciate any help with that. I guess I'm going to have to override some more methods of the dataview to make this work but actually I don't have no clue where to start looking...

    Thanks & best regards,

    mike

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,329
    Answers
    3541
    Vote Rating
    847
    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


    So when you delete a record from an association, not the top level, the dataview won't work. This is because the store that is bound to the dataview doesn't get any event from an association change.
    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
    Mar 2012
    Posts
    84
    Answers
    7
    Vote Rating
    0
    suamikim is on a distinguished road

      0  

    Default


    @mitchellsimoens
    Thanks, that brought me a little further:

    I just have to call the onRemove-method of the abstract view:

    http://jsfiddle.net/6GFc2/1/
    PHP Code:
                itemclick: function(viewrecorditemidxeventopts) {
                    
    record.store.remove(record);
                    
    this.onRemove(record.storerecordidx);
                    
    outputStore();
                } 
    This seems to work just fine for me but there are still some things that are not working as expected:
    • Adding of new persons
    • Adding of new pets
    • Update of pets
    I created a little stub for those "extra" features too but they are not working by now:
    http://jsfiddle.net/6GFc2/2/

    I guess I'm going to have to call the onAdd- & onUpdate-methods too, but they also need some modifications to work correct...

    I'd still appreciate any help with those further concerns.

    By the way: Does anybody know if further support of those associated stores is going to be implemented in the DataView in any of the upcoming Ext versions?

    Thanks

Thread Participants: 1