[英]How to show/hide an item in a component column in gridpanel in ext.net?
I have this gridpanel: 我有这个网格面板:
<ext:GridPanel ID="GridPanel1" runat="server" Width="300px" Height="200px" Header="false">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="Name" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:ComponentColumn ID="comColName" runat="server" Flex="1" Text="Name">
<Component>
<ext:Container ID="container" runat="server" Layout="HBoxLayout">
<Items>
<ext:TextField ID="txt1" runat="server" Flex="1"></ext:TextField>
<ext:Button ID="btn1" runat="server" Width="22px" Icon="Add">
</ext:Button>
</Items>
</ext:Container>
</Component>
</ext:ComponentColumn>
</Columns>
</ColumnModel>
</ext:GridPanel>
And the code behind is: 后面的代码是:
protected void Page_Load(object sender, EventArgs e)
{
this.Store1.DataSource = new object[] {
new object[] {},
new object[] {},
new object[] {},
new object[] {},
new object[] {},
new object[] {}
};
this.Store1.DataBind();
}
The screenshot looks like: 屏幕截图如下:
What i want to do is display only the textfields at start, then display the add button at right when a textfield is clicked. 我想做的是在开始时仅显示文本字段,然后在单击文本字段时在右侧显示添加按钮。 All other buttons should be hidden at that time.
那时所有其他按钮都应隐藏。 How can I do this?I want to achieve this using client side scripting.
我该怎么做?我想使用客户端脚本来实现。 Please help.
请帮忙。 Hiding another column while editing a column cell might work as well.
在编辑列单元格时隐藏另一列也可能有效。 Thank you.
谢谢。
Example 例
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = new object[]
{
new object[] {},
new object[] {},
new object[] {}
};
}
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel
runat="server"
Width="300"
Height="200">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Name" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:ComponentColumn runat="server" Flex="1" Text="Name">
<Component>
<ext:Container runat="server" Layout="HBoxLayout">
<Items>
<ext:TextField runat="server" Flex="1">
<Listeners>
<Focus Handler="this.ownerCt.getComponent('AddButton').show();" />
<Blur Handler="this.ownerCt.getComponent('AddButton').hide();" />
</Listeners>
</ext:TextField>
<ext:Button
runat="server"
ItemID="AddButton"
Width="22"
Icon="Add"
Hidden="true" />
</Items>
</ext:Container>
</Component>
</ext:ComponentColumn>
</Columns>
</ColumnModel>
</ext:GridPanel>
</form>
</body>
</html>
By the way, there is a TextField's RightButtons collection which you might want to use instead. 顺便说一句,您可能想要使用TextField的RightButtons集合。 Here is an example .
这是一个例子 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.