하이브리드 앱 센차터치 2.0 - 데이터 관리 : Store 객체

1. 개요

 

웹앱은 네트워크의 영향을 많이 받기 때문에 속도에 민감할 수 밖에 없다. 그래서 서버에서 받은 데이터를 클라이언트 측에서 저장하고 관리해야 한다. 또한 웹앱에서 동일한 데이터를 서버에서 재요청하게 되면, 불필요한 트래픽이 발생하기 때문에 캐쉬에 저장되어 있는 데이터를 활용해야 하는데 'Ext.data.Store' 에서 그러한 메커니즘을 제공해 준다.

 

 

 

2. 구현

 

Ext.require("Ext.data.Store");
Ext.require("Ext.List");

Ext.application({
    name:"MyStore",
    launch: function(){
        // 모델에서 관리할 필드정의

        Ext.define("User",{
           extend: "Ext.data.Model" ,
           config:{
               fields:[
                   { name:"firstName",type:"string" },
                   { name:"lastName",type:"string" },
                   { name:"age",type:"int" },
                   { name:"eyeColor",type:"string" }
               ]
           }
        });
        // 스토리지
        var myStore = Ext.create("Ext.data.Store", {
            model: "User",
            proxy: {
                type: "ajax",
                url : "./data/ex1_store.json",
                reader: {
                    type: "json",
                    rootProperty: "users"
                }
            },
            autoLoad: true
        });
       
       Ext.create("Ext.List", {
            fullscreen: true,
            store: myStore,
            itemTpl: "{lastName}, {firstName} ({age})"
        });
    }
});

 

 

//----- json 파일명 : ex1_store.json

 {
    "success": true,
    "users": [
        {
            "firstName": "Tommy",
            "lastName": "Maintz",
            "age": 24,
            "eyeColor": "green"
        },
        {
            "firstName": "Aaron",
            "lastName": "Conran",
            "age": 26,
            "eyeColor": "blue"
        },
        {
            "firstName": "Jamie",
            "lastName": "Avins",
            "age": 37,
            "eyeColor": "brown"
        }
    ]
}