내선 JS - 나는 내선 JS 그리드 구성 요소를 사용하고

Question

콤보 박스의 "목록"여러 값을 가진 셀, 나는 (자신의 데이터 유형에 따라) 다음 필드를 가지고 :

ID (int) 
Name (string) 
Foods (List<string>) 

정의 된 바와 같이 사용자 당 여러 개의 Food가있을 수 있으며 각 Food는 기존 Food DataStore에서 선택됩니다. 셀에 음식 목록을 표시하는 것은 쉽습니다. 난 그냥 사용자 정의 렌더러를 사용합니다. 잠재적으로 복잡한 부분은 그 음식을 편집하는 것입니다.

사용자가 식품 셀을 편집 할 때마다 Food DataStore에서 채워진 각 식품 항목에 대해 콤보 상자를 표시하고 싶습니다. 또한 사용자가 식품 항목을 추가/삭제할 수 있어야합니다. 즉, 어떤 종류의 작은 형태가 필요할 것입니다.

아무에게도이 작업을 수행하는 가장 좋은 방법을 말할 수 있습니까? Ext JS에 관한 문서를 잘 읽었지만 (아마도 충분하지는 않지만) 좋은 해결책을 찾지 못했습니다. 나는 아직도 상당히 새로운 사람이다.

도움/제안 사항을 보내 주시면 감사하겠습니다.

감사합니다,

비제이

Answer 1

내 제안 그리드에서 기능을 편집 받아 데이터를 표시 만을 사용하는 것입니다. rowclick 또는 rowdblclick 이벤트가 발생한 후 표시되는 Ext.msg 팝업을 사용하여 쉽게 수정할 수 있습니다. Ext.msg 안에 일부 html 태그를 사용할 수 있습니다.

this link을 따라 가면 cellclick 이벤트를 캡처하는 방법을 알 수 있습니다.

Answer 2

나는 비슷한 것을했지만 항목을 추가/삭제할 수는 없었다.

그리드에서 문제의 열에 대한 편집기를 콤보 박스로 설정하고 싶을 것입니다. 나는 당신이 렌더러를 전혀 바꾸지 않아도된다고 생각하지 않는다. 콤보 박스가 그것을 처리해야한다.

xtype: 'grid', 
store: Ext.create('MySite.store.UserStore'), 
columns: [ 
    { header: 'ID', dataIndex: 'id' }, 
    { header: 'Name', dataIndex: 'name' }, 
    { 
     header: 'Foods', dataIndex: 'foods', minWidth: 200, 
     editor: { 
      xtype: 'combobox', 
      store: Ext.create('MySite.store.FoodStore'), 
      valueField: "food", 
      displayField: "food", 
      editable: true, 
      maxHeight: 150, 
      width: 310, 
      multiSelect: true 
     } 
    } 
], 
selType: 'cellmodel', 
plugins: [ 
    Ext.create('Ext.grid.plugin.CellEditing', { 
     clicksToEdit: 1 
    }) 
] 

(난 내 여기 UserStore라고도 함) 목록 필드에 '자동'의 유형을 사용해야합니다 그리드를 채워 가게.

Ext.define('MySite.store.UserStore', { 
    extend: 'Ext.data.Store', 
    storeId: 'UserStore', 
    autoLoad: true, 
    fields: ['id', 'name', { name: 'foods', type: 'auto' }], 
    proxy: { 
     type: 'ajax', 
     url: // your data provider 
     reader: { 
      type: 'json', 
      root: 'items', 
      successProperty: 'success', 
      messageProperty: 'message' 
     } 
    }