Ext-js grid combol

From JCFWiKi

[편집] Grid에서 콤보처리

그리드에서 일반적인 텍스트 입력이 아닌 콤보처리시 선택후 화면 display value가 보여지지 않고 코드값이 보여지므로 이에 대한 처리법을 다루도록 한다.

• 이 콤보처리에서의 문제점
  • 현재는 콤보값 렌더링 부분이 IE에서만 동작하고 있으므로 주의하도록 한다.

[편집] 콤보 선언

var statusCombo = new Ext.form.ComboBox({
			    store: cbStore,
			    valueField: 'abbr',
			    displayField:'state',
			    typeAhead: true,
			    editable: true,
			    mode: 'local',
			    triggerAction: 'all',
			    lazyRender:true,
               		    listClass: 'x-combo-list-small',
			    emptyText:'Select a state...',
			    selectOnFocus:true
 }); 

[편집] 그리드에 콤보 넣기

이 콤보컨트롤을 그리드에 추가해야 하므로,

ColumnModel 선언시 넣도록 한다.
var cm = new Ext.grid.ColumnModel([
    	checkColumn,
    	{
          header: "요청/장애#",  // 헤더 타이틀
           dataIndex: 'id',   // 매핑되는 컬럼명
           align: 'center'
        },{
           header: "제목",
           dataIndex: 'title',
           align: 'left'
        },{
           id:'state',
           header: "상태",
           dataIndex: 'status',
           align: 'center',
           '''editor: statusCombo,'''           
           renderer:Ext.jcf.Combo(statusCombo)            
        },
...
       ]);

여기에 renderer를 추가시키면 된다. renderer는 Ext.jcf.Combo를 사용하고 이에 대한 param 값은 콤보컨트롤 명을 넣도록 한다.