Dataview with nested data (hasMany): Datamanipulation not working

[suamikim]

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:

    // 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:

        updateIndexes: function(startIndex, endIndex) {
            var ns = this.all.elements,
                records = this.store.getRange(),
                recordsCnt = records.length || 0,
                allRecords = [],
                i;

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

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

            startIndex = startIndex || 0;
            endIndex = endIndex || ((endIndex === 0) ? 0 : (ns.length - 1));
            for(i = startIndex; i <= endIndex; i++) {
                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(data, index, record) {
            var associatedData, attr;

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

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

            for (i = 0; i < len; i++) {
                record = records[i];
                data[i] = this.prepareData(record.data, startIndex + i, record);
            }
            return data;
        },

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

            me.tpl.overwrite(div, me.collectData(records, index));

            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

[mitchellsimoens]

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.

[suamikim]

@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/

            itemclick: function(view, record, item, idx, event, opts) {
                record.store.remove(record);
                this.onRemove(record.store, record, idx);
                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