Question

这是商店：

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());
   }
});

我使用Sencha app build工具支持的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

您的 LFinanceCRM.view.RawDataView 配置未正确定义。

您应该创建Store的实例以分配给网格面板 -

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

应改为

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

同样在列配置中，dataIndex对于第一列而不是“name”

应为“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());
        }
    });

Answer 2

为了避免对服务器的双重请求以及其他一些原因，我更喜欢在多个视图之间共享商店实例。

正如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());
   }
});

它有效！

如何从Ext.data.Store中将名称/值对显示到Ext.grid.Panel中

2 个答案: