extjs - 无法布局复合字段项

问题描述

我使用的是 Ext JS 3.4，在复合字段中，有三个字段，代码如下：

            xtype: 'compositefield',
            name: 'comboField',
            fieldLabel: 'Partner with',
            width: 400,
            cItems:[{
              xtype: 'combo',
              name: 'partnerTypeCombo',
              value: 'ProviderName',
              mode: 'local',
              store: new Ext.data.ArrayStore({
                  fields: ['id', 'displayValue'],
                  data: [
                    ['ProviderName', 'Provider Partner Name'],
                    ['OtherProvider', 'Other Provider Partner']
                  ]
              }),
              valueField: 'id',
              displayField: 'displayValue',
              listeners: {
                scope: this,
                select: function(combo, record, index) {
                  var providerField = this.formPanel.getForm().findField('comboField_providerPartnerNameField');
                  var otherProviderField = this.formPanel.getForm().findField('comboField_otherProviderPartnerNameField');
                  if (combo.value == "OtherProvider") {
                    providerField.setVisible(false);
                    otherProviderField.setVisible(true);
                  }
                  else {
                    providerField.setVisible(true);
                    otherProviderField.setVisible(false);
                  }
                }
              }
            }, {
                xtype: 'spacer',
                width: 10,
                flex: 0
              }, {
                xtype: 'modellinkfield',
                name: 'providerPartnerNameField',
                modelLevelType: 'Organization',
                modelType: 'Organization',
                pickerReport: {
                    reportName: 'TMS.SupplierVendorOrgPicker',
                    targetLevelType: 'Organization'
                }
            }, {
                xtype: 'textfield',
                name: 'otherProviderPartnerNameField',
                hidden: true
            }]

通过使用上面的代码并且不隐藏任何字段，我得到了以下结果

但我的期望是

默认情况下，应隐藏第三个字段（即文本字段）
在选择组合框值时，接下来的两个字段应该是可见/隐藏的。就像如果下拉字段值是“提供商合作伙伴名称”，那么只有第二个字段（建模字段）应该是可见的（如下所示）

如果下拉字段值为“Other Provider Name”，那么只有第三个字段（即文本字段）应该是可见的。但我无法实现这第三个目标。我为此得到以下输出（该字段被覆盖）

我期待以下输出。

看起来这可能是一些布局问题，或者我可能需要应用一些 CSS 样式来处理这个问题。有人可以帮我解决这个问题。

标签： extjs

extjs - 无法布局复合字段项

问题描述

解决方案

推荐阅读