Extjs动态增删组件

在项目中遇到要动态的增加删除一个组件，于是就查找资料，实现了下面的效果。

        　　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",
                            width: 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",
                            width: 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",
                        width: 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,
                    },
                    width:600,
                    items: [
                        {
                            xtype: 'panel',
                            width: 500,
                            items: [{
                                xtype: "button",
                                text: "营业时间设置",
                                name: "btnBusinessTimeSetting",
                                width: 150,
                                height: 30,
                                handler: function () {
                                    CreateBusinessTimeSettingWindow();
                                }
                            }, {
                                xtype: "label",
                                name: "labelBusinessTime",
                                style:"line-height:30px; margin-left:5px;",
                                html: "(未设置)"
                            }]
                        }
                    ]
                });
            });

效果图如下：