Extjs 개발팁

아래는 sencha architect 에서의 사용 팁이다.

검색어필드 enter event 주기

필드 enableKeyEvents= true 로 설정후 Controller keydown event 함수 만들기.

Store

autoLoad 하면 초기 접속시 자동 load 됨.

==> mannual 하게 load 해야함. (아래 참고)

onStep2Activate: function(component, eOpts) {

        component.down('gridpanel').getStore().load();

},

load 시 param 추가 방법.

Ext.getCmp('id').getStore().load({

params: {

domainId: Domain.id

}

});

var store = Ext.getCmp("id").getStore();

    store.getProxy().url = url;

    store.getProxy().extraParams = {"domainId":domainId};

    store.load();

Grid header bottom line 이 안나오는 문제

bodyBorder 속성을 아예 제거해야 함. (sencha 에서 속성 ‘x’버튼으로 제거 가능)

Grid data value 에 따라 색상주기.

Column 에 renderer 를 이용.

Grid 에 ComBobox column 넣기

Grid에 CellEditing Plugin 삽입후 Column 의 editor 에 combobox 추가.

Grid Actioncolumn handler 참고

view 가 gridpanel 임.

ex)

               handler: function(view, rowIndex, colIndex) {
                   var rec = view.getStore().getAt(rowIndex);
                   alert("Edit " + rec.get('firstname'));
               }

ComboBox 에 static Array data 설정하기

ArrayStore 를 사용하고 proxy 있으면 제거한후 fields 설정후 data (array) 를 설정한다.

ex) [{“value”:”001”,”text”:”서울”}, {“value”:”002”,”text”:”경기”}]

더 간단하게 ComboBox store type 을 Array 로 하고 위 데이타 설정후 displayField, valueField 매핑해주면 됨.

autoLoadOnValue: true 설정으로 form load 직전에 combobox data 를 load 한다.

Form Panel Tip

var form = Ext.getCmp("loginForm");

var userName = form.getForm().findField("userName").getValue() or setValue();

ajax params : form.getValues()

기본적으로 anchor layout 이고 하위에 field 추가하면 anchor 100% 로 추가됨.( 이상태에서 width 적용안됨)

Tree Panel without Store

TreeStore 대신 root 에 tree json 을 설정할수 있지만 이벤트 처리가 불편함.

TreeStore 만들고 proxy 삭제 => Field 를 'text'로 하나만 생성 => TreeStore 의 root 에 tree json 을 셋팅하면 됨.

Tree Panel item click event

Ext.tree.View 의 itemclick event 를 사용할것!