PDA

View Full Version : [CLOSED] Tooltip not working within ViewPort



RCN
Oct 08, 2012, 1:45 PM
Hi folks, I am trying to implement a GridPanel Cell Tooltip inside a Viewport, as shown in the following example: http://examples2.ext.net/#/Miscellaneous/ToolTips/GridPanel_Cell_Tooltip/

I noticed that there is an issue when the GridPanel is inside a Viewport: http://forums.ext.net/showthread.php?20888-CLOSED-ToolTip-not-working-with-Viewport. I implemented it as show in the previous example but i was not able to achieve the same results.

Any ideas to overcome this issue?

1 - JavaScript


<script type="text/javascript">
var showToolTip = function (toolTip, grid) {
alert("hier");
var cellIndex = grid.view.findCellIndex(toolTip.triggerElement);
var fieldName = grid.getColumnModel().getDataIndex(cellIndex);
var rowIndex = grid.view.findRowIndex(toolTip.triggerElement);
var record = StoreEventList.getAt(rowIndex);
data = record.get(column.dataIndex);
toolTip.update(data);
};
</script>


2 - View


<ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
<Items>
<ext:GridPanel ID="GridPanel1" runat="server" Region="Center" Title="Plants" Frame="false">
<Store>
<ext:Store runat="server" ID="Store2">
<Proxy>
<ext:AjaxProxy Url="/Example/LoadFakeRecords/">
<ActionMethods Read="POST" />
<Reader>
<ext:JsonReader Root="data" />
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model ID="Model2" runat="server">
<Fields>
<ext:ModelField Name="ID" Type="String" />
<ext:ModelField Name="Name" Type="String" />
<ext:ModelField Name="Address" Type="String" />
</Fields>
</ext:Model>
</Model>
<Sorters>
<ext:DataSorter Property="Common" Direction="ASC" />
</Sorters>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column1" runat="server" Text="ID" DataIndex="ID" />
<ext:Column ID="Column3" runat="server" Text="Name" DataIndex="Name" />
<ext:Column ID="Column2" runat="server" Text="Address" DataIndex="Address" />
</Columns>
</ColumnModel>
<Bin>
<ext:ToolTip ID="RowTip" runat="server" Target="={GridPanel1.getView().mainBody}"
MaxWidth="1000" MaxHeight="1000" Delegate=".x-grid3-cell" TrackMouse="true" ShowDelay="10"
Anchor="bottom" NoCache="true" Closable="true" Icon="PageWhite">
<Listeners>
<Show Handler="showToolTip(#{RowTip}, #{GridPanel1});" />
</Listeners>
</ext:ToolTip>
</Bin>
</ext:GridPanel>
</Items>
</ext:Viewport>


3 - Controller


public StoreResult LoadFakeRecords()
{

List<Person> lst = new List<Person>();

for (int index = 0; index < 20; index++)
{
lst.Add(new Person
{
ID = index,
Name = "Name" + index,
Address = "Address" + index,
});
}

return new StoreResult(lst, lst.Count());
}


4 - Utility


public class Person
{
public int ID { get; set; }

public string Name { get; set; }

public string Address { get; set; }
}

Daniil
Oct 08, 2012, 6:20 PM
Hi Raphael,

Does it not throw a JavaScript error here?

var record = StoreEventList.getAt(rowIndex);

I just can't see the StoreEventList definition in your sample.


i was not able to achieve the same results

Unfortunately, it is no so informative. Please always try to provide more details. For example, "There is no any error, but the ToolTip doesn't appear. The showToolTip is not triggered at all."