ExtJS 5 - 상점에서 스플릿 버튼 메뉴에 항목을 동적으로 추가합니다.

Question

스토어를 스플릿 버튼 메뉴에 연결하려고합니다. 나는 extjs 버전 5를 사용하고있다. 나는 웹에서 검색을했고 심지어 sencha 문서를 훑어 보았지만 이것을 달성 할 수있는 방법을 찾지 못했다.

현재 변수의 메뉴 세부 사항을 잡고 splitbutton xtyoe 메뉴 속성에 지정하고 있습니다. 상점을 사용하여 동일한 목표를 달성하고 싶습니다. 도움을 많이 받으실 수 있습니다!

프로그램 코드 : - 사전에

 var menuJSON = [{ 
      text:'Menu1', 
      menu:[{text:'Submenu1'},{text:'Submenu2'}] 
     },{ 
      text:'Menu2', 
      menu:[{text:'Submenu1'},{text:'Submenu2'}] 
     },{ 
      text:'Menu3', 
      menu:[{text:'Submenu1'},{text:'Submenu2'}] 
     },{ 
      text:'Menu4' 
     },{ 
      text:'Menu5', 
      menu:[{text:'Submenu1'},{text:'Submenu2'}] 
     }]; 
     { 
     region: 'south', 
     fbar: [{ 
      xtype:'splitbutton', 
      id: 'app-starterMenu', 
      text:'Start', 
      scale:'small', 
      iconCls:'icon-start', 
      menuAlign: 'bl-tl', 
      menu: menuJSON 
     }] 
     } 

감사합니다!

Answer 1

스토어 또는 상대 컨트롤러에 예제 코드를 제공 할 수 있다면 도움이되지만 생각보다 쉽습니다. 물론, 그것은 상자에서 나오는 것은 아니지만 청취자를 사용하는 완벽한 경우입니다.

스토어에서 데이터가 변경 될 때마다 버튼 구성을 업데이트하려고합니다. 따라서 관련 리스너를 상점에 추가하십시오 (특정 사용 사례에 따라 새로 고침 또는 업데이트 이벤트 사용). 그런 다음 저장소 데이터가 변경 될 때마다 단추 (또는 관련 메뉴)에 대한 참조를 가져 와서 항목을 업데이트해야합니다. 가장 단순한 형식의 예는 다음과 같습니다.

store: { 
    listeners: { 
     refresh: function(store) { 
      // Get all the raw data from records and use it to set items on the menu 
      var rawData = Ext.Array.pluck(store.getRange(),'data'); 
      Ext.getCmp('app-starterMenu').setMenu({ 
       items: rawData 
      }); 
      // *OR* Loop through the store data conditionally and include what you need 
      Ext.getCmp('app-starterMenu').getMenu().removeAll(); 
      store.each(function(record){ 
       Ext.getCmp('app-starterMenu').getMenu().add(record.getData()); 
      }); 
     } 
    } 
}