0

Extを使用してグリッドを作成するためのヘルプが必要です。これが私が使用しているコードです：

データソースとして、次のような配列があります。

var listaEventos = [
    {"nu_evento":"1","dt_solicitacao":"2013-01-04 14:29:26","no_evento":"nome do evento","empregado_responsavel":"nome do responsavel","contato":"contato unidade"},
    {"nu_evento":"2","dt_solicitacao":"2013-01-04 14:54:29","no_evento":"nome do evento","empregado_responsavel":"nome do responsavel","contato":"contato unidade"},
    {"nu_evento":"3","dt_solicitacao":"2013-01-04 14:55:35","no_evento":"nome do evento","empregado_responsavel":"nome do responsavel","contato":"contato unidade"},
    {"nu_evento":"4","dt_solicitacao":"2013-01-04 15:04:47","no_evento":"nome do evento","empregado_responsavel":"nome do responsavel","contato":"contato unidade"},
    {"nu_evento":"5","dt_solicitacao":"2013-01-04 15:07:24","no_evento":"nome do evento","empregado_responsavel":"nome do responsavel","contato":"contato unidade"},
    {"nu_evento":"6","dt_solicitacao":"2013-01-04 15:08:07","no_evento":"nome do evento","empregado_responsavel":"nome do responsavel","contato":"contato unidade"},
    {"nu_evento":"7","dt_solicitacao":"2013-01-04 15:17:27","no_evento":"nome do evento","empregado_responsavel":"nome do responsavel","contato":"contato unidade"}
];

この配列はPHPを使用してDBMSからクエリされ、PHPはjsonを使用してHTMLドキュメントに配列を格納します。次に、私のjsコードが配列を取得し、Extグリッドを作成して並べ替えなどを行います。問題は、各配列要素がグリッドの行であり、各オブジェクトフィールドがグリッドの列を表していることをExtに理解させることができないことです。

そのために、私はこのデータモデルを使用します：

Ext.define('eventosDataModel', {
    extend: 'Ext.data.Model',
    fields: [
       {name: 'nu_evento', type: 'string'},
       {name: 'dt_solicitacao', type: 'date',  dateFormat: "Y-m-d H:i:s"},
       {name: 'no_evento', type: 'string'},
       {name: 'empregado_responsavel', type: 'string'},
       {name: 'contato', type: 'string'}
    ],
    idProperty: 'eventos'
});

とこのストア：

var store = Ext.create('Ext.data.ArrayStore', {
    model: 'eventosDataModel',
    data: listaEventos
});

最後に、グリッドを作成します。

var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    stateful: true,
    collapsible: false,
    multiSelect: true,
    stateId: 'stateGrid',
    columns: columnsStructure,
    height: 350,
    width: 1200,
    title: 'Eventos Existentes',
    renderTo: 'eventos-extgrid',
    viewConfig: {
        stripeRows: true,
        enableTextSelection: true
    }
});

分離された変数で指定した列：

var columnsStructure = [
        {
            text     : '#',
            width     : 50,
            sortable : true,
            dataIndex: 'nu_evento'
        },
        {
            text     : 'Nome do Evento',
            width    : 300,
            sortable : true,
            dataIndex: 'no_evento'
        },
        {
            text     : 'Data da Solicitação',
            width    : 200,
            sortable : true,
            renderer : Ext.util.Format.dateRenderer('d/m/Y H:i:s'),
            dataIndex: 'dt_solicitacao'
        },
        {
            text     : 'Empregado Responsável',
            width    : 300,
            sortable : true,
            dataIndex: 'empregado_responsavel'
        },
        {
            text     : 'Contato',
            width    : 345,
            sortable : false,
            dataIndex: 'contato'
        }
    ];

グリッドを適切に作成し、その列を作成し、配列のitensの量と同じ数の行を作成します。しかし、すべてのセルは空白です！

私はそれをうまく機能させて各オブジェクトを配列に変換することができました：

var listaEventos = [
    ["1","2013-01-04 14:29:26","nome do evento","user name","contato unidade"],
    ["2","2013-01-04 14:54:29","nome do evento","user name","contato unidade"],
    ["3","2013-01-04 14:55:35","nome do evento","user name","contato unidade"],
    ["4","2013-01-04 15:04:47","nome do evento","user name","contato unidade"],
    ["5","2013-01-04 15:07:24","nome do evento","user name","contato unidade"],
    ["6","2013-01-04 15:08:07","nome do evento","user name","contato unidade"],
    ["7","2013-01-04 15:17:27","nome do evento","user name","contato unidade"]
];

JSコードの単語に触れることなく、この配列を使用してフィードすると、すべてのデータがグリッドに表示されます。

今は問題なく動作しますが、保守性は非常に悪いです。PHPのDAOをExtのグリッドにリンクするのは、要素がPHPの配列に追加され、JSにリストされる順序だけです。もちろん、順序の重要性を説明する各ファイルに大きなコメントを付けることはできますが、PHP配列キーがJSオブジェクト名に関連し、Extがそれを理解し、単純な順序ではなく名前でバインドする場合は、はるかに優れています。 。

この種のバインディングを作成する方法はありますか？

4

1 に答える 1

1

正しいものを使用する必要がありますidProperty（使用しています）。データ配列にidProperty: 'eventos'は表示されません。あなたの場合、それは私が推測eventosするはずです。idProperty: 'nu_evento'

于 2013-01-10T05:54:28.627 に答える