如何從Ext.data.Store

Question

在這裏顯示的名稱/值對的一個Ext.grid.Panel是商店：

Ext.define('LFinanceCRM.store.Prospect', { 
    extend   : 'Ext.data.Store', 
    buffered  : false, 
    autoLoad  : true, 
    remoteFilter : true, 
    storeId  : 'prospect-store', 
    proxy   : { 
     type  : 'ajax', 
     url   : 'services/getProspect.php', 
     filterParam : undefined, 
     limitParam : undefined, 
     startParam : undefined, 
     pageParam : undefined, 
     idParam  : 'id', 
     reader  : { 
      type : 'json', 
      root : 'prospect' 
     } 
    }, 
    fields  : [ 
     { name : 'id' }, 
     { name : 'value' } 
    ], 
    constructor : function(){ 
     this.callParent(arguments); 
     console.log('new ' + this.self.getName()); 
    } 
}); 

這裏是PHP代碼：

<?php 
include_once 'db.php'; 

header("Content-type: application/json; charset=utf-8"); 

$id  = @mysql_real_escape_string($_GET['id']); 
$link = db_open(); 
$query = "SELECT name, value FROM Pairs WHERE id = '$id'"; 
$result = @mysql_query($query, $link); 
$pairs = array(); 
if($result) { 
    while($row = mysql_fetch_assoc($result)) { 
     $item = Array(); 
     $item['id' ] = $row['name' ]; 
     $item['value'] = $row['value']; 
     $pairs[] = $item; 
    } 
} 
$response = array('prospect' => $pairs); 
print json_encode($response); 
@mysql_free_result($result); 
@mysql_close($link); 
?> 

這裏是從PHP接收的JSON：

{prospect:[ 
    {id:'aaa',value:'vvvv'}, 
    {id:'bbb',value:'vvvv'}, 
    ... 
    {id:'yyy',value:'vvvv'}, 
    {id:'zzz',value:'vvvv'}, 
}] 

這裏是視圖：

Ext.define('LFinanceCRM.view.RawDataView', { 
    extend  : 'Ext.grid.Panel', 
    requires :[], 
    alias  : 'widget.raw-data-view', 
    autoScroll : true, 
    title  : 'Données brutes', 
    columnLines : true, 
    viewConfig : { stripeRows : true }, 
    store  : Ext.data.StoreManager.lookup('prospect-store'), 
    columns  : [{ 
     text  : 'Nom', 
     dataIndex : 'name', 
     sortable : false, 
     width  : '29%' 
    },{ 
     text  : 'Valeur', 
     dataIndex : 'value', 
     sortable : true, 
     width  : '70%' 
    }], 
    constructor : function() { 
     this.callParent(arguments); 
     console.log('new ' + this.self.getName()); 
    } 
}); 

我用煎茶應用構建工具支持MVC模式，這裏是控制器：

Ext.define('LFinanceCRM.controller.Main', { 
    extend : 'Ext.app.Controller', 
    id  : 'theController', 
    onNonLuesSelectionChanged : function(panel, selected, eOpts) { 
     console.log('onNonLuesSelectionChanged: ' + selected[0].data.id); 
     this.getStore('Prospect').load({ 
     id  : selected[0].data.id, 
     callback : function(records, operation, success) { 
      var pairs = []; 
      for(var i = 0; i < records.length; ++i) { 
       pairs.push(records[i].data); 
      } 
      Ext.ComponentQuery.query('client-view')[0].getForm().setValues(pairs); 
      Ext.ComponentQuery.query('immo-view' )[0].getForm().setValues(pairs); 
     } 
     }); 
    }, 
    onSavePairs : function() { 
     console.log('onSavePairs'); 
    }, 
    ... 
    onMail : function() { 
     console.log('onMail'); 
    }, 
    ... 
    stores : ['Prospect'], 
    constructor : function(){ 
     this.callParent(arguments); 
     console.log('new ' + this.self.getName()); 
     this.control({ 
     '#ProspectsTableNonLues' : { selectionchange : this.onNonLuesSelectionChanged }, 
     ... 
     '#savePairsButton'  : { click   : this.onSavePairs    }, 
     ... 
     '#mail'     : { click   : this.onMail     }, 
}); 
    } 
}); 

還未有任何顯示！

我的問題是：如何將商店中的數據轉換爲供應視圖？

Answer 1

爲了避免服務器和其他一些原因，雙要求，我更喜歡分享店裏的實例中間人幾點看法。

正如Prasad K所指出的，必須糾正name和id之間的錯誤。

正如在documentation of Sencha Extjs4.2.2中指出的那樣，當一個存儲由控制器實例化時，它的id就是它的類的名字，甚至設置了一個id（bug？）。

因此，代碼變爲：

Ext.define('LFinanceCRM.view.RawDataView', { 
    extend  : 'Ext.grid.Panel', 
    alias  : 'widget.raw-data-view', 
    autoScroll : true, 
    title  : 'Données brutes', 
    columnLines : true, 
    viewConfig : { stripeRows : true }, 
    store  : 'Prospect', 
    columns  : [{ 
     text  : 'Nom', 
     dataIndex : 'id', 
     sortable : false, 
     width  : '29%' 
    },{ 
     text  : 'Valeur', 
     dataIndex : 'value', 
     sortable : true, 
     width  : '70%' 
    }], 
    constructor : function() { 
     this.callParent(arguments); 
     console.log('new ' + this.self.getName()); 
    } 
}); 

和它的作品！

Answer 2

您的LFinanceCRM.view.RawDataView配置沒有正確定義。

您應該創建存儲的實例分配給網格面板 -

store  : Ext.data.StoreManager.lookup('prospect-store'), 

應列配置改爲

store  : Ext.create("LFinanceCRM.store.Prospect"), 

此外，dataIndex應該是「ID」爲先列而不是「名」

 { 
      text  : 'Nom', 
      dataIndex : 'name', 
      sortable : false, 
      width  : 200 
     } 

應改爲

 { 
      text  : 'Nom', 
      dataIndex : 'id', 
      sortable : false, 
      width  : 200 
     } 

這個替換您的LFinanceCRM.view.RawDataView碼 -

Ext.define('LFinanceCRM.view.RawDataView', { 
     extend  : 'Ext.grid.Panel', 
     alias  : 'widget.raw-data-view', 
     autoScroll : true, 
     title  : 'Données brutes', 
     columnLines : true, 
     viewConfig : { stripeRows : true }, 
     store  : Ext.create("LFinanceCRM.store.Prospect"), 
     columns  : [{ 
      text  : 'Nom', 
      dataIndex : 'id', 
      sortable : false, 
      width  : 200 
     },{ 
      text  : 'Valeur', 
      dataIndex : 'value', 
      sortable : true, 
      width  : 200 
     }], 
     constructor : function() { 
      this.callParent(arguments); 
      console.log('new ' + this.self.getName()); 
     } 
    });