[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">
     
  3. 
     
  5. 
     
  6. 
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
  7. 
     
  8. 
     
  9. 
     
  10. 
      
  12. 
      
  13. 
      
  14. 
      
  15. 
      
  17. 
      
  18. 
      
  19. 
      
  20. 
      
  21. 
      
  22. 
      

  复制代码
  
  
• 上面的第二张图（新增行状态下）是在页面上"新增课件地址"的按钮上家点击事件的完成的 js代码如下
  1. //新增課件地址文本框
     
  2. function>
  3. panel.doLayout();
     
  4. //課件標籤
     
  5. var>
  6. pnl.doLayout();
     
  7. 
     
  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. }

  复制代码