extjs динамическое число столбцов

Question

Я ищу способ иметь динамическое число столбцов поля в форме Extjs.

В основном форма должна выглядеть следующим образом (2 колонки):

Но когда пользователь сжимает ширину браузера, он должен изменить в этом (1 колонка):

Есть ли способ сделай это?

Answer 1

Возможно, вы захотите сыграть с разными макетами. Сначала подумайте, что я попытаюсь установить привязку формы к привязке и указать фиксированную ширину для всех элементов.

Answer 2

Это определенно возможно. Вам просто нужно использовать немного CSS, чтобы заставить все работать. Я применил свой CSS непосредственно в моей конфигурации формы, но вы могли бы просто поместить его в свой собственный файл CSS.

Ext.create('Ext.form.Panel', { 
     renderTo: Ext.getBody(), 
     layout: 'auto', 
     defaults: { 
      xtype: 'textfield', 
      style: { 
       float: 'left', 
       width: 200 
      } 
     }, 
     items: [ 
      { fieldLabel: 'Field 1' }, 
      { fieldLabel: 'Field 2' }, 
      { fieldLabel: 'Field 3' }, 
      { fieldLabel: 'Field 4' }, 
      { fieldLabel: 'Field 5' }, 
      { fieldLabel: 'Field 6' } 
     ] 
    });

Как изменить размер браузере, где два столбца не будет соответствовать, вы должны увидеть две колонки автоматически завернуть в одну колонку.

Я сделал пример для вас, чтобы посмотреть здесь: http://jsfiddle.net/Asuza/n7Zsj/

Когда вы открываете его, вы должны увидеть две колонки полей. Измените ширину тела CSS на 300 пикселей и запустите скрипт, и теперь количество столбцов должно быть единым. Это должно быть эквивалентно изменению размера браузера вручную.

Answer 3

Пожалуйста, используйте раскладку столбцов.

{ 
    xtype:'container' 
    layout:'fit', 
    items:{ 
     xtype:'form', 
     title:'test', 
     layout:'column', 
     items:[...] 
    } 
} 

текстовых полей не установлена ​​ширина