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',

        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()正在产生错误..我想要的是视图应该用我传递的配置值呈现，当我创建视图时..
我该怎么办？

4

5 回答 5

4

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

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

});

于 2012-11-13T15:54:15.163 回答
2

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

  • 直接通过获取和设置配置值Ext.getCmp('your_component_id').config.bigText（类似于其他配置）

  • 为您的自定义配置手动创建 getter 和 setter，例如，您必须将类似这样的内容定义为视图组件的配置：

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

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

希望这可以帮助。

于 2012-06-01T02:57:03.143 回答
1

当您定义并加载“视图”文件时 - 浏览器会遍历每一行。当时没有创建“视图”实例。所以，这里自然找不到this 。

但是，您可以在初始化函数中使用“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);
}
});
于 2012-06-01T08:39:14.200 回答
0

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

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

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

    me.add(container);
  }
  ...

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

于 2012-05-31T20:28:14.753 回答
0

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

this.config.title = 'my title';
this.config.iconCls = 'info';
this.callParent();
于 2014-01-08T01:03:20.387 回答