Question

我创建了一个像这样的视图

Ext.define('App.view.Message', {
    extend: 'Ext.Panel',
    alias: 'widget.message',
    config: {
        layout: 'vbox',
        bigText: 'big Text',
        smallText: 'small text',
        imageUrl: 'imageurl',
        oT: '',
        description: 'message description',

        items: [
            {
            flex: 3,
            xtype: 'container',
            layout: 'hbox',
            items: [
                {
                    xtype: 'container',
                    flex: 1,
                    items: [
                        {
                            html: '<h3>' + this.getBigText() + '</h3>'
                        },
                        {
                            html: '<h5>' + this.getSmallText() + '</h5>'
                        }
                    ]
                },
                {
                    xtype: 'image',
                    src: this.getImageUrl(),
                    flex: 1
                }
            ]
        },
            {
            flex: 6,
            xtype: 'container',
            layout: 'vbox',
            items: [
                {
                    flex:1,
                    html: '<h3>' + this.getBigText() + '</h3>'
                },
                {
                    flex:5,
                    html: '<p>'+this.getDescription()+'</p>'
                }
            ]
        },
            {
            flex: 1,
            xtype: 'button',
            text: this.getOT()
        }
        ]
    }
})

我需要在创建视图时访问在创建此视图时传递的值（配置值）声明this.getDescription()，this.getBigText()等等正在产生错误.. 我想要的是视图应该使用我传递的配置值来渲染，当我创建视图时..
我该怎么办？

Answer 1

看起来你必须覆盖构造函数并获取配置值：

Ext.define('App.view.Message', {
extend: 'Ext.Panel',
alias: 'widget.message',

config: {
    layout: 'vbox',
    bigText: 'big Text',
    smallText: 'small text',
    imageUrl: 'imageurl',
    oT: '',
    description: 'message description'
},

constructor: function(config)
{
    config.items = [
        {
            flex: 3,
            xtype: 'container',
            layout: 'hbox',
            items: [
                {
                    xtype: 'container',
                    flex: 1,
                    items: [
                        {
                            html: '<h3>' + config.bigText + '</h3>'
                        },
                        {
                            html: '<h5>' + config.smallText + '</h5>'
                        }
                    ]
                },
                {
                    xtype: 'image',
                    src: config.imageUrl,
                    flex: 1
                }
            ]
        },
        {
            flex: 6,
            xtype: 'container',
            layout: 'vbox',
            items: [
                {
                    flex:1,
                    html: '<h3>' + config.bigText + '</h3>'
                },
                {
                    flex:5,
                    html: '<p>'+config.description+'</p>'
                }
            ]
        },
        {
            flex: 1,
            xtype: 'button',
            text: config.oT
        }
    ];

    this.callParent(arguments);
}

}）;

Answer 2

Sencha Touch 2不会自动为您的配置生成getter和setter。但是，有两种方法可以满足您的需求：

Get＆amp;直接通过Ext.getCmp('your_component_id').config.bigText设置配置值（类似于其他配置）
手动创建getter＆amp;例如，您的自定义配置的setter，您必须将此类内容定义为视图组件的配置：

getBigText: function(){return this.bigText;}

setBigText: function(value) {this.bigText = value;}

希望这有帮助。

Answer 3

当您定义并加载“查看”文件时 - 浏览器会遍历每一行。此时未创建“视图”实例。所以，当然在那里找不到这个。

但是，您可以在初始化功能中使用“this”。所以，你可以像这样写代码：

Ext.define('App.view.Message', {
    extend: 'Ext.Panel',
    xtype: 'message',
    config: {
        layout: 'vbox',
        bigText: 'big Text',
        smallText: 'small text',
        imageUrl: 'imageurl',
        oT: '',
        description: 'message description'
    },

initialize : function(){
     this.add([
            {
            flex: 3,
            xtype: 'container',
            layout: 'hbox',
            items: [
                {
                    xtype: 'container',
                    flex: 1,
                    items: [
                        {
                            html: '<h3>' + this.bigText + '</h3>'
                        },
                        {
                            html: '<h5>' + this.smallText + '</h5>'
                        }
                    ]
                },
                {
                    xtype: 'image',
                    src: this.imageUrl,
                    flex: 1
                }
            ]
        },
            {
            flex: 6,
            xtype: 'container',
            layout: 'vbox',
            items: [
                {
                    flex:1,
                    html: '<h3>' + this.bigText + '</h3>'
                },
                {
                    flex:5,
                    html: '<p>'+ this.description +'</p>'
                }
            ]
        },
            {
            flex: 1,
            xtype: 'button',
            text: this.oT
        }
        ]);

        this.callParent(arguments);
}
});

Answer 4

为此，我建议您在初始化函数中将项目添加到视图中，如下所示：

  ...
  config:{
  ...
  },
  initialize: function(){
    var me = this;
    me.callParent();

    var container = Ext.create('Ext.Container',{
      title = this.config.bigText
    });

    me.add(container);
  }
  ...

我不知道是否有最佳解决方案，但这有效。

Answer 5

一个简单的解决方案是在initialize（）函数中执行此操作，例如

this.config.title = 'my title';
this.config.iconCls = 'info';
this.callParent();

sencha touch 2 ..在创建视图时访问配置值

5 个答案: