如何将数据从控制器传递到视图

Question

我在标签面板的列表视图中有以下监听器：

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

这是我的控制器的配置：

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

这是 onShowListCommand 函数和它调用的函数，都在控制器中：

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

控制台日志在这里按预期工作，它记录被点击的列表项的 ID。我也知道 setRecord 函数有效，它在 listView 的表单文本字段中显示模型中的标题、id 和预算字段。

现在，我在过去 10 小时里想要成功的是将这些模型字段传递给 listView 并能够在表单之外使用它们，例如在标题或 html 中.所以基本上我在选项卡面板中有一个列表，在 itemtap 上我使用 Ext.Viewport.animateActiveItem 显示另一个视图。

ListView 是“Ext.form.Panel”，它目前有一个工具栏和一个通过 initialize() 函数的字段集，但我想用一些普通的 html 替换字段集，但我不能使用来自 setRecord( ) 以任何方式。

Answer 1

我解决了这个问题。主要问题是我试图显示尚未传递的数据，因为所有这些都在初始化函数中。我也想出了一种通过视口传递数据的方法。

下面是我的函数显示我想将数据传递给的视图现在的样子：

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

这是我在视图中使用数据的方式：

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

Answer 2

我希望我对您的理解正确，但我不太确定这会对您有所帮助。

无论如何，在我的应用程序中，我有一个面板，它通过 setData() 函数从控制器中的侦听器函数 (onListTap) 更新。 这反过来会在面板上/从面板上触发一个updatedata 事件，该事件也在控制器中获取，然后用于更改面板子级。

updatedata 监听器示例：

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

希望这对您有所帮助，如果您需要其他帮助或我误解了您的问题，请与 cmets 一起返回。