Ext JS ComboBox : BoundList 드롭 다운의 상단에있는 항목을 수정하는 방법

ComboBox를 사용하여 월별 판매량이 차트에 표시되도록 제품을 필터링하고 있습니다.Ext JS ComboBox : BoundList 드롭 다운의 상단에있는 항목을 수정하는 방법

Category: All (3) 
|-- Books 
| \-- All (2) 
| \-- Fiction 
|  | 
|  |-- All (354) 
|  |-- Of Mice And Men 
|  |-- Infinite Jest 
|  |-- (...) 
| \-- Non-fiction 
|  | 
|  |-- All (17) 
|  |-- Surely You're Joking, Mr. Feynman 
|  |-- Freakonomics 
|  |-- (...) 
| 
| 
|-- Video Games 
| |-- All (2) 
| |-- Strategy 
| \-- Sports 
|  | 
|  |-- All (3) 
|  |-- Soccer 
|  |-- Basketball 
|  |-- Boxing 
| 
| 
|-- Etc

나는 값을 추가 각 제품 하위 범주의 확인하기 위해 콤보 상자의 expand 이벤트에 콤보 상자의 가게에 '모든 (X)를'폴더 구조로 배열하면 주식은 다음과 같을 것 선택 가능, 여기서 x은 하위 카테고리의 항목 수입니다. 'All (x)'은 인덱스 0에 삽입됩니다. collapse의 ComboBox에서 'All (x)'항목이 제거됩니다.

지금까지 그렇게 좋았습니다. 사용자가 차트를 필터링하려는 항목의 시작 부분을 입력 할 때 문제가 발생합니다. 입력하기 전에

:http://i.imgur.com/hV4C0YG.png

입력 한 후 : 나는 그것을 아래로 콤보 상자의 상단에 '' '끈적 끈적한'모든 (x)의 분류가되지 않습니다 할 수 있도록 방법을 찾을 수 없습니다을 http://i.imgur.com/YebYWms.png

인덱스 0이 아닌 경우 ComboBox의 저장소에서 'All (x)'옵션을 제거하고 추가하려면 ComboBox의 change 이벤트를 이미 추가하려고 시도했지만이 경우 드롭 다운이 축소됩니다 드롭 다운 화살표를 마우스로 클릭하지 않으면 확장되지 않습니다. 누군가가 올바른 방향으로 모든 (X) '의 가기'에서 '끈적 끈적한'날 지점 수 있다면 정말 감사하게 될 거라고

{ 
    extend: 'Ext.form.field.ComboBox', 
    queryMode: 'local', 
    displayField: 'itemName', 
    valueField: 'SKU', 
    autoSelect: true, 
    typeAhead: true, 
    listConfig: { 
     listeners: { 
     refresh: function(picker) { 
      store = picker.getStore(); 
      // check that the 'All' item is in the store 
      if (store.indexOfId('All') > 0) { 
       // remove the 'All' entry from the store 
       store.remove(store.getById('All')); 
       // add it back in 
       store.insert(0, {SKU: 'All', itemName: 'All' 
           // etc 
        }); 
      } 
     } 
     } 
    }, 

    ... 

}

: 동일은 해당 BoundList refresh 이벤트 리스너를 추가 간다 그 목록.

출처

2014-10-13 Angie Merryweather