[CLOSED] Tooltips Example for GridPanel Rows / Cells Tookit Version 0.8

  1. #1

    [CLOSED] Tooltips Example for GridPanel Rows / Cells Tookit Version 0.8

    Hi guys,

    Is there an example somewhere of creating tooltips for gridpanel rows / cells in toolkit version 0.8?

    Thanks

    Matt
    Last edited by Daniil; Nov 23, 2010 at 1:33 PM. Reason: [CLOSED]
  2. #2
    Hi,

    This functionality was added in ExtJS 3.x which is used in Ext.Net 1.0, but it's absent in ExtJS 2.x which is used in Coolite 0.8.x.

    Fortunately, it was not so difficult to get this behavior working in Coolite 0.8.x.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Ext.IsAjaxRequest)
            {
                Store store = this.Store1;
                store.DataSource = new object[] { 
                                             new object[] {"test11", "test12", "test13"},
                                             new object[] {"test21", "test22", "test23"},
                                             new object[] {"test31", "test32", "test33"}
                                    };
                store.DataBind();
            }
        }
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Coolite 0.8.X Example</title>
        <ext:ScriptContainer runat="server" />
    
        <script type="text/javascript">
            Ext.ToolTip.override({
                onMouseMove: function(e) {
                    var t = this.delegate ? e.getTarget(this.delegate) : this.triggerElement = true;
                    if (t) {
                        this.targetXY = e.getXY();
                        if (t === this.triggerElement) {
                            if (!this.hidden && this.trackMouse) {
                                this.setPagePosition(this.getTargetXY());
                            }
                        } else {
                            this.hide();
                            this.lastActive = new Date(0);
                            this.onTargetOver(e);
                        }
                    } else if (!this.closable && this.isVisible()) {
                        this.hide();
                    }
                },
    
                onTargetOver: function(e) {
                    if (this.disabled || e.within(this.target.dom, true)) {
                        return;
                    }
                    var t = e.getTarget(this.delegate);
                    if (t) {
                        this.triggerElement = t;
                        this.clearTimer('hide');
                        this.targetXY = e.getXY();
                        this.delayShow();
                    }
                }
            });
        </script>
    
        <style type="text/css">
            .myClass {
            }
        </style>
    </head>
    <body>
        <form runat="server">
        <ext:ScriptManager runat="server" />
        <ext:Store ID="Store1" runat="server">
            <Reader>
                <ext:ArrayReader>
                    <Fields>
                        <ext:RecordField Name="test1" />
                        <ext:RecordField Name="test2" />
                        <ext:RecordField Name="test3" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>
        </ext:Store>
        <ext:GridPanel 
            ID="GridPanel1" 
            runat="server" 
            StoreID="Store1" 
            AutoHeight="true">
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test1" DataIndex="test1" />
                    <ext:Column Header="Test2" DataIndex="test2" />
                    <ext:Column Header="Test3" DataIndex="test3" />
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
        <ext:ToolTip 
            ID="RowTip" 
            runat="server" 
            Target="={#{GridPanel1}.getView().mainBody}"
            TrackMouse="true">
            <CustomConfig>
                <ext:ConfigItem Name="delegate" Value=".x-grid3-row" Mode="Value" />
            </CustomConfig>
            <Listeners>
                <Show Handler=" var rowIndex = GridPanel1.view.findRowIndex(this.triggerElement);
                                this.body.dom.innerHTML = 'Data: ' + Store1.getAt(rowIndex).json;" />
            </Listeners>
        </ext:ToolTip>
        </form>
    </body>
    </html>
  3. #3
    Great, thanks for this!
  4. #4
    I tried using the same code snippet but get rowindex value is not being retrieved from the grid. Please advice as need to resolve this issue ASAP.
  5. #5
    Quote Originally Posted by mansi752 View Post
    I tried using the same code snippet but get rowindex value is not being retrieved from the grid. Please advice as need to resolve this issue ASAP.
    Please start a new thread. If you feel two threads are related, please feel free to cross link between the two.
    Geoffrey McGill
    Founder

Similar Threads

  1. [CLOSED] [1.0] GridPanel cell and Tooltips
    By state in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jun 06, 2013, 5:33 AM
  2. [CLOSED] Drag and Drop rows to reorganize for version 1.x
    By dnguyen in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: May 18, 2012, 9:20 PM
  3. Replies: 9
    Last Post: May 09, 2012, 9:22 AM
  4. [CLOSED] Gridpanel with cell tooltips
    By jmcantrell in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 02, 2011, 7:53 AM

Tags for this Thread

Posting Permissions