转自:http://www.ext.net.cn/forum.php?mod=viewthread&tid=11931

点击一个按钮就出现一行控件,点击删除控件就可将一行控件删除,这是不是你一直以来都想实现的需求呢?

本帖就来解答这个问题:

首先先放几个效果图,看你是不是需要这样的需求,如果是再往下看帖哦。

接下来是实现的方法:

  • 上面的第一张图(默认状态下)是在需要在前台布局的 代码如下

    1. <ext:Window ID="winEdit">
    2. Width="700" Hidden="true" Modal="true" Title="課件地址" AutoScroll="true" ButtonAlign="Center">
    3. <items>
    4. <ext:panel ID="pnl_urls">
    5. <content>
    6. <table>
    7. <tbody>
    8. <tr>
    9. <td>
    10. <ext:Label ID="lbl_url_txt">
    11. <ext:Button ID="btn_addurl">
    12. <Listeners>
    13. <Click Fn="newurl" />
    14. </Listeners>
    15. </ext:Button>
    16. </td>
    17. </tr>
    18. <tr>
    19. <td>
    20. <ext:Panel>
    21. <Items>
    22. <ext:TextField ID ="UrlName_1">
    23. </Items>
    24. </ext:Panel>
    25. </td>
    26. <td>
    27. <ext:Panel ID ="pnl_classurl">
    28. <items>
    29. <ext:TriggerField ID ="url_1">
    30. <Listeners>
    31. <TriggerClick Fn ="delurl" />
    32. </Listeners>
    33. </ext:TriggerField>
    34. </items>
    35. </ext:Panel>
    36. </td>
    37. </tr>
    38. </tbody>
    39. </table>
    40. </content>
    41. </ext:panel>
    42. </items>
    43. <buttons>
    44. <ext:Button ID ="btn_saveurls">
    45. <Listeners>
    46. <Click Handler ="SaveEdit()" />
    47. </Listeners>
    48. </ext:Button>
    49. <ext:Button ID ="btn_cancelurls">
    50. <Listeners>
    51. <Click Handler ="CancelEdit()" />
    52. </Listeners>
    53. </ext:Button>
    54. </buttons>
    55. </ext:Window>

    复制代码

  • 上面的第二张图(新增行状态下)是在页面上"新增课件地址"的按钮上家点击事件的完成的 js代码如下
    1. //新增課件地址文本框
    2. function>
    3. panel.doLayout();
    4. //課件標籤
    5. var>
    6. pnl.doLayout();
    7. var>
    8. var>
    9. var>
    10. var Nameid = "UrlName_" +>
    11. id:>
    12. trigger.setValue(ismark);
    13. }
    14. panel.insert(parseInt(items + 1),>
    15. label = "課件" + (parseInt(panel.items.items[items - 1].id.split('_')[1]) + 1).toString();
    16. }
    17. var>
    18. id: Nameid,
    19. fieldLabel: " ",
    20. labelWidth: 5,
    21. labelSeparator: " ",
    22. width: 100,
    23. value: label
    24. })
    25. pnl.insert(parseInt(items + 1), txt);
    26. pnl.doLayout();
    27. }

    复制代码

  • 上面的第三张图(删除状态下)是在页面新增完的行最右边的“X”点击事件完成的 js代码如下
    1. //移除課件地址文本框
    2. function>
    3. var>
    4. if (panel.items.length > 1) {
    5. panel.remove(el);
    6. panel.doLayout();
    7. pnl.remove(Ext.getCmp("UrlName_" +>
    8. var>
    9. if (panh <= "380") {
    10. if (winh >= "140") {
    11. Ext.getCmp("winEdit").setHeight(parseInt(Ext.getCmp("winEdit").getHeight()) - 25);
    12. }
    13. }
    14. }

    复制代码

[Ext.Net]动态生成控件(二)--js动态添加文本框的更多相关文章

  1. Silverlight动态生成控件实例

    刚学习Silverlight,做了一个动态创建控件的实例 实现结果:根据已有的控件类名称,得到控件的实例化对象 实现思路1:就是定义一个模板文件,将类名做为参数,在silverlight中使用Srea ...

  2. Asp.net web form 动态生成控件的注意事项

    Asp.net页面生命周期 页面初始化          Page_Init   加载View State      LoadViewState    回发数据处理      LoadPostData ...

  3. Asp.net中使用文本框的值动态生成控件的方法

    这篇文章主要介绍了Asp.net中使用文本框的值动态生成控件的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下 看到一个网友,有论坛上问及,动态的生成checkbox控件,在文本框中输入一个“花 ...

  4. WPF: WrapPanel 容器的数据绑定(动态生成控件、遍历)

    原文:WPF: WrapPanel 容器的数据绑定(动态生成控件.遍历) 问题:        有一些CheckBox需要作为选项添加到页面上,但是数目不定.而为了方便排版,我选择用WrapPanel ...

  5. Winforn中使用代码动态生成控件

    场景 有时候需要根据配置文件在窗体中使用代码动态生成控件. 比如读取xml配置文件中的节点数量,然后在窗体中生成指定数量的RadioGroup控件. 实现 新建一个窗体,在窗体的加载完之后的事件中 p ...

  6. Unity UGUI动态生成控件

    一. 首先你得先清楚RectTransform组件的一些程序控制 1. 先得到UGUI控件上面的RectTransform组件 RectTransform rtr = gameObject.GetCo ...

  7. (五)ASP.NET中动态生成控件

    今天被问到如何在ASP.NET 页面中动态创建一批控件,并且希望在后续代码中能访问到这些动态创建的控件.我用下面的例子来解释这个问题 ================================= ...

  8. (四)动态生成控件,点击button添加控件

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. c# winform动态生成控件与获取动态控件输入的值

    差不多有2年没有写winform程序,一直都是写bs.最近项目需要,又开始着手写一个小功能的winform程序,需要动态获取xml文件的节点个数,生成跟节点个数一样的textbox, 最后还要获取操作 ...

随机推荐

  1. Go 语言多维数组

    Go 语言支持多维数组,以下为常用的多维数组声明方式: var variable_name [SIZE1][SIZE2]...[SIZEN] variable_type 以下实例声明了三维的整型数组: ...

  2. ReactNative 4Android源码分析二: 《JNI智能指针之实现篇》

    文/Tamic http://blog.csdn.net/sk719887916/article/details/53462268 回顾 上一篇介绍了<ReactNative4Android源码 ...

  3. webpack 1.x 配合npm scripts管理多站点

    需求场景: 希望通过一个webpack文件夹管理多个站点的打包流程. 假设现在我要为站点domain配置打包流程. npm 添加淘宝镜像 你懂得 vim ~/.npmrc registry = htt ...

  4. 安卓高级3 RecyclerView结合SwipeRefreshLayout并添加上拉

    目录结构: 效果图: MainActivity.java package qianfeng.com.pullrecyclerviewdemo; import android.os.Bundle; im ...

  5. [CSDN_Markdown]使用LaTeX基本数学公式

    简介 以前我很头疼在博文里写公式,一直期盼CSDN的博文编辑器能支持LaTeX 公式输入,今天终于可以使用这个功能了!此文主要讨论如何在CSDN的Markdown编辑器中写 LaTeX 公式! 使用L ...

  6. Android Studio下多渠道打包

    Android Studio下实现多渠道打包 直接上步骤 步骤 1. 清单文件添加属性(以友盟统计为例) 在application标签下添加meta-data属性 <application -- ...

  7. 十六进制字符串转化为十进制值strtoul函数

    eg: NSString *strtest =@"7fffffff"; NSUInteger val = strtoul([[strtest substringWithRange: ...

  8. FFmpeg源代码简单分析:日志输出系统(av_log()等)

    ===================================================== FFmpeg的库函数源代码分析文章列表: [架构图] FFmpeg源代码结构图 - 解码 F ...

  9. (一二三)基于GCD的dispatch_once实现单例设计

    要实现单例,关键是要保证类的alloc和init只被调用一次,并且被自身强引用防止释放. 近日读唐巧先生的<iOS开发进阶>,受益匪浅,通过GCD实现单例就是收获之一,下面把这个方法与大家 ...

  10. 关于tomcat中Servlet对象池

    Servlet在不实现SingleThreadModel的情况下运行时是以单个实例模式,如下图,这种情况下,Wrapper容器只会通过反射实例化一个Servlet对象,对应此Servlet的所有客户端 ...