May 30, 2016, 2:47 PM
[CLOSED] Tooltip doesn't work with CellEditing plugin
Hi,
see my example, if I add a tooltip into a grid that have a cellediting plugin the toolTip.triggerElement is null.
Please hlep me.
Thank you
Jimmy
see my example, if I add a tooltip into a grid that have a cellediting plugin the toolTip.triggerElement is null.
Please hlep me.
Thank you
Jimmy
<%@ Page Language="C#" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Cell Editing - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<script>
var addPlant = function (btn) {
// Create a model instance
var r = Ext.create('Plant', {
common: 'New Plant 1',
light: 'Mostly Shady',
price: 0,
availability: Ext.Date.clearTime(new Date()),
indoor: false
}),
grid = btn.up("gridpanel");
grid.store.insert(0, r);
Ext.Function.defer(function () {
grid.editingPlugin.startEditByPosition({ row: 0, column: 0 });
}, 100);
}
var onShowTtGridPlants = function (toolTip, grid) {
debugger;
var view = grid.getView(),
store = grid.getStore(),
record = view.getRecord(view.findItemByChild(toolTip.triggerElement)),
column = view.getHeaderByCell(toolTip.triggerElement);
var data;
data = record.get(column.dataIndex);
toolTip.update(data);
}
</script>
</head>
<body>
<ext:ResourceManager runat="server" >
<Listeners>
<DocumentReady Handler="App.ttGridPlants.setTarget(App.gridPlants.getView().getEl());" />
</Listeners>
</ext:ResourceManager>
<ext:GridPanel
ID="gridPlants" IDMode="Static"
runat="server"
Width="600"
Height="300"
Title="Edit Plants?"
Frame="true">
<Store>
<ext:Store runat="server">
<Proxy>
<ext:AjaxProxy runat="server" Url="/Plants.xml">
<Reader>
<ext:XmlReader Record="plant" />
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model runat="server" Name="Plant">
<Fields>
<ext:ModelField Name="common" Type="String" />
<ext:ModelField Name="botanical" Type="String" />
<ext:ModelField Name="light" />
<ext:ModelField Name="price" Type="Float" />
<ext:ModelField Name="availability" Type="Date" DateFormat="MM/dd/yyyy" />
<ext:ModelField Name="indoor" Type="Boolean" />
</Fields>
</ext:Model>
</Model>
<Listeners>
<Load Handler="Ext.Msg.show({
title: 'Store Load Callback',
msg: 'store was loaded, data available for processing',
modal: false,
icon: Ext.Msg.INFO,
buttons: Ext.Msg.OK
});"
Single="true" />
</Listeners>
</ext:Store>
</Store>
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="Add Plant" Handler="addPlant" />
</Items>
</ext:Toolbar>
</TopBar>
<ColumnModel runat="server">
<Columns>
<ext:Column
runat="server"
Text="Common Name"
DataIndex="common"
Flex="1">
<Editor>
<ext:TextField runat="server" AllowBlank="false" />
</Editor>
</ext:Column>
<ext:Column
runat="server"
Text="Light"
DataIndex="light"
Width="130">
<Editor>
<ext:ComboBox runat="server"
TypeAhead="true"
SelectOnTab="true">
<Items>
<ext:ListItem Text="Shade" />
<ext:ListItem Text="Mostly Shady" />
<ext:ListItem Text="Sun or Shade" />
<ext:ListItem Text="Mostly Sunny" />
<ext:ListItem Text="Sunny" />
</Items>
</ext:ComboBox>
</Editor>
</ext:Column>
<ext:Column
runat="server"
Text="Price"
DataIndex="price"
Width="70"
Align="right">
<Renderer Format="UsMoney" />
<Editor>
<ext:NumberField runat="server" AllowBlank="false" MinValue="0" MaxValue="100000">
</ext:NumberField>
</Editor>
</ext:Column>
<ext:DateColumn
runat="server"
Text="Available"
DataIndex="availability"
Width="95"
Format="MMM dd, yyyy">
<Editor>
<ext:DateField runat="server"
Format="yyyy-MM-dd"
MinDate="01.01.2006"
DisabledDays="0,6"
DisabledDaysText="Plants are not available on the weekends">
</ext:DateField>
</Editor>
</ext:DateColumn>
<ext:CheckColumn
runat="server"
Text="Indoor?"
DataIndex="indoor"
StopSelection="false"
Editable="true"
Width="55" />
<ext:ImageCommandColumn runat="server" Width="30" Sortable="false">
<Commands>
<ext:ImageCommand Icon="Decline" ToolTip-Text="Delete Plant" CommandName="delete">
</ext:ImageCommand>
</Commands>
<Listeners>
<Command Handler="this.up('gridpanel').store.removeAt(recordIndex);" />
</Listeners>
</ext:ImageCommandColumn>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:CellSelectionModel runat="server" />
</SelectionModel>
<Plugins>
<ext:CellEditing runat="server" ClicksToEdit="1" />
</Plugins>
</ext:GridPanel>
<ext:ToolTip
ID="ttGridPlants" IDMode="Static" runat="server"
Target="=App.gridPlants.getView().el"
Delegate=".x-grid-cell"
TrackMouse="true">
<Listeners>
<Show Handler="onShowTtGridPlants(this, App.gridPlants);" />
</Listeners>
</ext:ToolTip>
</body>
</html>
Last edited by fabricio.murta; Jun 01, 2016 at 3:00 PM.
