How to pass data from a Controller to a View

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);

Answer 2

I hope that I understood you correctly but I'm not quite certain that this will help you.

Anyway, in my app I have a panel that gets updated from a listener function (onListTap) in the controller via the setData() function. This in turn fires a updatedata event on/from the panel which also is fetched in the controller and then used to change the panels children.

Example of the updatedata listener:

onMyPanelUpdate: function(component, newdata, options) {
    var holder = component.child("#innerContainer");

    holder.child("#detailsText").setData(newData);
    holder.child("#detailImg").setSrc(newData.imgUrl);
    holder.child("#detailsTitle").setData(newData);
    holder.child("#extras").setHtml(newData.extraHtml);
}

Hope this helps you and please return with comments if you need additional help or if I have misunderstood your problem.