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: "(未設置)"
                            }]
                        }
                    ]
                }); 
            });

效果圖如下：