Question

我有这个网格面板：

<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>

背后的代码是：

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();
        }

屏幕截图如下： enter image description here

我想要做的是在开始时仅显示文本字段，然后在单击文本字段时显示右侧的添加按钮。此时应隐藏所有其他按钮。我该怎么做？我想用客户端脚本来实现这一点。请帮忙。编辑列单元格时隐藏另一列可能也有效。谢谢。

Answer 1

示例

<%@ 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>

顺便说一下，你可能想要使用TextField的RightButtons集合。这是一个example。

如何在ext.net的gridpanel中的组件列中显示/隐藏项目？

1 个答案: