Question

我正在尝试将数据从控制器传递到现有视图，我尝试过以下但是没有它们正在工作，我想传递一个数据，以便我可以在现有面板上显示它。

来自控制器

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是有titlebar的面板，我将title显示为{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小组的initialize函数中看到data可用但我无法使用{member_name}

访问它

initialize: function(){
       this.callParent();

       console.log("initialized");
       console.log(this.config.data); // able to see the data 
    }

但数据未反映在面板中

  {

        xtype:'titlebar',
        title:'{member_name}' // its displaying {member_name} text rather then data itself


    }

更新

这是profileinfo代码

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





    }

});

这是控制器代码

loadList:function(me, index, target, record, e, eOpts){



            Ext.Viewport.setActiveItem({ 
                xtype:'profileinfo', 
                record:record
                }
            );





    }

Answer 1

你说你在面板的initialize方法中获取数据，所以你可以这样做

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视图中

为了选择标签我建议您将itemId标记为像这样

{ 
  xtype:'label',
   itemId: 'member'
}

在您的控制器中加载列表功能

如果你在formpanel中有字段（textfield，selectfield等），你可以使用setValues()设置数据，如下所示。

但标签不是字段，因此您必须选择它然后使用setHtml()来设置数据

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)

}

最重要的

record中的属性或字段应与frompanel中字段的名称相匹配，然后只有setValues()可用。

示例

如果你在frompanel中有这样的字段

{ xtype: 'textfield', label: 'First Name', name: 'Firstname' }

record.getData()应该包含Firstname属性。

使用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 : {subject}</p>', '<p>Message : {message}</p>', </div>' ) }] } });

在您的控制器中加载列表功能

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

打印console.log（record.data（））时应该

Object {from: "Apple", subject: "welcome", message: "Apple welcomes you to mail app", detailsTitle: " Mail Deatils", id: "ext-record-1", xindex: 1}

我的意思是属性应匹配tpl中的字段。

您可以使用tpl在面板的自定义HTML中设置数据。

将数据从控制器传递到sencha touch中的现有视图

1 个答案: