如何使用extjs在工具提示上顯示網格面板

Question

我想將此網格添加到其他網格的工具提示上，請幫助我。 下面的代碼是My Grid面板的示例使用Extjs創建。 它檢查網格是否已經創建如此的目標，並顯示另一個網格。 函數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

我不確定我是否理解你的問題，但你不能在工具提示中放置ExtJS組件。

但是，您可以在工具提示中放置一些html，因此您應該能夠將基本表格顯示爲工具提示。