EXT JS如何獲取數據

Question

我是第一次學習EXT Js和示例http://examples.sencha.com/extjs/6.2.0/examples/kitchensink/#array-grid我試圖找出如何填充表並找不到表內容的來源。 以前任何使用過EXT Js的人都應該發現尋找數據源的重要性，或者推薦如何以及如何在像jsfiddle這樣的平臺上測試extjs。

Answer 1

您可以通過許多過程獲取網格數據。

第一種方式是將數據綁定到代碼本身。

但在此之前，如何綁定數據以及它如何在網格中工作，您需要創建data store，然後將此存儲綁定到您的網格store。

下面是一個例子代碼：

Ext.create('Ext.data.Store', { 
    storeId: 'simpsonsStore', 
    fields:[ 'name', 'email', 'phone'], 
    data: [ 
     { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' }, 
     { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' }, 
     { name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' }, 
     { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' } 
    ] 
}); 

Ext.create('Ext.grid.Panel', { 
    title: 'Simpsons', 
    store: Ext.data.StoreManager.lookup('simpsonsStore'), 
    columns: [ 
     { text: 'Name', dataIndex: 'name' }, 
     { text: 'Email', dataIndex: 'email', flex: 1 }, 
     { text: 'Phone', dataIndex: 'phone' } 
    ], 
    height: 200, 
    width: 400, 
    renderTo: Ext.getBody() 
}); 

這裏是煎茶搗鼓你。 Sencha Fiddle

您可以從JSON或XML獲取數據的第二種方式。在這種情況下，您還必須創建一個data store（可能是json store或Array store），然後再綁定到網格。只有數據部分會改變。在這裏你需要通過使用一些Ajax調用從json中獲取數據。

以下是示例代碼。

var store = new Ext.data.JsonStore({ 
     // store configs 
     storeId: 'myStore', 

     proxy: { 
      type: 'ajax', 
      url: 'get-images.php', 
      reader: { 
       type: 'json', 
       rootProperty: 'images' 
      } 
     }, 

    //alternatively, a Ext.data.Model name can be given (see Ext.data.Store for an example) 
    fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date'}] 
}); 

然後調用你的綁定你的商店，就像我們在前面的代碼中做的那樣。 我會建議你請通過此鏈接

有用的鏈接

Grid PAnel _網格面板 Data Store - 數據存儲 JSON STore