2

フロントエンドには Calls グリッドがあります。各通話には 1 つ以上のメモが関連付けられている可能性があるため、各通話グリッド行にドリルダウンして関連するメモを表示する機能を追加したいと考えています。

バックエンドでは Ruby on Rails を使用しており、Calls コントローラーは Calls json レコードセットを返し、各行にネストされた Notes があります。ご参考までに、これはto_json(:include => blah)を使用して行われます。

問題は、ユーザーが親グリッドの行をダブルクリックまたは展開したときに表示されるサブグリッド (または単に div) を追加するにはどうすればよいかということです。ネストされた Notes データをそれにバインドするにはどうすればよいですか?

私はそこにいくつかの答えを見つけ、それが私が行く必要のある道の一部になりました. 私がそこからそれを取るのを手伝ってくれた人に感謝します。

4

1 に答える 1

4

あまり説明せずに、コードの投稿に直接ジャンプします。私の json レコードセットにはネストされた Notes レコードがあることに注意してください。クライアントでは、各 Calls レコードにネストされたnotesStoreがあり、関連する Notes が含まれていることを意味します。また、わかりやすくするために、メモの列 (コンテンツ) を 1 つだけ表示しています。

Ext.define('MyApp.view.calls.Grid', {

  alias:                             'widget.callsgrid',
  extend:                            'Ext.grid.Panel',

  ...

  initComponent:                      function(){

     var me = this;

     ...

     var config = {

       ...

       listeners:                  {
            afterrender: function (grid) {
                me.getView().on('expandbody',
                    function (rowNode, record, expandbody) {
                        var targetId = 'CallsGridRow-' + record.get('id');
                        if (Ext.getCmp(targetId + "_grid") == null) {
                            var notesGrid = Ext.create('Ext.grid.Panel', {
                                forceFit: true,
                                renderTo: targetId,
                                id: targetId + "_grid",
                                store: record.notesStore,
                                columns: [
                                    { text: 'Note', dataIndex: 'content', flex: 0 }
                                ]
                            });
                            rowNode.grid = notesGrid;
                            notesGrid.getEl().swallowEvent(['mouseover', 'mousedown', 'click', 'dblclick', 'onRowFocus']);
                            notesGrid.fireEvent("bind", notesGrid, { id: record.get('id') });
                        }
                    });
            }
        },

        ...

      };

      Ext.apply(me, Ext.apply(me.initialConfig, config));
      me.callParent(arguments);
    },

    plugins: [{
      ptype:                'rowexpander',
      pluginId:               'abc',
      rowBodyTpl:            [
        '<div id="CallsGridRow-{id}" ></div>'
      ]
   }]
});
于 2013-03-27T19:13:01.350 に答える