Question

I have the following listener on a list view in a tab panel:

listeners: {
    itemtap: function (list, index, item, e) {
    var record = list.getStore().getAt(index);
    this.fireEvent('showListCommand', this, record);
}

This is the config of my controller:

config: {
    refs: {
        mainView: "mainview",
        activeLists: "activelists",
        listView: "listview"
        // I deleted some code for easier reading
    },
    control: {
        activeLists: {
            showListCommand: "onShowListCommand"
        }
    }
},

This is the onShowListCommand function and the function it calls, both in the controller:

onShowListCommand : function (list, record) {
    this.activateListView(record);
},

slideLeftTransition: { type: 'slide', direction: 'left' },

activateListView: function (record) {
    var listView = this.getListView();
    listView.setRecord(record);
    console.log(record.get('id'));
    Ext.Viewport.animateActiveItem(listView, this.slideLeftTransition);
},

Console log works as expected here, it logs the id of the list item that was tapped. Also I know setRecord function works, it displays both the title, id and budget fields from the model inside the form textfield in listView.

Now, what I’m trying to succeed for the past 10h is to pass these model fields to the listView and to be able to use them outside the form, for example in the title or html. So basically I have a list inside a tab panel and on itemtap I’m displaying another view using Ext.Viewport.animateActiveItem.

ListView is “Ext.form.Panel” and it currently has a toolbar and a fieldset via initialize() function, but I want to replace the fieldset with some plain html but I can’t use the data from the setRecord() in any way.

Answer 1

I solved this. The main problem was that I tried to display the data that wasn’t yet passed because all this was in the initialize function. I figure out a way to pass the data through viewport too.

Here’s how my function to display the view where I want to pass the data to looks now:

activateListView: function (record) {
        Ext.Viewport.animateActiveItem( {xtype: 'listview', data: record.data}, {type: 'slide', direction: 'left'} );
    }

Here’s how I use the data in the view:

var datafield = this.getData();
console.log(datafield .id);