Results 1 to 3 of 3

Thread: How to show tooltip with ajax loaded panel when mouse over grid cell

  1. #1
    Sencha User
    Join Date
    Feb 2010
    Location
    Figueres (Spain)
    Posts
    370
    Answers
    15

    Default How to show tooltip with ajax loaded panel when mouse over grid cell

    Is it possible to show a dynamically ajax post loaded panel like a tooltip when user puts mouse over some grid cell ? or on click on the grid cell ?

    Manel
    -------------------
    Manel Juarez

  2. #2
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,102
    Answers
    113

    Default

    you can take a look at the following example on how to add components to tooltip:

    http://docs.sencha.com/extjs/4.2.2/#...TipsChart.html

    may be you can try it for grid.

  3. #3
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,102
    Answers
    113

    Default

    here is an example:

    Code:
    var pieModel = [{
            name: 'data1',
            data: 10
        }, {
            name: 'data2',
            data: 10
        }, {
            name: 'data3',
            data: 10
        }, {
            name: 'data4',
            data: 10
        }, {
            name: 'data5',
            data: 10
        }];
        
        var pieStore = Ext.create('Ext.data.JsonStore', {
            fields: ['name', 'data'],
            data: pieModel
        });
        
        var pieChart = Ext.create('Ext.chart.Chart', {
            width: 100,
            height: 100,
            animate: false,
            store: pieStore,
            shadow: false,
            insetPadding: 0,
            theme: 'Base:gradients',
            series: [{
                type: 'pie',
                field: 'data',
                showInLegend: false,
                label: {
                    field: 'name',
                    display: 'rotate',
                    contrast: true,
                    font: '9px Arial'
                }
            }]
        });
    
    var store = Ext.create('Ext.data.ArrayStore', {
        fields: ['company', 'price', 'change'],
        data: [
            ['3m Co',                               71.72, 0.02],
            ['Alcoa Inc',                           29.01, 0.42],
            ['Altria Group Inc',                    83.81, 0.28],
            ['American Express Company',            52.55, 0.01],
            ['American International Group, Inc.',  64.13, 0.31],
            ['AT&T Inc.',                           31.61, -0.48]
        ]
    });
    
    var grid = Ext.create('Ext.grid.Panel', {
        title: 'Array Grid',
        store: store,
        columns: [
            {text: 'Company', flex: 1, dataIndex: 'company'},
            {text: 'Price', width: 75, dataIndex: 'price'},
            {text: 'Change', width: 75, dataIndex: 'change'}
        ],
        height: 200,
        width: 400,
        renderTo: Ext.getBody()
    });
    
    var view = grid.getView();
    var tip = Ext.create('Ext.tip.ToolTip', {
        target: view.el,
        delegate: view.itemSelector,
        trackMouse: true,
        renderTo: Ext.getBody(),
        layout: 'fit',
        items: [pieChart]
    });

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •