Ext.grid.Panel.reconfigure 사용은() 플러그인

Question

내가 열 사용자 구성 설정을 가진 extjs라는 그리드 패널을 만드는거야을 RowEditing 그리드를 나누기. Ext.grid.Panel 구성 요소는 정확하게이 목적으로 편리한 reconfigure(store, columns) 메소드를 제공합니다. 완전히 파괴하고 그리드를 다시 만들 필요없이 그리드의 저장/열을 재구성 예상대로

이 방법을 사용할 수 있습니다. 그러나 Ext.grid.plugins.RowEditing 플러그인을 사용하여 인라인 행 편집을 제공하는 경우 그리드가 새 열로 다시 구성된 후에 열의 동기화가 해제됩니다. RowEditing 플러그인이 이미 추가/제거/크기 조정 열을 감시하고 정확하게 그 처리로

이 특히 실망. 나는 ExtJs의 현재 4.1 릴리스에서 이것이 단지 감시라고 의심합니다.

는 내가 원하는 그리드가/파괴 그리드 /보기를 다시하지 않고 새로운 열이 재구성 될 때 RowEditor는 편집자 목록 및 폭을 업데이트하기위한 것입니다.

많이 나는 인라인 편집을 지원 쉽게 다시 구성 할 열 목록의 검색에 혼자가 아니라는 생각이 나타납니다 인터넷 검색 후.

Answer 1

Ext.grid.Panel은 reconfigure() 메서드가 호출 될 때마다 발생하는 '다시 구성'이벤트를 제공합니다. 그러나 현재 ExtJs 4.1 릴리스에서 RowEditing 플러그인은이 이벤트에 연결하지 않습니다!

우리는 우리 자신의 무거운 짐을해야 할 것 같습니다. 최종 솔루션에 도달하는 데 몇 시간이 걸렸지 만 최종 솔루션은 다소 간단합니다.

RowEditing 플러그인은 RowEditor 구성 요소의 인스턴스를 만듭니다 (이 두 인스턴스는 별개의 이름이지만 비슷한 이름이지만 다른 구성 요소로 유지하십시오!). RowEditing 플러그인은 행 편집기 등을 보여줄 때를 알기 위해 필요한 이벤트에 그리드를 연결하는 것입니다. RowEditor는 그리드의 인라인 편집을 위해 행 위에 팝업되는 비주얼 컴포넌트입니다.

은 첫째 나는 다시 구성 아마 행 편집기에게 12 개의 다른 방법을 시도했다. 내부 메서드, init 메서드, 메서드 크기 조정 등을 호출 해 보았습니다. 그런 다음 아키텍처에 대한 좋은 점을 발견했습니다. 필요한 경우 행 편집기와 지연로드를 가져 오는 메소드가있는 RowEditor 인스턴스에 대한 단일 내부 참조가 있습니다. 그게 핵심 이었어!

RowEditing 플러그인을 파괴하지 않고 RowEditor를 삭제할 수 있습니다 (플러그인을 동적으로로드/언로드 할 수 없음). 그런 다음 RowEditor를 다시 만들 수 있습니다.

Ext 그리드 용 편집 플러그인은 각 열에 올바른 편집기 유형을 가져 오거나 설정하는 데 사용되는 getEditor() 및 setEditor()에 대한 각 열에 일부 확장 방법을 추가합니다. 그리드를 다시 구성하면 적용된 확장 메소드가 '사라짐'(해당 메소드가 적용되지 않은 새로운 컬럼이 있음). 따라서 플러그인에서 initFieldAccessors() 메서드를 호출하여 이러한 접근 자 메서드를 다시 적용해야합니다.

/** 
* @event reconfigure 
* Fires after a reconfigure. 
* @param {Ext.grid.Panel} this 
* @param {Ext.data.Store} store The store that was passed to the {@link #method-reconfigure} method 
* @param {Object[]} columns The column configs that were passed to the {@link #method-reconfigure} method 
*/ 
onReconfigure: function (grid, store, columnConfigs) { 
    var columns = grid.headerCt.getGridColumns(), 
     rowEditingPlugin = grid.getPlugin('rowEditor'); 

    // 
    // Re-attached the 'getField' and 'setField' extension methods to each column 
    // 
    rowEditingPlugin.initFieldAccessors(columns); 

    // 
    // Re-create the actual editor (the UI component within the 'RowEditing' plugin itself) 
    // 
    // 1. Destroy and make sure we aren't holding a reference to it. 
    // 
    Ext.destroy(rowEditingPlugin.editor); 
    rowEditingPlugin.editor = null; 
    // 
    // 2. This method has some lazy load logic built into it and will initialize a new row editor. 
    // 
    rowEditingPlugin.getEditor(); 
} 

가 나는 설정 리스너를 사용하여 내 그리드 패널이 부착 :

listeners: { 
    'reconfigure': Ext.bind(this.onReconfigure, this) 
} 

Answer 2

그것은이 문제가 이후 수정되었습니다 나타납니다 여기에

그리드 패널의 재구성 이벤트에 대한 내 핸들러 최신 ExtJS 버전 - 버전 4.1.1a는 Ben Swayne의 구현과 유사한 기능을 최소한 통합합니다.