将数据从控制器传递到sencha tocuh中的现有视图 [英] pass data from controller to existing view in sencha tocuh
问题描述
我试图将控制器中的数据传递到现有的视图，我已经尝试过以下操作，但是其中没有工作，我想传递一个数据，以便我可以在现有的面板上显示。
从控制器
1。 Ext.Viewport.setActiveItem（ profileinfo）;
Ext.Viewport.setData（record.data）;
2. Ext.Viewport.setActiveItem（'profileinfo'）。setData（record.data）;
3. Ext.Viewport.setActiveItem（'profileinfo'，{data：record.data}）;
4. Ext.Viewport.setActiveItem（{xtype：'profileinfo'，data：record.data}）;
其中 profileinfo 是有一个标题栏，我将标题显示为 {member_data} 这是数据的一部分
loadList：function（me，index，target，record，e，eOpts）{
console.log（record.data.member_name）;
Ext.Viewport.setActiveItem（{
xtype：'profileinfo'，
data：record.data}
）;
}
我可以看到我的 profileinfo 面板的初始化功能数据可用
，但我无法使用 {member_name}
initialize：function（）{
this.callParent（）;
console.log（initialized）;
console.log（this.config.data）; //能看到数据
}
但是数据没有反映在面板中
{
xtype：'titlebar'，
title：'{member_name}'//它显示{member_name}文本而不是数据本身
}
更新
这里是 profileinfo 代码
Ext.define（'demo.view.ProfileInfo'，{
extends：'Ext.form.Panel'，
xtype： 'profileinfo'，
需要：['Ext.TitleBar'，'demo.view.ProfileMemberInfo']，
config：{
layout：'vbox' ，
项目：[
{
xtype：'titlebar'，
标题：'demo'，
cls ：'bms-bg-head'，
height：'65px'，
center：true，
html：'< div class =demo-mini-logo>< / div>'
}，{
xtype：'label'，
//这里没有可见
html：'{member_name}'
}]
} ，
initialize：function（）{
this.callParent（）;
//记录是可见的
console.log（this.config.record）;
}
}）;
这里是控制器代码
loadList：function（me，index，target，record，e，eOpts）{
Ext.Viewport.setActiveItem（{
xtype：'profileinfo'，
record：record
}
）;
}
你说你在面板的初始化方法中获取数据，所以你可以这样做
initialize：function（）{
this.callParent（）;
console.log（initialized）;
var data = this.config.data;
this.down（'titlebar'）。setTitle（data.member_data）;
}
根据您的意见，您可以将数据设置为 setRecord 。
更新
有一个对formPanel的引用在您的控制器中
config：{
refs：{
Profileinfo：'profileinfo'
}
}
在ProfileInfo视图中 strong>
对于选择标签，我建议您将itemId标记为这样
{
xtype：'label'，
itemId：'member'
}
在您的控制器loadList函数
如果在formpanel中有字段（textfield，selectfield等），可以使用 setValues（）来设置数据，如下所述。
但是标签不是字段，所以你必须选择它，然后使用 setHtml（）设置数据
loadList：function（me，index，target，record，e，eOpts）{
Ext.Viewport.setActiveItem（{xtype：'profileinfo'}）;
this.getProfileinfo（）。setValues（record.getData（））;
//当你发布在你的问题中，我假设成员标签是Profileinfo
的子元素this.getProfileinfo（）。getComponent（'member'）。setHtml（record.getData（） .member_name）
}
最重要的
记录中的属性或字段应该匹配frompanel中的字段名称，然后只匹配 setValues（）工作。
示例
如果你有这样的领域，那么你可以在$ p
$ b pre $ {
xtype：'textfield'，
label ：'名字'，
名称：'名字'
}
record.getData（）应该有名称属性。
< hr>
使用tpl 设置面板中的数据更新
让我们说你有面板
Ext.define（'MailApp.view.MessageDetails'，{
extend：'Ext.Panel'，
xtype：'messageDetails'，
config：{
items：[{
xtype：'titlebar'，
docked ：'top'，
itemId：'detailsTitle'
}，
{
xtype：'panel'，
itemId：'details'，
tpl ：new Ext.Template（
'< div class =details>'，
'< p> From：{from}< / p>'，
' ; p>主题：{subject}< / p>'，
'< p>消息：{message}< / p>'，
< / div>'
）
}]
}
}）;
您的控制器loadList函数
loadList：function（me，index，target，record，e，eOpts）{
var data = record.getData（）;
Ext.Viewport.setActiveItem（{xtype：'messageDetails'}）;
//不要忘记放弃工作this.getMessageDetails（）
this.getMessageDetails（）。getComponent（'details'）。setData（data）;
this.getMessageDetails（）。getComponent（'detailsTitle'）。setHtml（data.detailsTitle）
}
当您打印console.log（record.data（））时，您应该有
苹果，主题：欢迎，消息：苹果欢迎你来邮件应用，细节标题：邮件去除，id：ext-record -1，xindex：1}
我的意思是属性应该匹配tpl中的字段。 >
这是您可以使用tpl在面板的自定义HTML中设置数据。
i am trying to pass a data from controller to existing view , i have tried following but non of them are working , i want to pass a data so that i can show it over an existing panel.
from controller
1. Ext.Viewport.setActiveItem('profileinfo');
Ext.Viewport.setData(record.data);
2. Ext.Viewport.setActiveItem('profileinfo').setData(record.data);
3. Ext.Viewport.setActiveItem('profileinfo', {data:record.data});
4. Ext.Viewport.setActiveItem({ xtype:'profileinfo', data:record.data});
where profileinfo is the panel where there is a titlebar and i am displaying title as {member_data} which is part of data
loadList:function(me, index, target, record, e, eOpts){
console.log(record.data.member_name);
Ext.Viewport.setActiveItem({
xtype:'profileinfo',
data:record.data}
);
}
i can see in my profileinfo panel's initialize function that data is available
but i am not be able to access it using {member_name}
initialize: function(){
this.callParent();
console.log("initialized");
console.log(this.config.data); // able to see the data
}
but data is not reflected in panel
{
xtype:'titlebar',
title:'{member_name}' // its displaying {member_name} text rather then data itself
}
update
here is the profileinfo code
Ext.define('demo.view.ProfileInfo', {
extend: 'Ext.form.Panel',
xtype: 'profileinfo',
requires: [ 'Ext.TitleBar','demo.view.ProfileMemberInfo'],
config: {
layout:'vbox',
items: [
{
xtype: 'titlebar',
title: 'demo',
cls: 'bms-bg-head',
height:'65px',
center:true,
html:'<div class="demo-mini-logo"></div>'
},{
xtype:'label',
// nothing is visible here
html:'{member_name}'
}]
},
initialize: function(){
this.callParent();
// record is visible
console.log(this.config.record);
}
});
here is controller code
loadList:function(me, index, target, record, e, eOpts){
Ext.Viewport.setActiveItem({
xtype:'profileinfo',
record:record
}
);
}
You said your getting data in panel's initialize method, So you can do this
initialize: function(){
this.callParent();
console.log("initialized");
var data = this.config.data;
this.down('titlebar').setTitle(data.member_data);
}
Based on your comments, You can set data to the panel you setRecord.
Update
Have a reference to the formPanel in your controller
config : {
refs : {
Profileinfo: 'profileinfo'
}
}
In ProfileInfo view
For selecting label i suggest you to give itemId to label like this
{
xtype:'label',
itemId: 'member'
}
In your controller loadList function
If you have fields (textfield, selectfield, etc) inside formpanel,you can use setValues() for setting data as i done below.
But label is not a field so, you have to select it and then use setHtml() to set data
loadList:function(me, index, target, record, e, eOpts){
Ext.Viewport.setActiveItem({ xtype:'profileinfo'});
this.getProfileinfo().setValues(record.getData());
//As you posted in your question, I am assuming member label is child of Profileinfo
this.getProfileinfo().getComponent('member').setHtml(record.getData().member_name)
}
Most important
Properties or fields in the record should match name of the fields in the frompanel, Then only setValues() works.
Example
If you have field like this in frompanel
{
xtype: 'textfield',
label: 'First Name',
name: 'Firstname'
}
record.getData() should have Firstname property in it.
Update for setting data in panel with tpl
Lets say you have panel like this
Ext.define('MailApp.view.MessageDetails', {
extend: 'Ext.Panel',
xtype: 'messageDetails',
config: {
items : [{
xtype: 'titlebar',
docked: 'top',
itemId: 'detailsTitle'
},
{
xtype : 'panel',
itemId : 'details',
tpl : new Ext.Template(
'<div class="details">',
'<p>From : {from}</p>',
'<p>Subject : {subject}</p>',
'<p>Message : {message}</p>',
</div>'
)
}]
}
});
In your controller loadList function
loadList:function(me, index, target, record, e, eOpts){
var data = record.getData();
Ext.Viewport.setActiveItem({ xtype:'messageDetails'});
// Don't forget to put refference to work this.getMessageDetails()
this.getMessageDetails().getComponent('details').setData(data);
this.getMessageDetails().getComponent('detailsTitle').setHtml(data.detailsTitle)
}
When you print console.log(record.data()) you should have
Object {from: "Apple", subject: "welcome", message: "Apple welcomes you to mail app", detailsTitle: " Mail Deatils", id: "ext-record-1", xindex: 1}
I mean properties should match fields in the tpl.
This is what you can do to set data in panel's custom HTML using tpl.
这篇关于将数据从控制器传递到sencha tocuh中的现有视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
