煎茶ExtJS的MVC - 在運行時指定數據源

Question

我想寫沿着這些路線的證明的概念應用：

查看

- a URL text input field at top with Go button 
- a big DIV underneath consisting of the rest of the view 

控制器

- upon Go pressed, validate the URL text 
- set up the URL to the data source 
- read data from the data source 
- create a nested DIV element for each data, apply CSS rules 
- add the element to the big DIV 

型號

- define the fields 
- define the default ordering 

CSS

- define the styles 

首先，我在ExtJS中做了什麼以上的工作，或者我會爲框架而戰嗎？特別是將純HTML插入爲元素節點。

其次，有沒有人知道GPL下的現有項目可以作爲起點？到目前爲止，我所看到的是帶有硬編碼並設置爲自動加載的URL的華麗示例。

Answer 1

沒有什麼可怕的或以其他方式干擾你寫的東西。

儘管沒有多少廣告，ExtJS處理自定義HTML &很好。您可以使用html或tpl配置選項設置一些。後者由XTemplates提供支持，因此您可以執行循環等。使用這些選項和/或自定義CSS時，Ext將計算圍繞渲染結果的佈局，自動解決您的自定義樣式。現在，在實踐中，這對框架來說是一大堆工作，它並不總是按預期工作，並且在某些瀏覽器上（如當然不是那麼老的IE）根本無法工作。你應該知道的一個大缺陷是，你應該總是在你的CSS中使用px的整數值，因爲如果一個維度在px中解析爲十進制值，那麼Ext就會窒息。

也就是說，由於您顯然要使用模型備份數據，因此您應該使用dataview。這是一個允許您在常規Ext商店中使用自定義HTML的組件。然後它爲項目選擇，分頁等提供好東西。它是其他高級數據視圖的基類，如Ext網格。

關於URL，您不一定必須在模型的代理（或其他地方）對它們進行硬編碼。您可以將URL傳遞給現有商店的load方法（如文檔here所述）。

最後，我不知道現有的項目，但您的POC非常簡單，所以這裏有一個fiddle以幫助您入門。該代碼不是100％乾淨的，特別是在一個文件中定義了所有內容，因此缺少所有的requires ......但它說明了您詢問的大部分要點。閱讀有關用於瞭解如何超越此目的的組件/方法的文檔。

這裏的小提琴的代碼：

Ext.define('Foo.model.Item', { 
    extend: 'Ext.data.Model', 
    fields: ['name'] 
}); 

Ext.define('Foo.view.MainController', { 
    extend: 'Ext.app.ViewController', 

    alias: 'controller.main', 

    onGo: function() { 
     var view = this.getView(), 
      url = view.down('textfield').getValue(), 
      dataview = view.down('dataview'), 
      store = dataview.getStore(); 
     if (this.isValidUrl(url)) { 
      store.load({url: url}); 
     } else { 
      Ext.Msg.alert(
       "Invalid URL", 
       "This URL cannot be loaded here: " + url 
      ); 
     } 
    }, 

    // private 
    isValidUrl: function(url) { 
     return ['data1.json', 'data2.json'].indexOf(url) !== -1; 
    } 
}); 

Ext.define('Foo.view.Main', { 
    extend: 'Ext.Panel', 

    xtype: 'main', 
    controller: 'main', 

    layout: { 
     type: 'vbox', 
     align: 'stretch' 
    }, 

    items: [{ 
     xtype: 'container', 
     layout: 'hbox', 
     margin: 3, 
     defaults: { 
      margin: 3 
     }, 
     items: [{ 
      flex: 1, 
      xtype: 'textfield', 
      emptyText: "Valid inputs are 'data1.json' or 'data2.json'", 
      listeners: { 
       specialkey: function(field, e) { 
        if (e.getKey() === e.ENTER) { 
         // custom event, for the fun of it 
         field.fireEvent('enterkey', field, e); 
        } 
       }, 
       // the custom can be bound to controller in "modern ext" way 
       enterkey: 'onGo' 
      } 
     },{ 
      xtype: 'button', 
      text: "Go", 
      handler: 'onGo' 
     }] 
    },{ 
     flex: 1, 
     xtype: 'dataview', 
     margin: '0 6 6 6', 
     cls: 'my-dataview', // for CSS styling 
     store: { 
      model: 'Foo.model.Item', 
      autoLoad: false 
      // default proxy is ajax and default reader is json, 
      // which is cool for us 
     }, 
     tpl: '<tpl for=".">' + '<div class="item">{name}</div>' + '</tpl>', 
     itemSelector: '.item' 
    }] 
}); 

Ext.application({ 
    name : 'Foo', 
    mainView: 'Foo.view.Main' 
}); 

一些CSS的數據視圖：

.my-dataview .item { 
    padding: 1em; 
    border: 1px solid cyan; 
    color: magenta; 
    float: left; 
    margin: 6px; 
    width: 100px; 
} 

和示例JSON響應（這是最低限度是功能性...閱讀關於代理&讀者去進一步）：

[{ 
    name: 'Foo' 
},{ 
    name: 'Bar' 
},{ 
    name: 'Baz' 
}]