ExtJS 노트 Ext.data.Model
20155 단어 ExtJs
모델은 당신의 앱 관리 대상을 표시합니다.예를 들어 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.HasOne , belongsTo 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.HasOne , Ext.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에 대한 자세한 내용을 확인하십시오.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
문자열 길이를 계산하고 중국어로 두 개를 계산합니다.
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
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}/}
]
});
var instance = Ext.create('User', {
name: 'Ed',
gender: 'Male',
username: 'edspencer'
});
var errors = instance.validate();
Models can have associations with other Models via Ext.data.association.HasOne , belongsTo 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.HasOne , Ext.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에 대한 자세한 내용을 확인하십시오.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
문자열 길이를 계산하고 중국어로 두 개를 계산합니다.
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'email'],
proxy: {
type: 'rest',
url : '/users'
}
});
var user = Ext.create('User', {name: 'Ed Spencer', email: '[email protected]'});
user.save(); //POST /users
//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
}
});
//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!');
}
});
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에 대한 자세한 내용을 확인하십시오.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
문자열 길이를 계산하고 중국어로 두 개를 계산합니다.텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.