ExtJS 노트 Ext.data.Model

20155 단어 ExtJs
A Model represents some object that your application manages. For example, one might define a Model for Users, Products, Cars, or any other real-world object that we want to model in the system. Models are registered via the  model manager , and are used by  stores , which are in turn used by many of the data-bound components in Ext.
모델은 당신의 앱 관리 대상을 표시합니다.예를 들어 Users, Products, Cars 등 모델 클래스나 앱에서 모델링하고 싶은 실제 세계의 대상.모델은 model manager을 통해 등록되고stores에 사용되며,stores는 Ext에서 대량의 데이터 귀속 구성 요소에 사용됩니다.
Models are defined as a set of fields and any arbitrary methods and properties relevant to the model. For example:
모델은 일부 필드의 집합으로 정의되고 일부 모델과 관련된 임의의 방법, 속성을 포함할 수 있다.예:
Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'name',  type: 'string'},
        {name: 'age',   type: 'int', convert: null},
        {name: 'phone', type: 'string'},
        {name: 'alive', type: 'boolean', defaultValue: true, convert: null}
    ],

    changeName: function() {
        var oldName = this.get('name'),
            newName = oldName + " The Barbarian";

        this.set('name', newName);
    }
});

 
The fields array is turned into a  MixedCollection  automatically by the  ModelManager , and all other functions and properties are copied to the new Model's prototype.
필드 그룹은 ModelManager 자동으로 MixedCollection 로 바뀌고 다른 함수와 속성은 새 모델의prototype으로 복사됩니다.
A Model definition always has an identifying field which should yield a unique key for each instance. By default, a field named "id"will be created with a  mapping  of "id". This happens because of the default  idProperty  provided in Model definitions.
모델 정의에는 항상 각 인스턴스의 고유 키로 식별 필드가 있습니다.기본적으로'id'라는 필드는 자동으로'id'속성에 비칩니다. 이 기능은 모델의 기본 idProperty 에서 제공합니다.
To alter which field is the identifying field, use the  idProperty  config.
식별 열로 사용할 필드를 변경하려면 idProperty 구성을 사용합니다.
If the Model should not have any identifying field (for example if you are defining ab abstract base class for your application models), configure the {@liknk idProperty } as  null .
만약 모델이 어떤 표지 필드를 포함하지 말아야 한다면 (예를 들어 앱에서 사용하는 추상적인 기본 클래스를 정의하고 있는 것) {@liknk idProperty} 를 null。 로 설정합니다
By default, the built in numeric and boolean field types have a  Ext.data.Field.convert  function which coerces string values in raw data into the field's type. For better performance with  Json  or  Array  readers if you are in control of the data fed into this Model, you can null out the default convert function which will cause the raw property to be copied directly into the Field's value.
기본적으로, 수치와 부울 속성 형식은 문자열 수치를 속성 형식으로 변환하도록 강요하는 내장된 함수가 있습니다.데이터를 모델에 채우면 Json이나 Array 리더가 더 좋은 표현을 할 수 있도록 기본적인 변환 방법을 비울 수 있습니다. 이러한 변환 방법은 원생 속성을 속성의 값에 직접 복사합니다.(주: 이렇게 하는 전제는reander가 읽은 데이터 값이 모두 정확하고 변환할 필요가 없다는 것을 확보하는 것이다)
Now we can create instances of our User model and call any model logic we defined:
이제 User 모델의 인스턴스를 만들고 정의된 모델 논리를 호출할 수 있습니다.
var user = Ext.create('User', {
    id   : 'ABCD12345',
    name : 'Conan',
    age  : 24,
    phone: '555-555-5555'
});

user.changeName();
user.get('name'); //returns "Conan The Barbarian"

 

Validations 검증


Models have built-in support for validations, which are executed against the validator functions in  Ext.data.validations  ( see all validation functions ). Validations are easy to add to models:
모델은 내장 지원 검사기입니다. Ext.data.validations 의 검사기 방법을 실행합니다. 검사기는 모델에 쉽게 추가됩니다.
Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'name',     type: 'string'},
        {name: 'age',      type: 'int'},
        {name: 'phone',    type: 'string'},
        {name: 'gender',   type: 'string'},
        {name: 'username', type: 'string'},
        {name: 'alive',    type: 'boolean', defaultValue: true}
    ],

    validations: [
        {type: 'presence',  field: 'age'},
        {type: 'length',    field: 'name',     min: 2},
        {type: 'inclusion', field: 'gender',   list: ['Male', 'Female']},
        {type: 'exclusion', field: 'username', list: ['Admin', 'Operator']},
        {type: 'format',    field: 'username', matcher: /([a-z]+)[0-9]{2,3}/}
    ]
});

 
The validations can be run by simply calling the  validate  function, which returns a  Ext.data.Errors  object:
간단하게validate 방법을 호출하면 검사를 진행합니다. Ext.data.Errors 대상을 되돌려줍니다.
var instance = Ext.create('User', {
    name: 'Ed',
    gender: 'Male',
    username: 'edspencer'
});

var errors = instance.validate();

 

Associations


