Extjs Sencha Touch 2.3:将数据从列表视图推送到详细视图
因此,我制作了一个简单的列表组件视图。当我点击列表的“披露”按钮时,我有一个控制器,它将创建一个详细视图,该视图还将有关该列表的数据推送到详细视图中,以便在tpl属性中使用 这是我的密码: app/view/Main:Extjs Sencha Touch 2.3:将数据从列表视图推送到详细视图,extjs,sencha-touch,sencha-touch-2.2,sencha-touch-2.3,Extjs,Sencha Touch,Sencha Touch 2.2,Sencha Touch 2.3,因此,我制作了一个简单的列表组件视图。当我点击列表的“披露”按钮时,我有一个控制器,它将创建一个详细视图,该视图还将有关该列表的数据推送到详细视图中,以便在tpl属性中使用 这是我的密码: app/view/Main: Ext.define ('Prac.view.Main', { extend: 'Ext.Panel', xtype: 'mainpanel', requires: ['Prac.store.Names'], config:{ layout: 'vbox',
Ext.define ('Prac.view.Main', {
extend: 'Ext.Panel',
xtype: 'mainpanel',
requires: ['Prac.store.Names'],
config:{
layout: 'vbox',
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'Mainpanel',
items: [
{
xtype: 'button',
ui: 'confirm',
iconCls: 'add',
action: 'addName',
align: 'right'
}
]
},
{
xtype: 'list',
flex: 1,
grouped: true,
indexBar: true,
itemTpl: '{firstName} {lastName}',
store: 'Names',
onItemDisclosure: true,
}
]
}
}))
应用程序/控制器/主:
Ext.define ('Prac.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
view: 'viewpanel',
det: 'detail'
},
control: {
'list' : {
disclose: 'showDetail'
}
}
},
showDetail: function(list, record) {
var det = Ext.create('Prac.view.Detail', {
data: record.data
});
Ext.Viewport.setActiveItem(det);
}
}))
应用程序/视图/详细信息:
Ext.define('Prac.view.Detail', {
extend: 'Ext.Panel',
xtype: 'detail',
config: {
items: [
{
xtype: 'titlebar',
title: 'Detail View',
docked: 'top'
},
{
xtype: 'panel',
styleHtmlContent: true,
scrollable: 'vertical',
title: 'Details',
//html: 'Hello, World!'
tpl: 'Hello {firstName} {lastName}',
data: null
}
]
}
}))
我认为这个问题可能涉及范围。由于tpl属性嵌套在“items”属性而不是配置中,因此组件无法使用从控制器传递到详细视图的数据。所以我想知道的不仅仅是如何将数据从一个视图推送到另一个视图,而是如何将数据从一个视图推送到另一个视图中的特定组件。你完全正确。您没有设置嵌套面板的数据,而是设置Prac.view.Detail的数据 数据是面板的配置属性。这意味着sencha将为您创建一个
setData()
方法。在内部使用此方法时,将分别调用applyData()
或updateData()
在您的情况下,这应该有效:
Ext.define('Prac.view.Detail', {
extend: 'Ext.Panel',
xtype: 'detail',
config: {
items: [
{
xtype: 'titlebar',
title: 'Detail View',
docked: 'top'
},
{
xtype: 'panel',
styleHtmlContent: true,
scrollable: 'vertical',
title: 'Details',
//html: 'Hello, World!'
tpl: 'Hello {firstName} {lastName}',
data: null
}
]
},
updateData: function ( newData, oldData ) {
var nestedPanel = this.down( 'panel' );
nestedPanel.setData( newData );
},
applyData: function ( newData, oldData ) {
var nestedPanel = this.down( 'panel' );
nestedPanel.setData( newData );
}
});
因此,当设置Prac.view.Detail的数据时,将调用applyData
方法,它会抓住嵌套面板来设置其数据。Great,this.down()方法似乎是指操纵DOM。