PDA

View Full Version : [CLOSED] Gridpanel cell dropdown menu to the right of cell



RCM
Nov 20, 2012, 7:36 PM
Hi,

Is it possible to have a drop down menu to the right corner of a gridpanel cell similar to the drop down menu in the column header. So i would want to display the cell value as well as the drop down menu to the right with additional options.

Baidaly
Nov 20, 2012, 11:25 PM
Hello!

Sorry but we don't quite understand you. Can you give example or picture of what you want?

http://forums.ext.net/showthread.php?3440
http://forums.ext.net/showthread.php?10205

Daniil
Nov 21, 2012, 5:45 AM
Hi @RCM,

If I correctly understand, you need a context menu.

I think you can listen GridPanel's ItemContextMenu event to show a menu.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Table-event-itemcontextmenu

RCM
Nov 21, 2012, 2:01 PM
Hi,

Please see the image below of what I am trying to achieve. I would like to have a button in the right hand corner of a cell that displays a drop-down menu. This is similar to the column header.


5147

Daniil
Nov 21, 2012, 5:03 PM
Thank you for clarification.

Here is how I would achieve it.

Example

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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

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

<script>
var onButtonClick = function (btn, e) {
var column = btn.ownerCt.column.column,
headerCt = column.ownerCt;

headerCt.showMenuBy(e.getTarget(), column);
};
</script>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server" />
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:ComponentColumn runat="server">
<Component>
<ext:Container runat="server" Layout="HBoxLayout">
<Items>
<ext:DisplayField runat="server" Text="Text" Flex="1" />
<ext:Button runat="server" Icon="ArrowDown" Handler="onButtonClick" />
</Items>
</ext:Container>
</Component>
</ext:ComponentColumn>
</Columns>
</ColumnModel>
</ext:GridPanel>
</body>
</html>

RCM
Nov 22, 2012, 1:28 PM
Hi,

Thanks for the suggestion, it works very well... I am having another issue though, I am using a link button instead of a display field and I am trying to make the link test wrap base on the width of the cell. I try to set the minWidth if the link button and apply a css but it does not work. see code below..any ideas.



<ext:LinkButton Cls="summary-column" runat="server" Flex="1" MinWidth ="100" ItemID="Name" />



.summary-column{
text-decoration: none !important;
word-wrap:break-word;
}

Daniil
Nov 22, 2012, 2:16 PM
I am afraid I don't understand the requirement.

Could you demonstrate the current and required views with screenshots and/or mockups?

RCM
Nov 22, 2012, 6:46 PM
Hi,

I had it working and never realized. see sample below. I was trying to get the Name field to wrap when the column size goes below a certain width. see sample below.




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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
<style type="text/css">
.summary-column{
text-decoration: none !important;
word-wrap:break-word;
}
</style>
<script>
var onButtonClick = function (btn, e) {
var column = btn.ownerCt.column.column,
headerCt = column.ownerCt;

headerCt.showMenuBy(e.getTarget(), column);
};

var GetData = function () {

var data = Array();
var item = { Name: "I am want this text to be wrappable when the column size changes" }
data.push(item);
item = { Name: "I am want this text to be wrappable when the column size changes" }
data.push(item);

App.GridPanel1.store.loadData(data);
};

var bindWidgets = function (column, cmp, record) {
var name = record.get('Name'),
itemLabel = cmp.down('#Name');
itemLabel.setText(name);
};
</script>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server" >
<Fields>
<ext:ModelField Name="Name" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:ComponentColumn runat="server" DataIndex="Name">
<Component>
<ext:Container runat="server" Layout="HBoxLayout">
<Items>
<ext:LinkButton Cls="summary-column" runat="server" Text ="" Flex="1" MinWidth="200" ItemID="Name" />
<ext:Button runat="server" Icon="ArrowDown" Handler="onButtonClick" />
</Items>
</ext:Container>
</Component>
<Listeners>
<Bind Fn="bindWidgets" />
</Listeners>
</ext:ComponentColumn>
</Columns>
</ColumnModel>
<Listeners>
<ViewReady Handler="GetData();" />
</Listeners>
</ext:GridPanel>
</body>
</html>

RCM
Nov 22, 2012, 7:47 PM
Hi,

The above actually does not work, sorry for the confusion. My browser had the display field cached. please let me know if you have any ideas.

Daniil
Nov 23, 2012, 4:01 AM
Please try this rule:

.summary-column {
white-space: normal;
}