Sencha Touch는 동적으로 제목 줄과 목록이있는 작업 표에 라인 랩

Question

의 단추를 추가합니다. 목록이 바인딩 된 저장소 ("ListinoStore")를 필터링하는 데 사용할 일부 단추를 구현합니다. 버튼은 상점의 각 항목에 대해 동적으로 생성됩니다. 항목이 4 개 이상일 수 있으므로 버튼이 1 줄 이상 늘어날 것으로 예상됩니다. 단추는 제목 표시 줄과 목록 사이에 설정된 패널에 추가됩니다. 모든 버튼이 한 줄로 만 표시되고, 뷰포트를 벗어나는 버튼은 숨겨져 있습니다. 두 줄 이상을 자동으로 줄 바꿈 할 수 있습니까? 'hbox'또는 다른 것들을 사용하여 성공적으로 레이아웃을 시도했습니다. 나는 패널과 버튼에서 모두 어떤 레이아웃 설정을 제거 docked: 'top'으로 TagsPanel을 config (설정) 경우

// the store 
{ 
    "success":true 
    , "total": 9 
    , "root": [ 
     {"tag" : "white"} 
     , {"tag" : "red"} 
     , {"tag" : "blue"} 
     , {"tag" : "green"} 
     , {"tag" : "orange"} 
     , {"tag" : "purple"} 
     , {"tag" : "yellow"} 
     , {"tag" : "pink"} 
     , {"tag" : "grey"} 
    ] 
} 


var TagsPanel = new Ext.Panel({ 
    items: [ 
     { 
      xtype : 'button' 
      , text: 'All' 
      , ui: 'small' 
      , handler: function() { 
       ListinoStore.clearFilter(); 
      } 
     } 
    ] 
}); 


TagsStore.each(function(record){ 
    TagBtn = new Ext.Button({ 
     text: record.get('tag') 
     , style: 'float: left;' 
     , ui: 'small' 
     , handler: function() { 
      ListinoStore.clearFilter(); 
      ListinoStore.filter(function(item) { 
       return item.get('tag').search(record.get('tag')) > -1; 
      }); 
     } 
    }); 
    TagsPanel.add(TagBtn); 
}); 

var ListinoSheet = new Ext.ActionSheet({ 
       fullscreen: true 
       , layout: 'vbox' 
       , style: 'top:0px' 
       , defaults: { 
        handler: function(btn, evt) { 
         this.parent.hide(); 
        } // handler 
       } // defaults 
       , items: [ 
        { 
         xtype: 'titlebar' 
         , title: 'Le nostre migliori pizze' 
         , ui: 'light' 
        } 
        , TagsPanel 
        , { 
         xtype: 'ListinoList' 
         , flex: 1 
        } 
       ] 
      }); 

UPDATE , 내가 올바른 방법으로 안감 버튼을 얻을 수 있지만, 제목 표시 줄의 상단에 물론 .

Answer 1

해결 방법 제목 표시 줄과 tagspanel을 모두 docked: 'top'으로 구성했습니다.