에 extjs 3.4 편집 가능한 그리드 : 열

Question

내가처럼 보이는 뭔가를 만들려고에 displayField 및 ValueField을 분리하는 방법 : http://dev.sencha.com/deploy/ext-3.4.0/examples/grid/edit-grid.html

을하지만 빛의 열을 변경하려면 : 나는 그것이 ID를 포함 할

을 실제 값 대신.

내가 프리젠 테이션에서 별도의 값이 아닌 실제 열 값에 콤보 강제 할 수 있습니다 (사실을 나는)뿐만 아니라 에디터 (열의 ID 값의 매핑을 저장할 위치를 모르는) :

new Ext.grid.EditorGridPanel({ 
    ... 
    store: new Ext.data.Store ({ 
      ... 
      fields: [ 
         'MagicId', 
         ... 
        ] 
     }) 
    columns: [ 
       { 
        header: 'Magic', 
        dataIndex: 'MagicId', 
        editor: new Ext.form.ComboBox({ 
         store: new Ext.data.Store({ 
          ... 
          fields: ['id', 'title']}), 
         valueField: 'id', 
         displayField: 'title', 
         editable: 'false' 
        }) 
       }, 
       ... 
      ] 

콤보 상자에서 "Magic title"을 선택하면 어차피 MagicId를 얻을 수 있습니다. 나는 그것이 어떻게 일어나고 있는지 이해하지만, 그것이 작동하는데 필요한 방식으로 작동하도록 만들 수는 없다 ...

나는 불필요한 코드를 ... 읽는 데 도움이되도록 대체하려고 시도했다.

감사합니다.

Answer 1

그리드/저장소에 ID 필드를 유지 한 다음 "렌더러"속성을 사용하여 다른 것을 표시하십시오.

이

{ 
    header: 'Magic', 
    dataIndex: 'MagicId', 
    renderer: function(value) { 
     return magicIdValueArray[value]; 
    } 
    ... 
} 

편집이 : 이미 콤보 저장소에있는 ID 값의 매핑을 가지고 있기 때문에, 내가 값을 가져 오기 위해 해당 저장소를 사용하는 것이 (가 필요한 ID 텍스트 매핑은 배열이나 객체에 저장 될 수있다 콤보 박스 밖에서 선언되어야 함).

renderer: function(value) { 
    var record = comboStore.findRecord('id', value); 
    return record.title; 
}