ExtJS: Количество компонентов, которые используются в форме

Question

У меня есть модальная панель и включает в себя несколько полей. Два поля из них внизу формы. Когда пользователь нажимает кнопку, я хотел бы добавить еще один полевой блок чуть ниже последних полей. Поэтому мне нужно знать размер окна и общие компоненты, используемые в наборе полей.

Мой вопрос в том, как мы можем подсчитать компоненты (xtype's) в указанной области? В моем случае - набор полей (когда пользователь нажимает кнопку LEVEL EKLE).

winArticle = new Ext.Window({ 
width: 600, 
modal: true, 
title: 'Artikel Seçimi', 
closeAction: 'hide', 
bodyPadding: 10, 
items: new Ext.Panel({ 
    items: [ 
     { 
      xtype: 'fieldset', 
      title: 'Artikel Sorgulama', 
      defaultType: 'textfield', 
      layout: 'anchor', 
      defaults: { 
       anchor: '100%' 
      }, 
      height: '76px', 
      items: [ 
       { 
        xtype: 'fieldcontainer', 
        layout: 'hbox', 
        defaultType: 'textfield', 
        items: [ 
         { 
          xtype: 'combobox', 
          id: 'articleNo', 
          inputWidth: 320, 
          fieldLabel: 'ARTİKEL NO', 
          fieldStyle: 'height: 26px', 
          margin: '10 15 0 0', 
          triggerAction: 'query', 
          pageSize: true 
         }, 
         { 
          xtype: 'button', 
          text: 'SORGULA', 
          width: 100, 
          scale: 'medium', 
          margin: '8 0 0 0' 
         } 
        ] 
       } 
      ] 
     }, 
     { 
      xtype: 'fieldset', 
      title: 'Artikel Bilgileri', 
      height: '140px', 
      layout: 'fit', 
      items: [ 
       { 
        xtype: 'fieldcontainer', 
        layout: 'hbox', 
        defaultType: 'textfield', 
        fieldDefaults: { 
         labelAlign: 'top' 
        }, 
        items: [ 
         { 
          fieldLabel: 'ARTİKEL TANIMI', 
          name: 'artDesc', 
          flex: 3, 
          margins: '0 5 0 0' 
         }, 
         { 
          fieldLabel: 'PAKET İÇERİĞİ', 
          name: 'artgebi', 
          flex: 1 
         } 
        ] 
       }, 
       { 
        xtype: 'fieldcontainer', 
        layout: 'hbox', 
        defaultType: 'textfield', 
        fieldDefaults: { 
         labelAlign: 'top' 
        }, 
        items: [ 
         { 
          fieldLabel: 'SUBSYS', 
          name: 'artSubsys', 
          flex: 1, 
          margins: '0 5 0 0' 
         }, 
         { 
          fieldLabel: 'VARIANT', 
          name: 'artVariant', 
          flex: 1, 
          margins: '0 5 0 0' 
         }, 
         { 
          fieldLabel: 'VARIANT TANIMI', 
          name: 'artVariantDesc', 
          flex: 2 
         } 
        ] 
       } 
      ] 
     }, 
     { 
      xtype: 'fieldset', 
      title: 'Aksiyon Seviyeleri', 
      id: 'article-fieldset', 
      items: [ 
       { 
        xtype: 'button', 
        text: 'LEVEL EKLE', 
        scale: 'medium', 
        width: 100, 
        style: 'float: right', 
        margin: '0 7 0 0', 
        handler: function() { 
         var count = Ext.query('#article-fieldset'); 
         console.log(count); 
         winArticle.setHeight(500); 
         Ext.getCmp('article-fieldset').add([ 
          { 
           xtype: 'fieldcontainer', 
           layout: 'hbox', 
           defaultType: 'textfield', 
           fieldDefaults: { 
            labelAlign: 'top' 
           }, 
           items: [ 
            { 
             flex: 2, 
             name: 'artLevel2', 
             allowBlank: false, 
             fieldStyle: 'text-align: right; font-size: 13pt; background-color: #EAFFCC;', 
             margins: '0 5 0 0' 
            }, 
            { 
             flex: 2, 
             name: 'artValue2', 
             allowBlank: false, 
             fieldStyle: 'text-align: right; font-size: 13pt; background-color: #EAFFCC;' 
            } 
           ] 
          } 
         ]); 
        } 
       }, 
       { 
        xtype: 'fieldcontainer', 
        layout: 'hbox', 
        id: 'article-level-container', 
        defaultType: 'textfield', 
        fieldDefaults: { 
         labelAlign: 'top' 
        }, 
        items: [ 
         { 
          fieldLabel: 'LEVEL', 
          name: 'artLevel', 
          flex: 2, 
          margins: '0 5 0 0', 
          allowBlank: false, 
          fieldStyle: 'text-align: right; font-size: 13pt; background-color: #EAFFCC;' 
         }, 
         { 
          fieldLabel: 'VALUE', 
          name: 'artValue', 
          flex: 2, 
          allowBlank: false, 
          blankText: 'zorunlu alan, boş bırakılamaz', 
          fieldStyle: 'text-align: right; font-size: 13pt; background-color: #EAFFCC;', 
          listeners: { 
           change: function(textfield, newValue, oldValue) { 
            if(oldValue == 'undefined' || newValue == '') { 
             Ext.getCmp('btnArticleSave').disable(); 
            } else { 
             Ext.getCmp('btnArticleSave').enable(); 
            } 
           } 
          } 
         } 
        ] 
       } 
      ] 
     } 
    ] 
}), 
buttons: [ 
    { 
     text: 'KAPAT', 
     scale: 'medium', 
     width: 100, 
     cls: 'btn-article-close', 
     listeners: { 
      click: function() { 
       winArticle.close(); 
      } 
     } 
    }, 
    '->', 
    { 
     text: 'EKLE', 
     scale: 'medium', 
     disabled: true, 
     width: 100, 
     margin: '0 9 0 0', 
     cls: 'btn-article-save', 
     id: 'btnArticleSave' 
    } 
] 

});

Answer 1

Да, вы можете подсчитать поля в поле fieldset.give fieldset id или itemId и получить объект этого.

winArticle.down('fieldset[id=yourfieldsetid]').items.items.length

этот код даст вам общее количество полей в FIELDSET.

Answer 2

Почему вы выбираете такой сложный способ? Почему бы вам просто не использовать методы Window.add() и Window.insert()?

Используя метод Window.add(), вы можете добавить компонент во время выполнения. Этот метод добавит ваш компонент/поле в конец. Если вы хотите вставить в определенном положении, используйте Window.insert() => Actually this method is AbstractContainer's insert method. См. Ссылки выше.