는 ExtJS로는 컨테이너에 여러 콤보 상자를 포장

Question

나는 각과 함께이를 표시 할 공간이 부족한 경우 내가 아래 포장 콤보 박스를 싶습니다 서로

함께 표시 유체 레이아웃 콤보 상자의 번호를 가지고 다른. https://fiddle.sencha.com/#view/editor&fiddle/1mn1

항목은 레이아웃 hbox에있는 컨테이너에 제대로 정렬하지만 넘쳐 더 포장이 발생 될 것 같다 - 여기

내가 지금까지 무엇을의 바이올린입니다.

Ext.create('Ext.panel.Panel', { 
title: 'Combo boxes', 
width: '100%', 
layout: 'vbox', 
items: [{ 
    xtype: 'container', 
    layout: 'hbox', 
    items: [{      
     xtype:'combo', 
     store: states, 
     displayField: 'name', 
     valueField: 'abbr'    
    }, 
    {      
     xtype:'combo', 
     store: states, 
     displayField: 'name', 
     valueField: 'abbr'    
    }, 
    {      
     xtype:'combo', 
     store: states, 
     displayField: 'name', 
     valueField: 'abbr'    
    }, 
    {      
     xtype:'combo', 
     store: states, 
     displayField: 'name', 
     valueField: 'abbr'    
    }] 
}],   
renderTo: Ext.getBody() 

});

어떻게 필요에 따라 콤보 상자를 줄 바꿈 할 수 있습니까?

Answer 1

// The data store containing the list of states 
var states = Ext.create('Ext.data.Store', { 
    fields: ['abbr', 'name'], 
    data: [{ 
      "abbr": "AL", 
      "name": "Alabama" 
     }, { 
      "abbr": "AK", 
      "name": "Alaska" 
     }, { 
      "abbr": "AZ", 
      "name": "Arizona" 
     } 
     //... 
    ] 
}); 
Ext.create({ 
    xtype: 'viewport', 
    renderTo: Ext.getBody(), 
    items: [ 
     Ext.create('Ext.panel.Panel', { 
      title: 'Combo boxes', 
      style: 'display: flex;', 
      defaults: { 
       style: 'float:left;' 
      }, 
      items: [{ 
       xtype: 'combo', 
       store: states, 
       displayField: 'name', 
       valueField: 'abbr' 
      }, { 
       xtype: 'combo', 
       store: states, 
       displayField: 'name', 
       valueField: 'abbr' 
      }, { 
       xtype: 'combo', 
       store: states, 
       displayField: 'name', 
       valueField: 'abbr' 
      }, { 
       xtype: 'combo', 
       store: states, 
       displayField: 'name', 
       valueField: 'abbr' 
      }] 
     }) 
    ] 
}); 

Here은 작동하는 피들입니다.

스타일이 패널에 적용되면 모든 구성 요소는 패널의 defaults 속성에 따라 style:'float:left;'을 얻습니다.이 속성은 모든 항목에 객체의 속성을 설정합니다.

패널은 너비가 변경되면 항상 줄 바꿈을 적용합니다. 필자는 문제없이 크기를 조정할 수 있음을 보여주기 위해 바이올린을 업데이트했습니다.