Clear a Panel

[ghostzhang]

in this case ,i need to clear panel's items:

this is my code:

ImageBrowser = Ext.extend(demo.module,{
    init: function(){
    	var treeLoader = new Ext.tree.TreeLoader({
				url : 'image/showtree',
				requestMethod : 'GET',
				//clearOnLoad:true,
				preloadChildren:true
		});
		
		var getPath=function(node){ //????
	    	if(node.parentNode){
	    		return  getPath(node.parentNode) + '/' + node.text;
	    	}else{
	    		return node.text;
	    	}
	    }
		treeLoader.on('beforeload',function(loader,node){
			this.url = 'image/showtree?path=' + getPath(node);
		},treeLoader);
		treeLoader.on('load',function(loader,node){
			node.expand(false);
		},treeLoader);
		
	    var tree = new Ext.tree.TreePanel({
	    	width : 350,
			border:false,
			split : true,
			minSize : 200,
			maxSize : 300,
			collapsible : true,
			autoScroll : true,
			bodyStyle : 'padding:5px',
	        loader :treeLoader,
	        rootVisible:true,
			root : new Ext.tree.AsyncTreeNode({
				id : "ROOTa",
				text : '',
				expanded : true
			})
	    });
	    
    	var panel = new Ext.Panel({
            layout:'border',
            items:[{
                region:'west',
                id:'west-panel1',
                title:'????',
                split:true,
                width: 200,
                minSize: 175,
                maxSize: 400,
                collapsible: true,
                margins:'5 0 5 5',
                items: [tree]
            },{
                region:'center',
                layout:'column',
                autoScroll:true,
                items:[{
                    columnWidth:.25, 
                    baseCls:'x-plain',
                    bodyStyle:'padding:5px 0 5px 5px',
                    items:[]
                }
                ,{
                    columnWidth:.25, 
                    baseCls:'x-plain',
                     bodyStyle:'padding:5px 0 5px 5px',
                    items:[]
                },{
                    columnWidth:.25,
                    baseCls:'x-plain',
                     bodyStyle:'padding:5px 0 5px 5px',
                    items:[]
                },{
                    columnWidth:.25,
                    baseCls:'x-plain',
                    bodyStyle:'padding:5px',
                    items:[]
                }]
            }]
        });
        
        var clickTree = function(node) {
        	var pth = getPath(node);
	    	Ext.Ajax.request({
	    		url:'image/showimages',
	    		method:'GET',
	    		params:{path:getPath(node)},
	    		success:function(response, options){
	    			//removeall
	    			/**
	    			var items = panel.items.get(1).items.get(0).items;
					items.each(function(item,index,length){
						this.removeAt(index);
						delete item;
					},items);
					
					items = panel.items.get(1).items.get(1).items;
					items.each(function(item,index,length){
						this.removeAt(index);
						delete item;
					},items);
					
					items = panel.items.get(1).items.get(2).items;
					items.each(function(item,index,length){
						this.removeAt(index);
						delete item;
					},items);
					
					items = panel.items.get(1).items.get(3).items;
					items.each(function(item,index,length){
						this.removeAt(index);
						delete item;
					},items);*/
					//panel.items.get(1).items.get(0).destroy();
	    			//panel.items.get(1).items.get(0).items.clear();
					//panel.items.get(1).items.get(0).doLayout(true,true);
	    			//panel.items.get(1).items.get(1).items.clear();
	    			//panel.items.get(1).items.get(2).items.clear();
	    			//panel.items.get(1).items.get(3).items.clear();
	    			
	    			//------------
	    			var res = eval(response.responseText);
	    			var files = res;
	    			for(var i=0;i<files.length;i++){
	    				var image = files[i];
	    				var im = new Ext.ux.Image({src:image.src,width:233,height:233});
		    			panel.items.get(1).items.get(i%4).items.add(im);
	    			}
	    			panel.doLayout();
	    		}
	    	});
	    }
        tree.on('click', clickTree, this);
	    this.body = panel;
        this.main.add(this.body);
        this.main.doLayout();
    }
});

but I can not clear the items with ext 3.3.1

[Mahta-m]

after using myPanel.items.clear() try this:

myPanel.update();
myPanel.doLayout();

it works for me.

[NoahK17]

In Ext6.x you can simply do...

myPanel.removeAll();