ExtJSå端工ä½æè¿°
ä»å¤©æ¯17å¹´12æ31æ¥ï¼çæ¥ä»å¤©è¦å¨å
¬å¸è·¨å¹´äºã
ç»è¿ä¹å两å¨çæµè¯ï¼
1---æåç为èªå·±çspring项ç®é
ç½®äºhibernateä½ä¸ºæä¹
åå±çå·¥å
·ãä¹å°±æ¯è¯´ï¼ä¸éè¦ä½¿ç¨Spring JDBCè¿è¡æ°æ®åºçæä½ãç´æ¥ä½¿ç¨Springçä¸ä¸ªæ¨¡åï¼ååå«åSpring-ormï¼å®æ¯å¯¹Hibernateçéæ模åãæ们çjava代ç å¯ä»¥éè¿Spring-orméæHibernateï¼ä»è使ç¨ç»ä¸çDaoå»è¿è¡æä¹
åå·¥ä½ï¼ä¸æ°æ®åºæ交éã
2---Serviceå±çjava代ç ï¼è¿æ¯å¨Daoæ件çåºç¡ä¸è¿è¡ç¼åï¼å ·ä½è¿æ²¡æåï¼è¯å®è¦åèå¥å ç³»ç»ç代ç ã
3---webå±å·²ç»å¨Spring-MVCçæ¡æ¶ä¸ï¼ä½¿ç¨jsonä½ä¸ºä¼ éåæ°çåªä»ï¼è½ç¶å ¶ä¸çéçè¿æ²¡æææ¸ æ¥ï¼å¥½å¨å¯ä»¥ç¨äºã
4---顺便å¼éäºç äºï¼ä½¿ç¨eclipse以åå®äºå èªå¸¦çæ件egitï¼æ代ç ä¼ éå°ç äºä¸ï¼çä¸å»é«å¤§å¾å¤ï¼ååå
ä¸é¢çå·¥ä½ï¼å°±æ¯å端ã
æ们éè¦å®æ´çéç¨ExtJSè´è´£å端ææçå·¥ä½ï¼ç¶åå端ä¸SpringMVCä¹é´éè¿jsonç¸äºäº¤äºã
好çï¼å·¥ä½å¼å§ã
å端å©ç¨ExtJSï¼å¹³æ¶ç¼ç å°±æ¯eclipseä¸æå¨ç¼ç ï¼å®å
¨åå®ä»¥åï¼ç¨senchaå½ä»¤è¡çå½ä»¤ï¼å¼ä¸ä¸ï¼ç¸å½äºæ个å
ã
ExtJSçå
¥å£
<!DOCTYPE HTML>
<html manifest="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
<title>导èªé¡µ</title>
<script id="microloader" data-app="3054602d-f709-4e7b-b04c-099e1040034c" type="text/javascript" src="bootstrap.js"></script>
</head>
<body></body>
</html>
å ³é®æ¯è¿ä¸ªindexæ件ç代ç
ä¸é¢æ¯ä¸äºæ å
³ç´§è¦çæè¿°ï¼ä¸é¢è¿å
¥æ£é¢ï¼
ExtJS对ææ¥è¯´æ¯ä¸ä¸ªå
¨æ°çå
容ï¼å æ¤åºè¯¥å
å»å®ç½çç代ç çåæ³ååºæ¬æ¦å¿µï¼urlæ¯ http://docs.sencha.com/extjs/6.2.0/
Ext4ä¸ä½¿ç¨çæ¯MVCçæ¦å¿µï¼Ext5å¼å§ä½¿ç¨MVVMçæ¦å¿µï¼Ext6.2èªç¶ä¹æ¯ä¸¤è
并åäºã
docç½é¡µç页é¢å¦ä¸å¾æ示ï¼åäºè¥å¹²é¨ç±»ãæå¿
须说ï¼ExtJSçè±æææ¡£ï¼é½æ¯åååºç¡çè±æï¼ççå¯ä»¥çæï¼å¤§æ¦è®²è¿°äºå¦ä¸å
容ï¼
jsæ大çç¹ç¹å°±æ¯flexibility 以å classlessï¼è§£å³åä¸ä¸ªé®é¢ï¼æä¸åçææ¯åç¼ç styleãä½æ¯åå¦ä½ çjs代ç 没æç»ä¸çæ ¼å¼ï¼é£ä¹ä½ ç代ç can be difficult to understand, maintain, and re-use.
ExtJSçä»·å¼å°±æ¯ï¼Class-based programmingï¼ä¿çjsè¯è¨ç¹æ§çæç¹ï¼åæ¶é¢å对象ç¼ç¨ã
1--Naming Conventions å½åè§åï¼å½å空é´åæ件路å¾ä¹é´çå
³ç³»ï¼
2--Declaration å®ä¹æ°çç±»
3--ExtJSçUIé¨åï¼æ¯ä¸å¤§å componentï¼è¿äºcomponentå ¨é¨é½æ¯Ext.Componentç±»çåç±»ï¼å ¨é¨é½æ¯ãExtçææcomponenté½æ¥æçå½å¨æçæ¦å¿µãlifecycle management including instantiation, rendering, sizing and positioning, and destruction. ä¹å°±æ¯è¯´ExtJSçUIé¨åçææcomponentï¼é½æ¥æä¸è¿°è¿äºæ¦å¿µãExtJSçUIé¨åæä¾äºå¾å¤ç°æçcomponentï¼é©¬ä¸å°±å¯ä»¥ç´æ¥ç¨ã
Containeræ¯ä¸ç§ç¹æ®çcomponentï¼å®æ¯ä¸ªå®¹å¨ï¼å¯ä»¥åæ¾å ¶ä»çcomponentã好çContainerä¸å¤è¯´äºï¼å°±è¯´è¿ä¹å¤ã
4--XTypes and Lazy Instantiation
Every Component has a symbolic name called an xtype.
å¦æä½ åçExtJSç¨åºå¾å¤§ï¼æè
è¯´ä½ çç½é¡µå
容ç¹å«ä¸°å¯ï¼é£å°±æå³ç并ä¸æ¯ä»ç¬¬ä¸ç§å¼å§ï¼ä¸æ¯ææçcomponenté½è¦ç¬¬ä¸ç§éå®ä¾åãåå§åï¼è¯å®æ¯é¼ æ ç¹å»å°åªéï¼åªéæå¼å§åæ¥ä½ç¨ãxtypeå°±æ¯å æ¤æ´¾ä¸ç¨åºçã è¿ä¸ªæ¦å¿µå°±æ¯lazy instantiationã
ä¸é¢ç代ç ï¼æ¯èªæçï¼lazy instantiation
Ext.create('Ext.tab.Panel', {
renderTo: Ext.getBody(),
height: 100,
width: 200,
items: [
{
// Explicitly define the xtype of this Component configuration.
// This tells the Container (the tab panel in this case)
// to instantiate a Ext.panel.Panel when it deems necessary
xtype: 'panel',
title: 'Tab One',
html: 'The first tab',
listeners: {
render: function() {
Ext.MessageBox.alert('Rendered One', 'Tab One was rendered.');
}
}
},
{
// xtype for all Component configurations in a Container
title: 'Tab Two',
html: 'The second tab',
listeners: {
render: function() {
Ext.MessageBox.alert('Rendered One', 'Tab Two was rendered.');
}
}
}
]
});
ä¸é¢ç代ç æ¯æè ¢çï¼
var childPanel1 = Ext.create('Ext.panel.Panel', {
title: 'Child Panel 1',
html: 'A Panel'
});
var childPanel2 = Ext.create('Ext.panel.Panel', {
title: 'Child Panel 2',
html: 'Another Panel'
});
Ext.create('Ext.container.Viewport', {
items: [ childPanel1, childPanel2 ]
});
åå æ¯ï¼ç¸å½äºç¬¬ä¸ç§éå°±å®ä¹ï¼å£°æ并åå§åï¼äºææçuiåéã
5--Creating Custom Components
æ们èªå·±åExtJSçUIé¨å代ç çæ¶åæ两ç§éæ©ï¼1ç´æ¥å®ä¾åä¸ä¸ªExtJSç°æçcomponentæè
2extendä¸ä¸ªç°æçExtJSçcomponent
å®æ¹ææ¡£æ¨èä½ å»extendä¸ä¸ªï¼åä½ å¤´èä¸é¡µé¢ææ¥è¿çé£ä¸ªcomponentãåå æ¯ExtJSæä¾çèªå¨çå½å¨æ管çç¹æ§ï¼This is because of the automated lifecycle management Ext JS provides which includesï¼å
æ¬ï¼ï¼ automated rendering when needed, automatic sizing and positioning of Components when managed by an appropriate layout manager, and automated destruction on removal from a Container.
6--Template Methods
An example is the render function. render is a method defined in Component. It is responsible for initiating the rendering phase of the Component lifecycle. render must not be overridden, but it calls onRender during processing to allow the subclass implementor to add an onRender method to perform class-specific processing. Every onRender method must call its superclass' onRender method before "contributing" its extra logic.
7--éåªä¸ªcomponentå»ç»§æ¿å¢ï¼
说äºè¿ä¹å¤ï¼æ们è¿äºå代ç çï¼æåªäºcomponentå¯ä»¥ç¨å¢ï¼
éä¸ä¸ªåéçcomponentå»extendå¯ä»¥è®©ä½ äºåååã
å¨ExtJSçç¼ç åå²ä¸ï¼æä¸ä¸ªæ¶æï¼ä¸è®ºåä»ä¹æ ·çç½é¡µå¤§å®¶é½ç±å
¨é½å»extend Ext.panel.Panel ç±»ï¼è®¤ä¸ºè¿æ ·åå°±ç®åäºãä½äºå®ä¸å¹¶éå¦æ¤ï¼å¦æä½ çç½é¡µä¸çå个åï¼ä¸éè¦å·¥å
·æ ã页èçæé®æè
componentä¸æ²¡æå
¶ä»å
ç´ çè¯ï¼ä½ å
¨é½ç¨Ext.panel.Panel 类就æ¯ä¸ç§å·¨å¤§ç浪费ã
å¦æä½ çUI componentä¸éè¦å å«å ¶ä»çcomponentï¼é£æå¥½ä½ å°±ç´æ¥extend Ext.Component
å¦æä½ çUI componentéè¦å å«å ¶ä»componentï¼èä¸ä¸éè¦å·¥å ·æ ä¹ç±»çåè½ï¼é£å°±extend Ext.container.Container
å¦æä½ çUI componentéè¦å·¥å ·æ ã头ãå°¾ä¹ç±»çï¼é£ä½ å°±ç»§æ¿ Ext.panel.Panel
8--Container ç Layout
ExtJSä¸Containeræ¯ä¸ç§ç¹æ®çcomponentï¼containerä¸å
å«äºå¤ä¸ªcomponentï¼å æ¤éè¦layoutå³å®ä»ä»¬ä¹é´çä½ç½®å
³ç³»ã
9--Data Package æ°æ®å
ï¼
åæ£å°±æ¯ExtJS代ç ä¸ï¼load and save ä½ æ°æ®çä¸è¥¿ã
saveï¼Ext--->å
¶ä»å°æ¹
loadï¼Ext<---å
¶ä»å°æ¹
Data Packageå
å«å¾å¤ç±»ï¼æ¯å¦ï¼model store åproxy
Model
A Model represents an entity in an application.
Ext.data.Modelæ¯ExtJSä¸Data Packageçæ ¸å¿æ¦å¿µï¼
Proxyæ两ç§ï¼
Proxies are used by Models and Stores to handle the loading and saving of Model data. There are two types of proxies: Client and Server.
å®ä¿©çå¦ååå«æ¯ Ext.data.proxy.Client å Ext.data.proxy.Server.
ä½æ¯client proxyåºäºhtml5ï¼server proxyæ¯è¾å¸¸è§å§ã
Proxies can be defined directly on the schema of the Model's base class .
The Client proxies save their data locally.
The Server proxies save their data by sending requests to some remote server.
çæ¥æ们éè¦ä½¿ç¨çï¼æ¯Ext.data.proxy.Server
Proxyå·¥ä½çååå°±æ¯ï¼å®çå·¥ä½ä» éäºå¹¶å¿ é¡»æ¯ å¢å æ¹æ¥åç§æä½çä¸ç§ã
Stroe
Models are typically used with a Store, which is basically a collection of records
9--äºä»¶
Ext.create('Ext.Panel', {
html: 'My Panel',
renderTo: Ext.getBody(),
listeners: {
afterrender: function() {
Ext.Msg.alert('Success!', 'We have been rendered');
}
}
});
10--components
æå¾å¤ç°æça wide range of useful Components out of the box
å¦å¦è±è¯ä¹ä¸é
11--Application Architecture
ExtJSåæ¶æ¯æMVCåMVVMï¼äºè
æåºå«ï¼ä½æ¯ç®çé½æ¯æ代ç åå¸å°ä¸åçjsæ件ä¸ãfocus on dividing application code along logical linesã
In an MVC architecture, most classes are either Models, Views or Controllers. The user interacts with Views, which display data held in Models. Those interactions are monitored by a Controller, which then responds to the interactions by updating the View and Model, as necessary.
The View and the Model are generally unaware of each other because the Controller has the sole responsibility of directing updates. Generally speaking, Controllers will contain most of the application logic within an MVC application. Views ideally have little (if any) business logic. Models are primarily an interface to data and contain business logic to manage changes to said data.
MVCè¿ç§ç»æï¼å°±æ¯è®©ä»ä»¬åå¸å ¶èï¼ç¶å让æ´ä¸ªjs代ç 容æç»´æ¤ã
MVVMç»æï¼VM代表view modelï¼å®åºç°å¨View åModelä¹é´ï¼è´è´£æ°æ®ç»å®data bindingã
å
·ä½çå
容è¿æ¯ç代ç å§ã
è³äºä»£ç ç»æï¼ä¹åä¹è¯´äºapp.jså¦ï¼application.jså¦å¾å¤ï¼ExtJSæ¯æåºå®ä»£ç ç»æçã
http://docs.sencha.com/extjs/6.2.0/guides/application_architecture/application_architecture.html
è¿ä¸é¨åççå¼å¾å¥½å¥½çä¸ä¸ï¼å¿
é¡»è¦ççã
View
A view contains all of your application's visual aspects.
Viewå°±æ¯ExtJSä¸UIé¨åï¼åç§componentåcontainerï¼Viewå ä¹åªè´è´£é¡µé¢çæ¾ç¤ºã
Controlleré¨åå¨ExtJS5ä¹åï¼ä¹å°±æ¯ExtJS4ç年代ï¼æ为人è¯ç
çå°±æ¯ï¼Controllerèµæºæ²¡æ被åæ¶(destroyed)ï¼æè
ä¸ä¸ªControlleræä½å¤ä¸ªView
ä½æ¯ExtJS 5æ¶æï¼æäºViewControllerè¿ä¸ªæ¦å¿µï¼ViewControllerä¸Viewçå
³ç³»å°±æ¯ä¸å¯¹ä¸çå
³ç³»ãViewControllerç¸å½äºViewçç§å®¶event handlerç容å¨ã
ExtJS5çViewControllerç¸å½äºå¯¹ä¼ ç»Controllerçè¡¥å
ã
The ViewModel, like ViewController, is owned by the view that references it.
Models and Stores make up the information gateway of your application. Most of your data is sent, retrieved, organized, and "modeled" by these two classes.
A Store is a client side cache of records (instances of a Model class). Stores provide functions for sorting, filtering and querying the records contained within.
A Ext.data.Model represents any type of persist-able data in your application. Models are most commonly used in conjunction with stores. Stores can then be consumed by data-bound components like grids, trees, and charts.
We have added support for ViewModels and MVVM as well as ViewControllers to enhance MVC applications. Best of all, these choices are not mutually exclusive, so you can introduce these features incrementally or even blend them.
ExtJSå¨6.xä¸æ·»å äºViewModelï¼ä¹å°±æ¯MVVMçæ¯æã
èæ´æ©çExtJS5æ¶ææ·»å çViewControllerï¼ç¸å½äºå¯¹æ©æMVCæ¶æçè¡¥å
ã
ä¹å°±æ¯è¯´
MVVM --- ViewModel ExtJS 6
MVC --- ViewController ExtJS 5
è¿æ¯ä¸¤ä¸ªä¸åèç´ï¼ä¸åé¶æ®µçæ¦å¿µã
å¨ExtJS4çé¶æ®µï¼MVCå®ç°å¤§åapplicationçæ¶åéå°äºå¾å¤é®é¢ï¼å¤ä¸ªç åä¸èµ·åä¸ä¸ªç½ç«é¡¹ç®çæ¶åï¼å¾é¾ä¿è¯ï¼controlleråç¡®çå»çå¬åååºèªå·±è®¾è®¡çé£ä¸ªviewãå 为大家é½å¨æ¹ä»£ç ãè½ç¶lazy Installizationå¯ä»¥è®©ä¸äºèµæºåªæ被å¤èµ·çæ¶åæå è½½ï¼ä½æ¯ä¼ ç»controlleræ¯æ æ³è¢«destroyedçã
ExtJS5å¼å§ï¼å¼å ¥äºViewControlleræ¥è§£å³ä¸è¿°é®é¢ï¼ä¸ç§æä¸çæ¹å¼ï¼åæ§çæ¬å ¼å®¹MVCçæ¹å¼ï¼ï¼ViewControllerå¯ä»¥è§£å³ï¼
- Simplifies the connection to views using âlistenersâ and âreferenceâ configs.
- Leverages the life cycle of views to automatically manage their associated ViewController.
- Reduces complexity in the ViewController based on a one-to-one relationship with the managed view.
- Provides encapsulation to make nesting views reliable.
- Retains the ability to select components and listen to their events at any level below the associated view.
æ¯å¦éæ¯çé®é¢ï¼åä¸å¯¹ä¸çé®é¢ã
æç»çç»è®ºå°±æ¯ï¼
We think ViewControllers will greatly streamline your MVC applications.
ViewControllerå¯ä»¥é«æçç»ç»ä½ çMVCåºç¨ã
ViewControllerä¸MVVMçæ¦å¿µæ²¡æå
³ç³»ï¼ViewControlleræ¯ExtJS5æåºçæ¦å¿µï¼ç®çæ¯è§£å³ExtJS4ä¸Controllerçä¸äºé®é¢ã
MVVMçæ¦å¿µæåºäºExtJS6ã
ViewModelçæ¦å¿µä¸Data Bindingæ¯ä¸èµ·åºç°çï¼å®æ¯ä¸Viewå ³èå¨ä¸èµ·çï¼å¾å¯è½ä¹æ¯ä¸å¯¹ä¸çå ³ç³»ã
ViewModelè¿ä¸ªæ¦å¿µpoweräºData Bindingï¼ViewModelåData Bindingè¿ä¸¤ä¸ªæ¦å¿µï¼æ¯ExtJS 6 ä¸ç强åè¡¥å ãå®ä»¬çä½ç¨å°±æ¯è®©ç¨åºåå°å代ç ï¼èä¸è®©ä»£ç å¨MVVMçæ¦å¿µä¸æ´å æ¸ æ°çåå¼ï¼æäºç»´æ¤ã
äºç¸ä¹é´è¿è¿å ³ç³»å¦ä¸ï¼
ç å---Component----ViewModel----data
ä¼å çº§ï¼ è¢«bindä¸çComponentçconfiguration propertiesï¼è¦ä¼å äºstaticå¼ã
One of the most helpful parts of binding is that all of the children of the component with a viewModel also have access to their container's data.
åcomponentå¯ä»¥è®¿é®ContainerçviewModelæ°æ®ã
å¦ä¸æ示ï¼
Ext.create('Ext.panel.Panel', {
title: 'Simple Form',
viewModel: {
type: 'test'
},
layout: 'form',
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
bind: '{firstName}' // uses "test" ViewModel from parent
},{
fieldLabel: 'Last Name',
bind: '{lastName}'
}]
});
ååç»å®ï¼two way binding
ä¹åçæ°æ®ç»å®ï¼é½æ¯å°modelçä¸çæ°æ®æä¾ç»viewï¼åæ¹å
ç°å¨viewä¸æ¾ç¤ºçæ°æ®ï¼æ¯å¦è¾å
¥æ¡Inputï¼inputä¸çæ°æ®ä¿®æ¹äºä»¥åï¼ç»å®çviewmodelä¸ç对åºå
容ä¹ä¼åæ¥åçååã
è¿å°±æ¯ååç»å®ã
ä¸é¢ææ¯å®ç½ç»åºçä¾å
Ext.define('MyApp.view.TestViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.test', // connects to viewModel/type below
data: {
firstName: 'John',
lastName: 'Doe'
},
formulas: {
// We'll explain formulas in more detail soon.
name: function (get) {
var fn = get('firstName'), ln = get('lastName');
return (fn && ln) ? (fn + ' ' + ln) : (fn || ln || '');
}
}
});
Ext.define('MyApp.view.TestView', {
extend: 'Ext.panel.Panel',
layout: 'form',
// Always use this form when defining a view class. This
// allows the creator of the component to pass data without
// erasing the ViewModel type that we want.
viewModel: {
type: 'test' // references alias "viewmodel.test"
},
bind: {
title: 'Hello {name}'
},
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
bind: '{firstName}'
},{
fieldLabel: 'Last Name',
bind: '{lastName}'
},{
xtype: 'button',
text: 'Submit',
bind: {
hidden: '{!name}'
}
}]
});
Ext.onReady(function () {
Ext.create('MyApp.view.TestView', {
renderTo: Ext.getBody(),
width: 400
});
});
æåæè¿°ä¸ä¸Model Proxy Store
å¨extjså®ç½çå³ä¸æ¹ï¼å¯ä»¥æç´¢
å¦ä¸å¾æ示
ExtJS 6以å æ两类åºç¨åºæ¯ï¼modern å classic
modernç¨äºææºãpadè¿ç±»ç§»å¨è®¾å¤ä¸ç触æ¸å±ã
classicç¨äºpcä¸çæ¾ç¤ºå¨+é®ç+é¼ æ çä¼ ç»äº¤äºæ¹å¼ï¼ä¹å°±æ¯ç½ç«ï¼ã
æ们ç®åçå·¥ä½ï¼è¿æ¯æ®éç½ç«ï¼å æ¤å¨æç´¢çæ¶åè¦éä¸classicï¼ä¹å°±æ¯è®©é£ä¸ªå¤§ä¸ªå¿çCåæ¯åºè²åæç½è²ï¼ç¶åè¾å
¥æ³è¦æç´¢çå
³é®è¯ã
æ¯å¦ä¸å¾ï¼æ们æç´¢modelï¼ä¼å¼¹åºæ¥ä¸ä¸ªå表ï¼å表左侧æ示è¿ä¸ªitemç身份ï¼classæè
config
æ们æ³è¦ççå½ç¶æ¯class
æ以éä¸ç¬¬ä¸ä¸ª
Modelçå¦åå«åï¼Ext.data.ModelãModelæ¯extjs对å®é
äºç©ç建模ï¼æ¯å¦ç¨æ·ã订åã产åã
Models are used by Ext.data.Store, which are in turn used by many of the data-bound components in Ext.
Component使ç¨Storeï¼Store使ç¨Modelã
ä¸é¢ä¸æ®µæ就没å¿
è¦ç¿»è¯äºï¼
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 Ext.data.proxy.Proxy, which can be set directly on the Model:
Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'email'],
proxy: {
type: 'rest',
url : '/users'
}
});
ä¸é¢å®ä¹äºä¸ä¸ªModelï¼Modelä¸æä¸ä¸ªrestç±»åçproxyï¼è¿ä¸ªproxyçå¦åå«åï¼ Ext.data.proxy.Rest
ä¸é¢æ¯å®ç被使ç¨çæ¹æ³ï¼
var user = Ext.create('User', {name: 'Ed Spencer', email: '[email protected]'});
user.save(); //POST /users
æ°å»ºä¸ä¸ªModelçå®ä¾ï¼ç¶åè°ç¨å®çsaveæ¹æ³ï¼æå³çï¼åè¯restç±»åçproxyï¼æ们æ³æModelçæ°æ®æä¹
åå°æ°æ®åºã
proxyï¼å 为æ们使ç¨saveæ¹æ³ï¼proxyç¥éäºæ们ï¼ç åï¼çæå¾ä»¥åï¼é¦å
å¤æåºæ¥è¿ä¸ªmodelçæ°æ®è¿æ²¡æ被æä¹
åè¿ï¼å 为idï¼ç±»ä¼¼äºhibernateä¸çOIDï¼ï¼è¿ä¸éè¦ï¼éè¦çæ¯proxyå°è¦ issue a POST request to the url we configured (/users)ã
ä¸è¿°è¿ç¨å°±æ¯å°extJSä¸çï¼ç½é¡µä¸çï¼å
åä¸çï¼æ°æ®æä¹
åå°æå®å°åçè¿ç¨ã
loadæ°æ®çè¿ç¨ä¹æ¯ç±»ä¼¼çï¼ä»æ°æ®åºè¯»åæ°æ®å°å
åï¼ï¼
//Uses the configured RestProxy to make a GET request to /users/123
User.load(123, {
success: function(user) {
console.log(user.getId()); //logs 123
}
});
//å» url /user/123è¿ä¸ªå°åè·åæ°æ®
Modelæ
é¿æè
被ç¨æ¥è¡¨ç¤º æ°æ®æè
å
³ç³»ï¼å®ä½åå
³ç³»ï¼çç±»åï¼ä½æ¯æ们è¿æ©è¦å è½½æ°æ®ï¼ä»æ°æ®åºè¯»æ°æ®å°ExtJSç代ç ï¼æè
ä¿åæ°æ®ï¼ä»ExtJSç代ç å°æ°æ®åºï¼ï¼ä¸è¿°ä¸¤ä¸ªæä½æ¯Proxyçå·¥ä½ï¼Proxyçå¦åå«åExt.data.proxy.Proxy
æ们å¯ä»¥çå°Ext.data.proxy.Proxyæ¯ä¸ä¸ªaliasï¼å®çæ ·åå¦ä¸
Store使ç¨proxy对Modelæ代表ç对象çæ°æ®è¿è¡loadæè saveã
好深å»çä¸å¥è¯ã
ä¸é¢ççStoreææ ·éè¿proxy对Modelè¿è¡æä½ï¼Modelä¸é
ç½®äºProxyï¼
æ们çç½é¡µï¼ä¹å°±æ¯ExtJSçViewé¨åçUIçComponentï¼å¸¸å¸¸ä¼è´è´£æ¾ç¤ºä¸äºæ°æ®ãè¿äºæ°æ®åæ¬åæ¾å¨ç¡¬ççæ°æ®åºä¸ï¼æ¾ç¤ºçæ¶åå¢ï¼éè¦loadé£äºæ°æ®åºä¸çæ°æ®ï¼å°Modelçå®ä¾ä¸ã
ExtJSçåæ³ï¼é¦å
å建ä¸ä¸ªStore
Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'email'],
proxy: {
type: 'rest',
url : '/users'
}
});
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.
ä¸é¢å»StoreçDocçç好äº
// Set up a model to use in our Store
Ext.define('User', {
extend: 'Ext.data.Model',
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: '/users.json',
reader: {
type: 'json',
rootProperty: 'users'
}
},
autoLoad: true
});
In the example above we configured an AJAX proxy to load data from the url '/users.json'. We told our Proxy to use a Ext.data.reader.Json to parse the response from the server into Model object - Ext.data.reader.Json for details.