PDA

View Full Version : [CLOSED] Mouse over event for image button



vmehta
Jun 12, 2014, 2:17 PM
I am looking for a mouse over event on image button. when the user mouse overs on this button, i need to show a window. Right now, it is happening on button click. Please let me know if there is a way to do it on mouse over.

Daniil
Jun 12, 2014, 2:48 PM
Hi @vmehta,

There is the MouseOver event.

<ext:ImageButton runat="server">
<Listeners>
<MouseOver Handler="console.log('MouseOver');" />
</Listeners>
</ext:ImageButton>

vmehta
Jun 12, 2014, 3:06 PM
I mean an imageCommandColumn like this. Please refer screenshot.

Daniil
Jun 13, 2014, 8:57 AM
There is no MouseOver event for a ImageCommandColumn's Commands, but you can listen to the MouseOver event of an ImageCommandColumn itself.

Example

<%@ Page Language="C#" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "test", "test" },
new object[] { "test", "test" },
new object[] { "test", "test" }
};
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script>
var onImageCommandColumnMouseOver = function (view, cell, recordIndex, cellIndex, e) {
console.log("onImageCommandColumnMouseOver");
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test 1" DataIndex="test1" />
<ext:Column runat="server" Text="Test 2" DataIndex="test2" />
<ext:ImageCommandColumn runat="server">
<Commands>
<ext:ImageCommand CommandName="testImageCommand" Icon="Accept" />
</Commands>
<Listeners>
<CustomConfig>
<ext:ConfigItem Name="mouseover" Value="onImageCommandColumnMouseOver" Mode="Raw" />
</CustomConfig>
</Listeners>
</ext:ImageCommandColumn>
</Columns>
</ColumnModel>
</ext:GridPanel>
</form>
</body>
</html>

vmehta
Jun 17, 2014, 4:12 PM
I am trying to open a window on mouse over which will set a value on a textArea in the window.


var onImageCommandColumnMouseOver = function (view, cell, recordIndex, cellIndex, e)
{

#{window2}.show();
#{txtArLongDesp}.reset();
#{CheckboxSelectionModel1}.select(recordIndex);
#{txtArLongDesp}.setValue(recordIndex.LongDescript ion);

};


<ext:ImageCommandColumn ID="imgbtnDescp" runat="server" Text="Long Description" DataIndex="LongDescription"
Width="100px" Cls="columnAlign" TdCls="long-description">
<Commands>
<ext:ImageCommand CommandName="LongDescription" Icon="TextAlignLeft">
</ext:ImageCommand>
</Commands>
<Listeners>
<CustomConfig>
<ext:ConfigItem Name="mouseover" Value="onImageCommandColumnMouseOver" Mode="Raw" />
</CustomConfig>
</Listeners>
</ext:ImageCommandColumn>

It says LongDescription is null or undefined. Am i missing anything here?

Daniil
Jun 17, 2014, 9:05 PM
"recordIndex" is a record's index, not a record itself.

You can get a record in this way:

var record = this.grid.getStore().getAt(recordIndex);

Then you should use:

record.data.LongDescription

vmehta
Jun 19, 2014, 3:41 PM
Thanks for that. The mouse over is happening. But then when I come out of that cell, I am trying to do close the window. So i added a custom config for mouseout, but sadly it does mouse out only when I mouse out of the whole grid. I need to close the window that opening on mouse over to close on mouse out.

I have been trying this.


<ext:ImageCommandColumn ID="imgbtnDescp" runat="server" Text="Long Description" DataIndex="LongDescription">
<Commands>
<ext:ImageCommand CommandName="LongDescription" Icon="TextAlignLeft">
</ext:ImageCommand>
</Commands>
<Listeners>
<CustomConfig>
<ext:ConfigItem Name="mouseover" Value="onImageCommandColumnMouseOver" Mode="Raw" />
<ext:ConfigItem Name="mouseout" Value="closewindow" Mode="Raw" />
</CustomConfig>
</Listeners>
<Commands>
</Commands>
</ext:ImageCommandColumn>


var closewindow = function(view, cell, recordIndex, cellIndex, e)
{
#{window2}.close();
};

This mouseout triggers only when when I mouse out of the whole grid.
Let me know if this can be done on cell mouse out.

Daniil
Jun 19, 2014, 5:10 PM
Yes, it appears that mouseout is not suitable for your task.

I can suggest this solution.

Set the ID for the ImageCommandColumn

<ext:ImageCommandColumn ID="ImageCommandColumn1" runat="server">

and this for the GridPanel

<View>
<ext:GridView runat="server">
<Listeners>
<ItemMouseLeave Handler="if (e.getTarget('.x-grid-cell-ImageCommandColumn1')) {
console.log('ImageCommandColumn mouseleave rowIndex ' + rowIndex);
};" />
</Listeners>
</ext:GridView>
</View>

vmehta
Jun 30, 2014, 4:14 PM
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.LongDescript ion);
};

</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.LongDescript ion);">
</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>

Daniil
Jul 01, 2014, 12:04 PM
You can see that my ItemMouseLeave is a bit different. There is the following selector - ".x-grid-cell-ImageCommandColumn1".

It contains the ImageCommandColumn's ID. So, the console.log() statement won't be executed for another columns.



I can suggest this solution.

Set the ID for the ImageCommandColumn

<ext:ImageCommandColumn ID="ImageCommandColumn1" runat="server">

and this for the GridPanel

<View>
<ext:GridView runat="server">
<Listeners>
<ItemMouseLeave Handler="if (e.getTarget('.x-grid-cell-ImageCommandColumn1')) {
console.log('ImageCommandColumn mouseleave rowIndex ' + rowIndex);
};" />
</Listeners>
</ext:GridView>
</View>

vmehta
Jul 01, 2014, 3:33 PM
I did exactly the same but this worked the same way how it works for customConfig


<ext:ConfigItem Name="mouseout" Value="onImageCommandColumnMouseout" Mode="Raw" />

Only when I mouse out of the grid, it triggers. Otherwise it does not happen anywhere in the grid. That is the reason, I tried to use .row-imagecommand' in ItemMouseLeave listener.

But this does mouse out on both the image command columns, which should not happen.

1. The mouse out should happen only for LongDescripYesNo command and not for LongDescription command
2. On LongDescripYesNo command column, mouse over and mouse out should work only on the cells where it has icons. (Some records will not have icons in the column)

Please let me know how this can be done.


<%@ 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="" },
new {ShortDescription="Test3", LongDescription="L3" },
new {ShortDescription="Test4", LongDescription="" },
new {ShortDescription="Test5" , LongDescription="L5" },
new {ShortDescription="Test6" , LongDescription="" },
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.LongDescript ion);
};

var prepareCommandForLongDescp = function (grid, command, record, row) {

if (command.command == 'LongDescripYesNo' && ! record.get("LongDescription")) {
command.hidden = true;
command.hideMode = 'display';
}
};

</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.LongDescript ion);">
</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>
<preparecommand fn="prepareCommandForLongDescp" />
<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>

Daniil
Jul 02, 2014, 5:19 PM
I did exactly the same

Could you, please, provide a test case where you did it?

<ItemMouseLeave Handler="if (e.getTarget('.x-grid-cell-ImageCommandColumn1')) {
console.log('ImageCommandColumn mouseleave rowIndex ' + rowIndex);
};" />



But this does mouse out on both the image command columns, which should not happen.

Well, if you want to use

(!e.getTarget('.row-imagecommand'))
there is no solution, because this condition is true for any ImageCommandColumn.