Ext扩展组件实现动态增删键值属性对

组件扩展,实现动态添加、删除键值属性对。 MultiTextField.js /** * Lincc * 动态添加键值属性对 */ if (!hsit){ var hsit = {}; } hsit.multiTextField = Ext.extend(Ext.Panel, { layout:'fit', startId:'properties',//默认id limit:5,//限制添加条数 //初始化控件 initComponent : function() { if (!this.startName) this.startName = this.startId; this.items = { xtype:'hidden',//添加隐藏控件，为初始提供准备 value:'', name:this.startName + '_count', id:this.startId + '_count' }; hsit.multiTextField.superclass.initComponent.call(this); this.num = 0; }, //展现控件 onRender : function(ct, position) { hsit.multiTextField.superclass.onRender.call(this, ct, position); }, //向面板中加属性键值对文本框 addTextfield:function() { var properties = Ext.getCmp(this.startId+ '_count').getValue().trim(); if (properties.split('@').length > this.limit) { alert('最多能添加 ' + this.limit + ' 条属性键值对！'); return; } this.num++; var curNum = this.num; Ext.getCmp(this.startId + '_count').setValue(Ext.getCmp(this.startId + '_count').getValue() + "@" + curNum); //添加一组键值对文本框 var n = this.add({ layout:'column', autoHeight:true, id:this.startId + '_column_' + curNum, items:[ { columnWidth:.3, layout: 'form', labelWidth:this.labelWidth, items: [{ xtype: 'textfield', fieldLabel: '属性名称' , id:this.startId + '_title_' + curNum, anchor:'95%', name: this.startName + '_title_' + curNum }] } , { columnWidth:.3, layout: 'form', labelWidth:this.labelWidth, items: [{ xtype: 'textfield', fieldLabel: '属性值' , id:this.startId + '_value_' + curNum, anchor:'95%', name: this.startName + '_value_' + curNum }] } , { columnWidth:.3, layout: 'form', items: [ { xtype:'button', text:'清除', id:this.startId + '_remove_' + curNum, handler:function() { this.remove(n); Ext.getCmp(this.startId + '_count').setValue(Ext.getCmp(this.startId + '_count').getValue().replace('@' + curNum, '')); }, scope:this }] } ] }); this.doLayout(); } , //展现后 afterRender : function() { hsit.multiTextField.superclass.afterRender.call(this); } }); Ext.reg('multiTextField', hsit.multiTextField);//注册控件 调用组件 js： test1.js Ext.ns("com.hs"); com.hs.main=function(){ var win; var panel; function createWindow(){ var fieldset=new Ext.form.FieldSet({ title : "查询条件", border : true, layout : 'column', autoHeight : true, items : [{ xtype : 'button', text : '添加附件', iconCls : 'silk_page_add', handler : function() {//调用组件的方法 Ext.getCmp('xixi').addTextfield(); } }, { xtype : 'multiTextField', id : 'xixi', startId : 'resolveBug_files_', startName : 'editBug_files_', labelWidth : 70, limit : 10 }] }) panel=new Ext.form.FormPanel({ title:"测试", autoWidth:true, height:600, frame:true, border:true, items:[fieldset] }) win=new Ext.Window({ title:"添加附件示例", height:600, width:800, items:panel }) win.show() } return { init:function (){ createWindow(); } } }(); Ext.onReady(com.hs.main.init,com.hs.main); 测试页面： Test.jsp <%@ page contentType="text/html;charset=UTF-8"%> <%@ include file="/commons/taglibs.jsp"%> <%@ include file="/commons/meta.jsp"%> <%@ include file="/commons/ExtMeta.jsp" %> 测试效果：