[Ext.Net]动态生成控件(二)--js动态添加文本框

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

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

本帖就来解答这个问题： 首先先放几个效果图，看你是不是需要这样的需求，如果是再往下看帖哦。

• 下图是刚开始的状态

  20131219131058.jpg (17.93 KB, 下载次数: 0)

  下载附件  保存到相册

  7 天前 上传
• 下图是新增了几行控件的状态

  20131219131129.jpg (29.75 KB, 下载次数: 0)

  下载附件  保存到相册

  7 天前 上传
• 下图是删除了第二行的状态

  20131219131153.jpg (27.29 KB, 下载次数: 0)

  下载附件  保存到相册

  7 天前 上传

接下来是实现的方法：

• 上面的第一张图（默认状态下）是在需要在前台布局的 代码如下
  2. Width="700" Hidden="true" Modal="true" Title="課件地址" AutoScroll="true" ButtonAlign="Center">

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

  复制代码
• 上面的第三张图（删除状态下）是在页面新增完的行最右边的“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. }

  复制代码