[CLOSED] GridPanel Cell Tooltips doesn't work in user control

  1. #1

    [CLOSED] GridPanel Cell Tooltips doesn't work in user control

    Hello guys

    I have problem with Cell tooltips for grid after I moved this grid to user control

    My code:
        <ext:Viewport ID="vplSubmittalContent" runat="server" Layout="Fit">
            <Content>
                    <ctrlTest:ctrlTest ID="ctrSubmittalsRegistry" runat="server" />
            </Content>
        </ext:Viewport>
    and my user control
    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ctrlTest.ascx.cs" Inherits="test.ctrlTest" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                };
    
                this.Store1.DataBind();
            }
        }
    </script>
    <ext:XScript ID="XScript1" runat="server">
    <script type="text/javascript">
        var template = '<span style="color:{0};">{1}</span>';
    
        var change = function (value) {
            return String.format(template, (value > 0) ? "green" : "red", value);
        }
    
        var pctChange = function (value) {
            return String.format(template, (value > 0) ? "green" : "red", value + "%");
        }
    
    
        var showTip = function () {
            alert(1);
            var rowIndex = SubRegistryGrid.view.findRowIndex(this.triggerElement),
                    cellIndex = SubRegistryGrid.view.findCellIndex(this.triggerElement),
                    record = strSubmittalRegistryDetail.getAt(rowIndex),
                    fieldName = SubRegistryGrid.getColumnModel().getDataIndex(cellIndex),
                    data = record.get(fieldName);
    
            this.body.dom.innerHTML = data;
        }
      </script>
    </ext:XScript>
    <ext:Store ID="Store1" runat="server">
        <Reader>
            <ext:ArrayReader>
                <Fields>
                    <ext:RecordField Name="company" />
                    <ext:RecordField Name="price" Type="Float" />
                    <ext:RecordField Name="change" Type="Float" />
                    <ext:RecordField Name="pctChange" Type="Float" />
                    <ext:RecordField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                </Fields>
            </ext:ArrayReader>
        </Reader>
    </ext:Store>
    <ext:BorderLayout ID="SubmittalRegistryContent" runat="server" Layout="border">
        <center>
            <ext:Panel ID="pnlMainGrid" runat="server" Title="Recently Accessed" Header="false"
                AutoScroll="true" Layout="Fit">
                <Items>
                    <ext:GridPanel ID="GridPanel2" runat="server" StoreID="Store1" StripeRows="true"
                        Title="Array Grid" TrackMouseOver="true" Width="600" Height="350" AutoExpandColumn="Company">
                        <ColumnModel runat="server">
                            <Columns>
                                <ext:Column ColumnID="Company" Header="Company" DataIndex="company" />
                                <ext:Column Header="Price" DataIndex="price">
                                    <Renderer Format="UsMoney" />
                                </ext:Column>
                                <ext:Column Header="Change" DataIndex="change">
                                    <Renderer Fn="change" />
                                </ext:Column>
                                <ext:Column Header="Change" DataIndex="pctChange">
                                    <Renderer Fn="pctChange" />
                                </ext:Column>
                                <ext:DateColumn Header="Last Updated" DataIndex="lastChange" />
                            </Columns>
                        </ColumnModel>
                        <SelectionModel>
                            <ext:RowSelectionModel ID="RowSelectionModel2" runat="server" SingleSelect="true" />
                        </SelectionModel>
                    </ext:GridPanel>
                </Items>
            </ext:Panel>
        </center>
    </ext:BorderLayout>
    <ext:ToolTip ID="ToolTip1" runat="server" Target="={GridPanel1.getView().mainBody}"
        Delegate=".x-grid3-cell" TrackMouse="true">
        <Listeners>
            <Show Fn="showTip" />
        </Listeners>
    </ext:ToolTip>
    I cant find good place for Tooltip it doesn't work. It's newer call function showTip.
    Could you please explain how work tooltip and why it doesn't work.
    Thanks.
    Last edited by Daniil; May 09, 2011 at 9:03 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Client id of GridPanel1 is not 'GridPanel1' when you place it in a user control.

    Two ways:

    1. Replace
    Target="={GridPanel1.getView().mainBody}"
    with
    Target="={#{GridPanel1}.getView().mainBody}"
    or

    2. Set IDMode="Explicit" for GridPanel.
  3. #3
    Yep it's works. Thanks

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] Doesn't work ToolTips for ComboBox Items
    By ViDom in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Nov 15, 2011, 3:30 PM
  3. [CLOSED] Gridpanel with cell tooltips
    By jmcantrell in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 02, 2011, 7:53 AM
  4. [CLOSED] Direct Methods with return doesn't work in user control
    By sharif in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Nov 13, 2010, 12:00 PM
  5. Replies: 4
    Last Post: Feb 09, 2010, 6:14 PM

Posting Permissions