Models can have associations with other Models via  Ext.data.association.HasOnebelongsTo  and  hasMany  associations. For example, let's say we're writing a blog administration application which deals with Users, Posts and Comments. We can express the relationships between these models like this:
모델은 Ext.data.association.HasOne,blongsTo,hasMany를 통해 다른 모델과의 관계를 구축한다.예를 들어 블로그 관리 시스템을 작성하면 이 시스템은 사용자, 댓글과 내용을 처리해야 하는데 이 모델들은 다음과 같은 관계를 가진다.
Ext.define('Post', {
    extend: 'Ext.data.Model',
    fields: ['id', 'user_id'],

    belongsTo: 'User',
    hasMany  : {model: 'Comment', name: 'comments'}
});

Ext.define('Comment', {
    extend: 'Ext.data.Model',
    fields: ['id', 'user_id', 'post_id'],

    belongsTo: 'Post'
});

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: ['id'],

    hasMany: [
        'Post',
        {model: 'Comment', name: 'comments'}
    ]
});

 
See the docs for  Ext.data.association.HasOneExt.data.association.BelongsTo  and  Ext.data.association.HasMany  for details on the usage and configuration of associations. Note that associations can also be specified like this:
다음과 같이 지정할 수 있는 관계식의 사용법 및 구성 세부 내용을 보려면 문서를 참조하십시오.
Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: ['id'],

    associations: [
        {type: 'hasMany', model: 'Post',    name: 'posts'},
        {type: 'hasMany', model: 'Comment', name: 'comments'}
    ]
});

 

Using a Proxy


Models are great for representing types of data and relationships, but sooner or later we're going to want to load or save that data somewhere. All loading and saving of data is handled via a  Proxy , which can be set directly on the Model:
모델은 데이터와 관계의 유형을 명확하게 나타낼 수 있지만 모델을 사용하는 목적은 데이터를 불러오고 저장하는 것이다.모든 데이터의 불러오기와 저장은 Proxy로 처리되며 Proxy는 모델에서 직접 설정할 수 있습니다.
Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: ['id', 'name', 'email'],

    proxy: {
        type: 'rest',
        url : '/users'
    }
});

 
Here we've set up a  Rest Proxy , which knows how to load and save data to and from a RESTful backend. Let's see how this works:
Rest Proxy를 설정하면 Restful 백엔드에서 데이터를 로드하고 저장합니다.어떻게 작동하는지 확인하십시오.
var user = Ext.create('User', {name: 'Ed Spencer', email: '[email protected]'});

user.save(); //POST /users

 
Calling  save  on the new Model instance tells the configured RestProxy that we wish to persist this Model's data onto our server. RestProxy figures out that this Model hasn't been saved before because it doesn't have an id, and performs the appropriate action - in this case issuing a POST request to the url we configured (/users). We configure any Proxy on any Model and always follow this API - see  Ext.data.proxy.Proxy  for a full list.
새로운 모델 대상이 save 방법을 호출하면 RestProxy가 모델 데이터를 서버에 저장합니다.RestProxy는 모델에 id가 있는지 여부에 따라 모델이 저장되었는지 판단합니다. 이에 따라 적절한 동작을 취합니다. 데이터를 저장하려면 RestProxy는post 요청을 설정된 URL로 보냅니다.API에 따라 모델에 Proxy를 구성하십시오 - Proxy에 대한 전체 목록을 보십시오 Ext.data.proxy.Proxy.
Loading data via the Proxy is equally easy:
Proxy를 통해 데이터를 로드하는 것은 매우 쉽습니다.
//get a reference to the User model class
var User = Ext.ModelManager.getModel('User');

//Uses the configured RestProxy to make a GET request to /users/123
User.load(123, {
    success: function(user) {
        console.log(user.getId()); //logs 123
    }
});

 
Models can also be updated and destroyed easily:
모델도 쉽게 업데이트하고 제거할 수 있습니다.
//the user Model we loaded in the last snippet:
user.set('name', 'Edward Spencer');

//tells the Proxy to save the Model. In this case it will perform a PUT request to /users/123 as this Model already has an id
user.save({
    success: function() {
        console.log('The User was updated');
    }
});

//tells the Proxy to destroy the Model. Performs a DELETE request to /users/123
user.destroy({
    success: function() {
        console.log('The User was destroyed!');
    }
});

 

Usage in Stores 스토어에서 사용


It is very common to want to load a set of Model instances to be displayed and manipulated in the UI. We do this by creating a  Store :
UI에서 모델 객체 세트를 표시하고 제어하는 것은 항상 필요합니다.
var store = Ext.create('Ext.data.Store', {
    model: 'User'
});

//uses the Proxy we set up on Model to load the Store data
store.load();

 
A Store is just a collection of Model instances - usually loaded from a server somewhere. Store can also maintain a set of added, updated and removed Model instances to be synchronized with the server via the Proxy. See the  Store docs  for more information on Stores.
store는 모델 대상의 집합입니다. 보통 이 모델 대상은 서버 어딘가에서 불러옵니다.Store는 Proxy와 서비스를 통해 작업을 진행합니다. 예를 들어 추가, 업데이트, 삭제 등입니다.Store를 참조하여 Store에 대한 자세한 내용을 확인하십시오.

좋은 웹페이지 즐겨찾기