在项目中遇到要动态的增加删除一个组件，于是就查找资料，实现了下面的效果。
Ext.onReady(function(){ // Ext.Msg.alert("提示","hello world") var PanelCollect = null, BusinessTimeArray = []; //营业时间段，该属性值为对象,格式: {start:'00:12',end:'01:30'} //营业时间控件进行对象 function CreateBusinessTimeControl(winObj,start,end) { //计算下一个时间控件显示的开始时间与结束时间 var winBusiness = "", beginTime = start ? start : "00:00", endTime = end ? end : "23:59"; var panelArray = winObj.items; if (!start && !end && panelArray.length > 0) { var len = panelArray.items.length, lastTimeControl = panelArray.items[len - 1]; beginTime = lastTimeControl.query("[name=BusinessEndTime]")[0].rawValue; if (beginTime === endTime) { Ext.Msg.alert("温馨提示", "亲，已经到最后了，不能增加了"); return; } } var timePanel = Ext.create("Ext.panel.Panel", { layout: "hbox", bodyPadding: "5 0 5 0", name: "timePanel", frame:true, border:0, items: [{ xtype: "timefield", altFormats: "H:i|G:i:s|H:i:s|g:i:s|h:i:s", 200, labelWidth: 100, labelAlign: "right", fieldLabel: "开始时间", fieldName: "BusinessBeginTime", format: "H:i", name: "BusinessBeginTime", increment: "30", value: beginTime, minValue: beginTime, minText: "时间最小值不能小于{0}", maxValue: endTime, maxText: "时间最大值不能超过{0}", //editable: true, invalidText: "时间格式无效", listeners: { select:function (combo, records, eOpts ) { console.log(records) //开始时间必须小于结束时间 var endObj = this.nextSibling(); if(records>endObj.value) { var tempTime = endObj.value; endObj.setValue(records); this.setValue(tempTime); } } } }, { xtype: "timefield", altFormats: "H:i|G:i:s|H:i:s|g:i:s|h:i:s", labelWidth: 60, labelAlign: "right", fieldLabel: "结束时间", afterLabelTextTpl: "", fieldName: "BusinessEndTime", format: "H:i", 160, name: "BusinessEndTime", increment: "30", value: endTime, minValue: beginTime, minText: "时间最小值不能小于{0}", maxValue: endTime, maxText: "时间最大值不能超过{0}", //editable: true, invalidText: "时间格式无效", listeners: { select: function (combo, records, eOpts) { var startObj = this.previousSibling(); //开始时间必须小于结束时间 if (startObj.value > records) { var tempTime = startObj.value; startObj.setValue(records); this.setValue(tempTime); } } } }, { xtype: "button", text: "新增", style: "margin:0px 0px 0px 10px ", handler: function () { //增加时间控件 CreateBusinessTimeControl(winObj) } }, { xtype: "button", text: "移除", style: "margin:0px 0px 0px 10px ", handler: function (obj) { //移除时间选择 winObj.remove(obj.ownerCt, true); winObj.doLayout(); } }] }); //增加控件 winObj.items.add(timePanel); winObj.doLayout(); } //创建营业时间设置的窗体 function CreateBusinessTimeSettingWindow(){ var winBusinessTimeSetting = new Ext.Window({ title: '营业时间设置', name: "winBusinessTimeSetting", 500, height: 460, modal: true, resizable: false, closable: true, layout: "vbox", autoScroll:true, items: [], buttons: [{ text: "清空", handler: function (obj) { var winObj = obj.up("window"), winItems = winObj.items; if (winItems.length > 0) { BusinessTimeArray = []; while (winItems.items.length > 0) { winObj.remove(winItems.items[0], true); } winObj.doLayout(); } } }, { text: "新增", handler: function (obj) { //添加一个时间选择组件 CreateBusinessTimeControl(obj.up("window")); } }, { text: "完成", handler: function (obj) { //获取选中的所有时间段 var winItems = obj.up("window").items; if(winItems.length>0) { var timeItems = winItems.items, startTime = "", endTime = "", timeArray = []; for(var i=0;i<timeItems.length;i++) { startTime = timeItems[i].query("[name=BusinessBeginTime]")[0].rawValue; endTime = timeItems[i].query("[name=BusinessEndTime]")[0].rawValue; timeArray.push({ start: startTime, end: endTime }); } BusinessTimeArray = timeArray; //显示设置的营业时间值 ShowBusinessTime(); } obj.up("window").close(); } }] }); winBusinessTimeSetting.show(); //显示已经设置的时间段 if (BusinessTimeArray.length > 0) { for(var i=0;i<BusinessTimeArray.length;i++) { CreateBusinessTimeControl(winBusinessTimeSetting, BusinessTimeArray[i].start, BusinessTimeArray[i].end); } //显示设置的营业时间值 ShowBusinessTime(); } } //显示设置的营业时间值 function ShowBusinessTime(){ var strTimeArray = [], strTime = ""; for(var i=0;i<BusinessTimeArray.length;i++) { strTimeArray.push(BusinessTimeArray[i].start + "~" + BusinessTimeArray[i].end); } //显示时间设置 if (strTimeArray.length > 4) { strTime = "(已设置" + strTimeArray.slice(0, 4).join(",") + "...)"; } else { strTime = "(已设置" + strTimeArray.join(",") + ")"; } PanelCollect.query("[name=labelBusinessTime]")[0].el.dom.innerHTML = strTime; } PanelCollect = Ext.create('Ext.form.Panel', { title: "外卖对接", name: "ThirdWaimaiPanel", bodyPadding: '20 10 10 10', style: 'margin-top:5px', layout: "vbox", renderTo:Ext.getBody(), defaults:{ bodyPadding: "10 0 0 0", layout: 'hbox', border:0, }, 600, items: [ { xtype: 'panel', 500, items: [{ xtype: "button", text: "营业时间设置", name: "btnBusinessTimeSetting", 150, height: 30, handler: function () { CreateBusinessTimeSettingWindow(); } }, { xtype: "label", name: "labelBusinessTime", style:"line-height:30px; margin-left:5px;", html: "(未设置)" }] } ] }); });
效果图如下：
