Extjs資料展現原理解析（上）

    

       無論前端架構多麼複雜， 最基本的技術是不變的：   
                    HTML,  Javascript , CSS ;                  Json ,   Javascript 函數與物件導向， 原型繼承機制。
        要弄懂前端架構， 上述前端基礎一定要非常熟練甚至精通。        Extjs 對資料如何與組件互動和組件展現資料的層次性劃分是比較清晰的， 值得學習和借鑒。         資料展現基本機制          

  關於其中的實現原理， 應該與服務端相應技術類似， 只是使用 Javascript 實現而已：

  1.  Model :   類似於 Java 端的 DataObject， 或 JavaBean；

  2.  Reader:   其核心技術應該是 JSON 解析。 使用一個 JSON 工具包， 解析傳入的字串，並轉化為 Model 執行個體集，

  3.  Writer:     將 Model 執行個體資料及請求進行修改、拼接、編碼並發送， 也是使用 JSON 工具包；

                       同 Reader 相似， 過程相逆；  

  4.  Proxy:      接收服務端的資料並委託 Reader 進行解析， 或者接收用戶端的資料，委託 Writer 進行處理；

                       可以看出， 它是樞紐角色；

  5.  Store:       資料的最大管理者，  它封裝 Proxy, Model , Data 及解析而得的 Model 執行個體集， 單獨與組件進行互動；
  Store 的實現 在 Java  端應該是不難類比的， 可以練練手。 
  組件展示：

  1.   組件展示主要是將 Store 裡的資料與 HTML 片段， 產生最終的HTML文本，並交給瀏覽器進行顯示；

  2.   HTML 產生：  使用模板 或 DOM 元素產生器；

  3.   模板產生HTML： 可以使用Regex來匹配和填充；

  4.   DOM元素產生器： 為原生的HTML標籤提供一層封裝， 變成 Extjs 組件。
 範例程式碼： （User 相關檔案是預設MAVEN工程所配置的DEMO，不用理會） 目錄：
應用啟動：  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"}]}              ]})

結果：

  具體細節繼續學習中。。。。。。