1. [ 데이터 스토어의 정의 ]
스토어클래스는 모델 객체의 클라이언트 측의 캐시를 캡슐화 합니다.
스토어는 프록시를 경유하여 데이터를 로드하고 또 그안에 포함되어 있는 모델, 인스턴스를 정렬 필터링 및 조회하기 위한 기능을 제공합니다
스토어 작성은 간단합니다.
우리는 로드하고 그 데이터를 저장하는데 사용합니다.
2. [ 데이터 스토어에서 대표적인 컴포넌트들 ]
3. [ 콤보박스 예시 및 config 설명 ]
•
displayField : 스토어에서 fields 에 선언해준 여러 필드명 중 화면에 표출시키고자 하는 필드명
•
valueField : 스토어에서 fields에 선언해준 여러 필드명 중 선택 시 값 전달을 하고자 하는 필드명
Ext.onReady(function() {
Ext.create('Ext.panel.Panel', {
width : 500,
height : 500,
layout : 'border',
renderTo : Ext.getBody(),
items : [{
xtype : 'panel',
region : 'north',
flex : 1,
items : [{
xtype : 'combo',
fieldLabel : '콤보',
labelWidth : 30,
emptyText : '값을 선택해주세요',
displayField : 'key',
valueField : 'value',
store : {
fields : ['key','value'],
data : [{
key : '토끼',
value : 'rabbit'
}, {
key : '강아지',
value : 'dog'
}, {
key : '고양이',
value : 'cat'
}]
}
}]
}, {
xtype : 'panel',
region : 'center',
flex : 1
}]
})
})
JavaScript
복사
4. [ 데이터 스토어에서 알아두어야 할 점 ]
1.
데이터 스토어를 보면 fields와 data config를 기본적으로 선언해줘야 합니다.
2.
만약 fields 선언하지않으신다면 모델클래스를 선언해야합니다.
3.
data config속성에 현재 다중배열 값으로 목록을 선언하지만 JSON값으로도 선언을 주어도 이상없이 출력 됩니다.
4.
추가적으로 Array to JSON에 대한 설명
5. [ ComboBox에서 값이 chage되는 거 확인하는법 ]
listeners : { change : function(obj , newValue , oldValue, eOpts) { console.log(newValue+','+oldValue);}} 이용해서 확인하면된다
•
queryMode : queryMode는 'ajax'로 쓰면 정의를하지않아도되지만아래처럼
data써서 하드코딩해서불러오는거면 queryMode : local로 선언해줘야한다
Ext.onReady(function() {
Ext.create("Ext.panel.Panel" , {
width : 500,
height : 500,
renderTo : Ext.getBody(),
layout : 'border',
items : [{
xtype : 'panel',
region : 'north',
title : 'test',
items : [{
xtype : 'combo',
fieldLabel : '테스트',
width : '33%',
labelWidth : 50,
displayField : 'key',
valueField : 'value',
emptyText : '기초값',
listeners : {
change : function(obj, newValue, oldValue, eOpts) {
console.log(newValue+','+oldValue);
}
},
store : {
fields : ['key','value'],
/* queryMode는 'ajax'로 쓰면 정의를하지않아도되지만아래처럼
data써서 하드코딩해서불러오는거면 queryMode : local로 선언해줘야한다.*/
queryMode : 'local',
data : [{
key : '토끼',
value : 'rabbit'
}, {
key : '호랑이',
value : 'tiger'
}]
}
}]
}]
})
})
JavaScript
복사
