[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 天前 上传

接下来是实现的方法：

• 上面的第一张图（默认状态下）是在需要在前台布局的 代码如下
  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. }

  复制代码