Javascript 如何在ext.net的gridpanel中显示/隐藏组件列中的项?
我有一个网格面板:Javascript 如何在ext.net的gridpanel中显示/隐藏组件列中的项?,javascript,extjs,extjs4,ext.net,gridpanel,Javascript,Extjs,Extjs4,Ext.net,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" runa
<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>
屏幕截图如下所示:
我想做的是在开始时只显示文本字段,然后在单击文本字段时在右侧显示添加按钮。此时应隐藏所有其他按钮。
我如何做到这一点?我想使用客户端脚本实现这一点。请帮忙。在编辑列单元格时隐藏另一列也可以。谢谢。示例
<%@ 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>
受保护的无效页面加载(对象发送方、事件参数e)
{
如果(!X.IsAjaxRequest)
{
this.Store1.DataSource=新对象[]
{
新对象[]{},
新对象[]{},
新对象[]{}
};
}
}
Ext.NET v2示例
顺便说一句,这里有一个TextField的RightButtons集合,您可能想用它来代替。这是一个。在我这方面,你的代码没有显示任何内容??!好的,我已经为store和codebehind添加了代码。
<%@ 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>