2011-09-20 51 views
1

注:作者是新的EXT JS和嘗試使用MVC在他的項目動態模型,存儲和意見 - 以最佳方式

想象我有它的數據模型是不固定的Web服務。我希望動態創建我的模型,從中動態創建存儲,並從而動態創建其數據位於這些存儲中的組件。

允許通過觀察模型的樣本類定義開始:

 
Ext.define('MNESIA.model.User', { 
    extend: 'Ext.data.Model' 
}); 

在該模型中的定義,我已經離開了在配置對象的'fields'參數。這是因爲每當我創建一個上述類型的模型的實例時,我想動態地給它的字段定義,換句話說,我可以有這個模型的許多實例,但它們都具有不同的參數'fields'的定義。

在這裏,我創建存儲的定義,像這樣:

 
Ext.define('MNESIA.store.Users', { 
    extend: 'Ext.data.Store', 
    autoLoad: true 
    } 
}); 

,我有一個店的定義。我忽略了'model'參數,因爲我將它動態地附加到這個類的每個實例。事實上,即使是'data''proxy'設置也沒有提到,因爲我想在這個商店的實例化過程中對它們進行賦值。

從那裏,我想擁有動態視圖,由動態商店驅動。下面在這裏我有一個網格

 
Ext.define('MNESIA.view.Grid' , { 
    extend: 'Ext.grid.Panel', 
    alias : 'widget.mygrid', 
    width: 700, 
    height: 500 
}); 

的定義,我已經離開了在網格規格參數如下:'columns''store''title'。這是因爲我打算將許多網格作爲上述規範的實例創建,但仍具有動態存儲,標題和列定義。

在我的控制器的一些地方,我有一個看起來像這樣的代碼:

 
    function() { 
     var SomeBigConfig = connect2Server(); 
     /* 
     where: 
      SomeBigConfig = [   
           {"model":[ 
            {"fields": 
             ["SurName","FirstName","OtherName"] 
            } 
           ] 
           },       
           {"store":[ 
            {"data": 
             {"items":[ 
              {"SurName":"Muzaaya","FirstName":"Joshua","OtherName":"Nsubuga"}, 
              {"SurName":"Zziwa","FirstName":"Shamusudeen","OtherName":"Haji"}, 
              ... 
              ] 
             }        
            }, 
            {"proxy": { 
             "type": "memory",         
             "reader": { 
              "type": "json", 
              "root": "items" 
             } 
             } 
            }        
           ] 
           },       
           {"grid",[ 
              {"title":"Some Dynamic Title From Web Service"}, 
              {"columns": [{ 
               "header": "SurName", 
               "dataIndex": "SurName", 
               "flex": 1 
              },{ 
               "header": "FirstName", 
               "dataIndex": "FirstName", 
               "flex": 1 
              }, 
              { 
               "header": "OtherName", 
               "dataIndex": "OtherName", 
               "flex": 1 
              } 
              ]}       
             ] 
            } 
          ] 

     */ 
     var TheModel = Ext.create('MNESIA.model.User',{ 
         fields: SomeBigConfig[0].model[0].fields 
       }); 
     var TheStore = Ext.create('MNESIA.store.Users',{ 
         storeId: 'users', 
         model: TheModel, 
         data: SomeBigConfig[1].store[0].data, 
         proxy: SomeBigConfig[1].store[1].proxy 
       }); 
     var grid = Ext.create('MNESIA.view.Grid',{   
         store: TheStore, 
         title: SomeBigConfig[2].grid[0].title, 
         columns: SomeBigConfig[2].grid[1].columns      
       }); 

     // From here i draw the grid anywhere on the, page say by 

     grid.renderTo = Ext.getBody(); 
     // end function 
     } 

現在這種型號,然後存儲,然後網格動態創建的並導致到內存浪費,所以這將每次我們想要銷燬該組件時,都需要調用每個組件的銷燬方法。

問題:

QN 1:是否MVC實現EXT JS的4許可證嗎?

Qn 2:我如何通過使用我的新類的xtypes獲得相同的功能。例如說:

 
    { 
    xtype: 'mygrid', 
    store: TheStore, 
    title: SomeBigConfig[2].grid[0].title, 
    columns: SomeBigConfig[2].grid[1].columns 
    } 

QN 3:如果我寫了上面真正起作用的,是務實正確的,我可以將此像面板,TabPanels,樹(因此他們CONFIGS發送所有組件由遠程服務器)?

Qn 4:如果我有控制器A和B,控制器A的視圖規範爲[C,D],控制器B的視圖爲[E,F],如果產生的動作是正確的通過查看:E由控制器A處理?即控制器能否處理未在其視圖配置中註冊的視圖的操作?

注:對於Ext JS來說,這是相當新的事物,但很想了解更多。請教我如何改進我的EXT JS學習曲線。謝謝

回答

1

在我的選擇中,您的模型必須映射到要渲染到視圖的商店,例如,如果實現像這樣的模型零件

 
{"model":[{"fields":[{name:'name',type:'string'}, 
      {name:'id',type:'string'}]}]}
,這將很容易映射到商店以供視圖渲染它。

+0

所以我的模型出了問題?我只有一個簡單的模型規範來說明我的新動態MVC設計模式 –