I have done something like this and it worked. But I have 2 image command columns. On 1 of them, I need to do a mouse over and on other a button click.
On textAlignLeft icon, I am doing a button click to display a pop up window and on taggreen icon, I am doing a mouse over. I have implemented mouse out event in the similar way as suggested in the above post. But this mouse out event is triggered also for textAlignLeft column also which should not be happening. For this, the pop up should close only on close button click.
Since both have the same div class, mouse out triggers for both. But I need mouse out to trigger only for taggreen icon. Is there a way to do this.
Here is the sample code.
<%@ Page Language="C#" AutoEventWireup="true" >
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!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 id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
List<object> gridData = new List<object>
{
new {ShortDescription="Test1", LongDescription="L1" },
new {ShortDescription="Test2", LongDescription="L2" },
new {ShortDescription="Test3", LongDescription="L3" },
new {ShortDescription="Test4", LongDescription="L4" },
new {ShortDescription="Test5" , LongDescription="L5" },
new {ShortDescription="Test6" , LongDescription="L6" },
new {ShortDescription="Test7" , LongDescription="L7" },
};
Store1.DataSource = gridData;
Store1.DataBind();
}
}
</script>
<ext:XScript ID="XScript1" runat="server">
<script language="javascript" type="text/javascript">
var onImageCommandColumnMouseOver = function (view, cell, recordIndex, cellIndex, e)
{
var record = this.grid.getStore().getAt(recordIndex);
#{window2}.show();
#{txtArLongDesp}.reset();
#{txtArLongDesp}.setValue(record.data.LongDescription);
};
</script>
</ext:XScript>
<script type="text/javascript">
function saveLongDescriptionToGrid() {
var longDescription = App.txtArLongDesp.getRawValue(),
selectedRow = App.GridPanel1.getSelectionModel().getSelection()[0];
selectedRow.data.LongDescription = longDescription;
}
</script>
<ext:ResourceManager ID="rmPrelimIdeas" runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model2" runat="server">
<Fields>
<ext:ModelField Name="ShortDescription"/>
<ext:ModelField Name="LongDescription" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column1" runat="server" Text="Short Description" DataIndex="ShortDescription"
>
<Editor>
<ext:TextField ID="TextField1" runat="server" AllowBlank="false" />
</Editor>
</ext:Column>
<ext:Column ID="ColumnLongDescription" runat="server" DataIndex="LongDescription"
Hidden="true" Hideable="false">
</ext:Column>
<ext:ImageCommandColumn ID="ImageCommandColumn21" runat="server" Text="Long Description"
DataIndex="LongDescription" Width="100px" Cls="columnAlign" TdCls="highlight">
<Columns>
<ext:ImageCommandColumn ID="ImageCommandColumn22" runat="server">
<commands>
<ext:ImageCommand CommandName="LongDescription" Icon="TextAlignLeft" >
</ext:ImageCommand>
</commands>
<listeners>
<Command Handler="var record = this.grid.getStore().getAt(recordIndex);
#{window2}.show();
#{txtArLongDesp}.reset();
#{CheckboxSelectionModel1}.select(recordIndex);
#{txtArLongDesp}.setValue(record.data.LongDescription);">
</Command>
</listeners>
</ext:ImageCommandColumn>
</Columns>
<Columns>
<ext:ImageCommandColumn ID="ImageCommandColumn3" runat="server">
<commands>
<ext:ImageCommand CommandName="LongDescripYesNo" Icon="TagGreen" ToolTip-Text="Has data" >
</ext:ImageCommand>
</commands>
<listeners>
<CustomConfig>
<ext:ConfigItem Name="mouseover" Value="onImageCommandColumnMouseOver" Mode="Raw" />
</CustomConfig>
</listeners>
</ext:ImageCommandColumn>
</Columns>
</ext:ImageCommandColumn>
</Columns>
</ColumnModel>
<View>
<ext:GridView ID="GridView1" runat="server" StripeRows="true">
<Listeners>
<ItemMouseLeave Handler="if (!e.getTarget('.row-imagecommand') ) { #{window2}.hide(); };" />
</Listeners>
</ext:GridView>
</View>
<Plugins>
<ext:CellEditing ID="CellEditing1" runat="server">
</ext:CellEditing>
</Plugins>
<SelectionModel>
<ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server" />
</SelectionModel>
</ext:GridPanel>
<ext:Window ID="window2" runat="server" Hidden="true" Width="510px">
<Items>
<ext:TextArea ID="txtArLongDesp" Width="500px" EmptyText="Enter Long Description"
MaxLength="2000" AutoScroll="true" runat="server" />
</Items>
<Listeners>
<Close Handler="saveLongDescriptionToGrid()">
</Close>
</Listeners>
</ext:Window>
</div>
</form>
</body>
</html>
Originally Posted by Daniil
