[ExtJS] DataStore

Ext.data.Store

가공된 데이터를 화면에 출력한다.

스토어 클래스는 모델 객체의 클라이언트 측 캐시를 캡슐화한다.

스토어는 프록시를 경유하여 데이터를 로드하고, 또 그안에 포함되어 있는 모델, 인스턴스를 

정렬 필터링 및 조회하기 위한 기능을 제공한다.

 

1) 여러 컴포넌트에서 사용되는 데이터 스토어

• Ext.form.field.ComboBox
• Ext.view.View
• Ext.grid.Panel
• Ext.tree.Panel - 스토어의 개념은 동일하나 사용 클래스가 다름(Ext.data.TreeStore)
• Chart - Column, Bar, Line, Area, Pie, Financial, Gauge, Combination ...

 

2) 데이터 스토어에서 알아두어야할 점

• 데이터 스토어에fields와 data config를 기본적으로 선언해주어야 한다. -> 선언하지 않을 경우 모델클래스 선언
• data config 속성에 다중 배열값 또는 json값으로 선언을 해준다.

 

docs.sencha.com/extjs/6.5.3/classic/Ext.data.Store.html

Ext.data.Store | Ext JS 6.5.3

---

ComboBox를 이용한 샘플 코드

Ext.onReady(function(){
	
	Ext.create("Ext.panel.Panel",{
		title:"Data Store Ex",
		items:[{
			xtype:'combo',
			fieldLabel:'ComboBox',
			displayField:'label', // 화면에 표시되는 필드명
			valueField:'value', // 값을 전달해주는 필드명
			renderTo:Ext.getBody(),
			store:Ext.create("Ext.data.Store",{
				fields:['label','value'],
				data:[
                		// 다중 배열 값으로 목록 선언
					['label1','value1'],
					['label2','value2'],
					['label3','value3']
				]
			})
		}]
	});
});    

store:Ext.create("Ext.data.Store",{
	data:[
		{	// json array 형태로 목록 선언
			label:'label1',
			value:'value1'
		},
		{
			label:'label2',
			value:'value2'
		},
		{
			label:'label3',
			value:'value3'
		}
	]
});

결과

 

 

---

출처 및 참고 : mongodev.tistory.com/16?category=598000