Extjs如何在item中使用config属性

6kkfgxo0  于 2023-05-17  发布在  其他
关注(0)|答案(2)|浏览(210)

我有这个

Ext.define('MyComp', {
    extend: 'Ext.container.Container',

    id: 'myid',
    alias: 'widget.myid',
    xtype: 'myid',

    layout: {
        type: 'hbox'
    },

    config: {
        mydata: 'Hi there!!!'
    },

    items: [
        {
            xtype: 'textfield',
            name: 'name',
            fieldLabel: **this.config.mydata**, // this is what I need to do
            labelWidth: 100,
            labelAlign: 'right'
        },
        {
            xtype: 'button',
            text: 'Go',
        }
    ],

    constructor: function () {
        this.callParent(arguments);
    },

    initComponent: function () {
        this.callParent(arguments);
    }
});

如何使用config.mydata文本作为字段标签?我尝试了this.getView().config.mydata和一种组合,但没有成功。我怎样才能实现这个目标?

1qczuiv0

1qczuiv01#

您无法读取容器的配置,因为容器未呈现,并且由于config.mydata无法在其任何子组件中访问。
现在我提出三种方法来实现这一点:
参考此链接为小提琴#1,#2。
1-需要在渲染子组件后分配此标签(如fiddle中的方式1所示),如下所示:

listeners:{
              //Way 1
              render:function(labelCmp){
                 var config=Ext.getCmp('parentPanel').config; //Get parent cmp
                 labelCmp.setText(config.mydata); // Assign label from parent cmp
              }
           }

2-渲染父项沿着子项后,分配标签(如fiddle中的方式2所示),如下所示:

listeners: {
             //Way 2
             boxready: function () {
                var config = this.config; //Get parent config
                Ext.getCmp('labelCmp').setText(config.mydata); //Assign label to child cmp
             }
          }

3-使用Ext.apply方法。它的参考已经在你的question's answer之一给出。
您可以使用适合您的应用程序的任何一种方式。如果有任何查询,请还原。

zbsbpyhn

zbsbpyhn2#

我的解决方案是通过initComponent或任何设置了config的函数将config变量复制到视图模型数据中。如果配置是从父组件传递的,它会有所帮助。

...
viewModel: {
    data: {
        mydata: 'Hi there!!!'
    }
}
...
initComponent: function () {
    this.getViewModel().set('mydata', 'Hi there!!!');
    this.callParent(arguments);
}
...

相关问题