1

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

从控制器

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





    }
4

1 回答 1

3

你说你在面板的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'
}

在您的控制器 loadList 函数中

如果您在表单面板中有字段（文本字段、选择字段等），您可以使用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应与来自面板中字段的名称匹配，然后才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 函数中

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 中设置数据的方法。

于 2013-08-03T10:29:17.080 回答