javascript - ExtJS - 从自定义面板读取属性

Question

我正在尝试从我的自定义面板中读取属性，以便将其用于同一面板中的属性项。让我展示我的代码，以便您理解我的意思:

Ext.define('XXX.XXX.XXX.MyPanel', {
extend: 'Ext.panel.Panel',
title: 'My Panel',
autoScroll: true,
isMyProperty: false,
defaults: {
    margin: 4,
    xtype: 'horizontalfieldpanel'
},
items: [
    {
        title: 'SOme title',
        itemId: 'title1',
        items: [
            {
                xtype: 'textfield',
                name: 'name',
                fieldLabel: 'Name',
                allowBlank: !this.isMyProperty
            }, {
                xtype: 'textfield',
                name: 'lastName',
                fieldLabel: 'Last Name',
                allowBlank: !this.isMyProperty
            }, {

如您所见，我有 isMyProperty，我正尝试在 allowBlank 上使用它，但它没有接受它。它采用默认值。

知道我做错了什么吗？

谢谢，

Answer 1

传统的方法是使用'config'子系统。这告诉它向您的类添加一个新的配置选项，该选项还为其生成一个 getter/setter 方法。

在构造面板时可以覆盖配置选项，就像基类中的任何其他配置选项一样。

一个技巧是您的 items 必须在 initComponent 方法中构建，而不是在类定义中构建。我发现在复杂的应用程序中，最好计划重写 initComponent 来创建您的 items，而不是在大多数情况下使用“静态”项目声明。

Ext.define('XXX.XXX.XXX.MyPanel', {
    extend: 'Ext.panel.Panel',
    config: {
        isMyProperty: false
    },
    title: 'My Panel',
    autoScroll: true,
    defaults: {
        margin: 4,
        xtype: 'horizontalfieldpanel'
    },
    initComponent: function() {
        this.items = [{
            title: 'Some title',
            itemId: 'title1',
            items: [{
                xtype: 'textfield',
                name: 'name',
                fieldLabel: 'Name',
                allowBlank: !this.@getIsMyProperty()
            }, {
                xtype: 'textfield',
                name: 'lastName',
                fieldLabel: 'Last Name',
                allowBlank: !this.@getIsMyProperty()
            }, {
                ...
            }]
        }];

        this.callParent(arguments);
    }
});

在构造时覆盖值:

var panel = Ext.create('XXX.XXXX.XXXX.MyPanel', {
 isMyProperty: true 
});