You often want to display tooltip using cell data when data length
overflows column width in your gridpanel. You will get an example to show
tooltip with gridpanel cell data here: http://examples1.ext.net/#/Miscellaneous/ToolTips/GridPanel_Cell_Tooltip/
But this is not working properly when it is included in some
project especially if you have master page based design. I have tried this in
my project and it worked properly with little bit changes. Here I want to share
the codes with you guys:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<link href="../Style/examples.css"
rel="stylesheet"
type="text/css"
/>
<ext:XScript ID="XScript1"
runat="server">
<script type="text/javascript">
var showTip = function
() {
var rowIndex =
#{gpList}.view.findRowIndex(this.triggerElement),
cellIndex = #{gpList}.view.findCellIndex(this.triggerElement),
record =
#{gpListStore}.getAt(rowIndex),
fieldName = #{gpList}.getColumnModel().getDataIndex(cellIndex),
data = record.get(fieldName);
if (data ==null){
this.body.dom.innerHTML = "";
}
else{
this.body.dom.innerHTML = data;
};
};
</script>
</ext:XScript>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<ext:ResourceManager ID="rcm" runat="server">
</ext:ResourceManager>
<ext:Hidden ID="hfPK" runat="server">
</ext:Hidden>
<ext:TabPanel ID="tPnlMain"
runat="server"
ActiveTabIndex="0"
AnchorHorizontal="100%"
Height="500"
Plain="true"
Visible="true"
Width="1024">
<Items>
<ext:Panel ID="Tab2" runat="server" Title="Employee Search" Padding="1" AutoScroll="true">
<Items>
<ext:RowLayout runat="server">
<Rows>
<ext:LayoutRow RowHeight=".25">
<ext:Panel ID="Panel1" runat="server"
Header="false"
Padding="1"
AutoScroll="true">
<Items>
</Items>
</ext:Panel>
</ext:LayoutRow>
<ext:LayoutRow RowHeight=".75">
<ext:Panel ID="Panel3" runat="server"
Title="Employee
List" Padding="1" AutoScroll="true">
<Items>
<ext:GridPanel ID="gpList" runat="server"
StripeRows="true"
AutoExpandColumn="EmployeeName"
Collapsible="true"
AnchorHorizontal="100%"
Height="322"
TrackMouseOver="true">
<Store>
<ext:Store ID="gpListStore"
runat="server">
<Reader>
<ext:JsonReader IDProperty="EmployeeId">
<Fields>
<ext:RecordField Name="EmployeeId"
/>
<ext:RecordField Name="EmployeeName"
/>
<ext:RecordField Name="EnrollId"
/>
<ext:RecordField Name="FirstName"
/>
<ext:RecordField Name="MiddleName"
/>
<ext:RecordField Name="LastName"
/>
<ext:RecordField Name="AddressLine1"
/>
<ext:RecordField Name="DepartmentId"
/>
<ext:RecordField Name="DesignationId"
/>
<ext:RecordField Name="PolicyId"
/>
<ext:RecordField Name="CardNumber"
/>
<ext:RecordField Name="DesignationName" />
<ext:RecordField Name="DeptName"
/>
<ext:RecordField Name="SbuName"
/>
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1"
runat="server">
<Columns>
<ext:RowNumbererColumn />
<ext:CommandColumn Header="Action"
Width="65">
<Commands>
<ext:GridCommand Icon="ApplicationEdit"
CommandName="Edit">
<ToolTip
Text="Edit"
/>
</ext:GridCommand>
</Commands>
</ext:CommandColumn>
<ext:Column ColumnID="cEnrollId"
Header="Enroll
Id" DataIndex="EnrollId" Width="50" />
<ext:Column ColumnID="cStaffCode"
Header="Employee
Code" DataIndex="StaffCode" Width="70" />
<ext:Column ColumnID="cEmployeeName"
Header="EmployeeName"
DataIndex="EmployeeName"
Width="130"
/>
<ext:Column ColumnID="cDesignationName"
Header="Designation"
DataIndex="DesignationName"
Width="150" />
<ext:Column ColumnID="cDepartmentName"
Header="Department"
DataIndex="DeptName"
Width="100"
/>
<ext:Column ColumnID="cSbuId"
Header="Branch"
DataIndex="SbuName"
/>
<ext:Column ColumnID="cAddressLine1"
Header="Address"
DataIndex="AddressLine1"
Width="180"
/>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1"
runat="server"
SingleSelect="true"
/>
</SelectionModel>
<BottomBar>
<ext:PagingToolbar ID="gpListPager"
runat="server"
PageSize="20"
/>
</BottomBar>
<Listeners>
<Command
Handler="Ext.net.DirectMethods.ExecuteActionCommand(command,
record.data.EmployeeId, record.data.EnrollId);" />
</Listeners>
<ToolTips>
<ext:ToolTip ID="RowTip" runat="server"
Target="#{gpList}.getView().mainBody"
Delegate=".x-grid3-cell"
ShowDelay="0"
TrackMouse="true">
<Listeners>
<Show
Fn="showTip"
/>
</Listeners>
</ext:ToolTip>
</ToolTips>
</ext:GridPanel>
</Items>
</ext:Panel>
</ext:LayoutRow>
</Rows>
</ext:RowLayout>
</Items>
</ext:Panel>
</Items>
</ext:TabPanel>
</asp:Content>
Hope this will help my friends.