無論前端框架多麼複雜, 最基本的技術是不變的:
- HTML, Javascript , CSS ;
- Json , Javascript 函數與面向對象, 原型繼承機制。
Extjs 對數據如何與組件交互和組件展現數據的層次性劃分是比較清晰的, 值得學習和借鑑。
數據展現基本機制
關於其中的實現原理, 應該與服務端相應技術類似, 只是使用 Javascript 實現而已:
- Model : 類似於 Java 端的 DataObject, 或 JavaBean;
- Reader: 其核心技術應該是 JSON 解析。 使用一個 JSON 工具包, 解析傳入的字符串,並轉化爲 Model 實例集
- Writer: 將 Model 實例數據及請求進行修改、拼接、編碼併發送, 也是使用 JSON 工具包;
同 Reader 相似, 過程相逆; - Proxy: 接收服務端的數據並委託 Reader 進行解析, 或者接收客戶端的數據,委託 Writer 進行處理;
從圖中可以看出, 它是樞紐角色; - Store: 數據的最大管理者, 它封裝 Proxy, Model , Data 及解析而得的 Model 實例集, 單獨與組件進行交互;
Store 的實現 在 Java 端應該是不難模擬的, 可以練練手。
組件展示:
- 組件展示主要是將 Store 裏的數據與 HTML 片段, 生成最終的HTML文本,並交給瀏覽器進行顯示;
- HTML 生成: 使用模板 或 DOM 元素生成器;
- 模板生成HTML: 可以使用正則表達式來匹配和填充;
- DOM元素生成器: 爲原生的HTML標籤提供一層封裝, 變成 Extjs 組件。
示例代碼:
目錄:
應用啓動: app.js
Ext.Loader.setConfig({enabled:true, disableCache:true});
Ext.application({
name:'Extjstudy',
appFolder:"app",
autoCreateViewport: true,
requires:[
'Extjstudy.global.ExtjstudyTemplates'
],
stores:['VmSnapshot'],
launch:function()
{
}
});
總視圖文件: Viewport.js
Ext.define('Extjstudy.view.Viewport', {
extend:'Ext.container.Viewport',
layout:'border',
requires:[
'Extjstudy.view.Entrance'
],
items: [
{
xtype: 'container',
region: 'north',
html:'<div>Extjs Study and Explore </div>',
style: {
padding: '10px',
font: '1.2em'
}
},
{
xtype:'entrance',
region: 'center'
}
]
});
視圖文件: Entrance.js
Ext.define('Extjstudy.view.Entrance', {
extend: 'Ext.panel.Panel',
alias: 'widget.entrance',
title: 'Customized View Demo',
layout: 'fit',
items: [
{
xtype: 'dataview',
store: 'VmSnapshot',
tpl: et.deviceSnapshotTpl,
itemSelector: 'div.vmdeviceSnapshots',
width: '800'
}
]
});
模板文件: ExtjstudyTemplates.js
Ext.define('Extjstudy.global.ExtjstudyTemplates', {
deviceSnapshotTpl: new Ext.XTemplate(
'<tpl for=".">',
'<div class="vmdeviceSnapshots" style="margin:15px 10px 30px 15px">',
'<p>磁盤: {device_no} ( {device_type}, {device_size}G ) </p>',
'<p>快照詳情:</p>',
'<table border="1" width="95%" cellpadding="3" class="moonmmTable">',
'<tr><th>快照ID</th><th>創建時間</th><th>進度</th><th>Image_no</th><th>所屬用戶</th></tr>',
'<tpl for="snapshotExts">',
'<tr align="center"><td> {snapshot_id}</td><td>{create_time}</td><td>{progress}</td><td>{image_no}</td><td>{owner}</td> </tr>',
'</tpl>',
'</table>',
'</div></tpl><br/><br/>'
),
});
var et = Ext.create('Extjstudy.global.ExtjstudyTemplates');
Model: VmSnapshot.js
Ext.define('Extjstudy.model.VmSnapshot', {
extend: 'Ext.data.Model',
fields:[
{ name: 'vm_name', type: 'string' } ,
{ name: 'vm_status', type: 'string' } ,
{ name: 'device_no', type: 'string' } ,
{ name: 'device_type', type: 'string' } ,
{ name: 'device_size', type: 'string' } ,
{ name: 'snapshotExts', type: 'auto' } ,
{ name: 'snapshots', type: 'auto' }
]
});
Store: VmSnapshot.js
Ext.define('Extjstudy.store.VmSnapshot', {
extend: 'Ext.data.Store',
model: 'Extjstudy.model.VmSnapshot',
data:[
{"vm_name":"change-test01","vm_status":"Shutting","device_no":"3-10057140","mode":"system","device_size":60,"device_type":"system","safety_quota":1,
"snapshotExts":[{"snapshot_id":"3-10057140-607877","snapshot_name":"","progress":"100%","create_time":"2013-05-22 18:02:57","image_no":"redhat54.64.20120823.qa_rpc.vhd","owner":"229"},
{"snapshot_id":"3-10057140-607881","snapshot_name":"","progress":"100%","create_time":"2013-05-22 19:05:31","image_no":"redhat54.64.20120823.qa_rpc.vhd","owner":"229"},
{"snapshot_id":"3-10057140-607884","snapshot_name":"","progress":"100%","create_time":"2013-05-22 19:53:02","image_no":"redhat54.64.20120823.qa_rpc.vhd","owner":"229"}],
"snapshots":[{"snapshot":"3-10057140-607877"},{"snapshot":"3-10057140-607881"},{"snapshot":"3-10057140-607884"}]},
{"vm_name":"change-test01","vm_status":"Shutting","device_no":"3-10057141","mode":"data","device_size":40,"device_type":"data","safety_quota":1,
"snapshotExts":[{"snapshot_id":"3-10057141-607879","snapshot_name":"","progress":"100%","create_time":"2013-05-22 18:06:01","image_no":"","owner":"229"}],
"snapshots":[{"snapshot":"3-10057141-607879"}]}
]
})
結果: