how to display the grid panel on tooltip using extjs

Question

I want to Add this Grid on tooltip of other grid please help me. Below Code Is Example of My Grid panel Create using Extjs. It check whether the Grid is Already Create so Destory that and display Another Grid. function createAdminGridView() { var myGrid = Ext.getCmp('AdminReportGrid');

if (myGrid) {
    Ext.getCmp('AdminReportGrid').destroy();
}
var extAdminReportGrid = Ext.create('Ext.grid.Panel', {
    renderTo: CFM.Common.Common.GetExtID('divGridViewAdminDisplay', 'ReportAdminOption'),
    requires: [
            'CFM.store.PayeeReportStore',
            'CFM.Common.Common'
        ],
    id: 'AdminReportGrid',
    singleSelect: false,
    columnLines: true,
    width: 700,
    height: 230,
    store: CFM.MySharedData.PayeeReport,
    emptyText: 'No record found.',
    autoCreate: false,
    loadMask: true,
    selModel: {
        selType: 'rowmodel',
        pruneRemoved: false
    },
    multiSelect: true,
    viewConfig: {
        trackOver: false
    },
    verticalScroller: {
        variableRowHeight: true
    },
    plugins: [
                    Ext.create('Ext.grid.plugin.CellEditing', {
                        ptype: 'cellediting',
                        clicksToEdit: 1,
                        listeners: {
                        }
                    }
                            )
                ],
    /* listeners: {
    beforeedit: function (editor, e, eOpts) {
    if ((e.record.get('PaidStatus') == 'True' ))
    {
    alert('Cannot edit column');
    return false;
    }
    else {
    return true;
    }
    }
    },*/
    columns: [
                        {
                            hidden: true,
                            dataIndex: 'CompanyID'

                        },
                         {
                             hidden: true,
                             dataIndex: 'AccountantCommissionID'

                         },
                     {
                         header: 'Company Name',
                         dataIndex: 'CompanyName',
                         width: 190,
                         cls: 'report-grid-header'
                     },
                      {
                          header: 'Accoutant Name',
                          dataIndex: 'AccoutantName',
                          width: 190,
                          cls: 'report-grid-header'
                      },
                {
                    header: 'Payment Date',
                    width: 100,
                    dataIndex: 'PaymentDate',    // the name of the field in the model
                    renderer: Ext.util.Format.dateRenderer('d-m-Y'),    // the column type
                    cls: 'report-grid-header'
                },
                {
                    header: 'Commission Amount',
                    dataIndex: 'CommissionAmount',
                    width: 140,
                    cls: 'report-grid-header',
                    align: 'right',
                    renderer: Ext.util.Format.numberRenderer('000000000.00')


                },
                {
                    xtype: 'checkcolumn',
                    header: 'Paid Status',
                    id: 'PaidStatus',
                    /* header:ColumnHidden,*/
                    dataIndex: 'PaidStatus',
                    width: 80,
                    cls: 'report-grid-header',
                    /* baseCls: 'my-custom-grid-lightskyblue',*/
                    stopSelection: false,
                    listeners: {
                        beforecheckchange: function (column, row, checked, opts) {
                            if (Ext.getCmp('AdminReportGrid').getStore().data.items[row].dirty == false) {
                                var PaidStatus = Ext.getCmp('AdminReportGrid').getStore().data.items[row].data['PaidStatus'];
                                if (PaidStatus == true) {
                                    Ext.MessageBox.alert('Paid Status', 'Commission is Already paid...');
                                    return false;
                                }
                                else {
                                    return true;

                                }
                            }
                        }

                    },
                    editor:
                    {
                        xtype: 'checkboxfield'
                    }


                }
                ]


});

Answer 1

I'm not sure if I understand you question, but you can't put an ExtJS component inside a tooltip.

You can however put some html inside a tooltip, so you should be able to display a basic table as a tooltip.