Page 2 of 2 FirstFirst 12
Results 11 to 13 of 13

Thread: Clear a Panel

  1. #11
    Sencha User
    Join Date
    Aug 2007
    Posts
    4
    Vote Rating
    0
      0  

    Default

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

    this is my code:
    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

  2. #12
    Sencha User
    Join Date
    Feb 2011
    Posts
    1
    Vote Rating
    0
      0  

    Default

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

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

    it works for me.

  3. #13
    Sencha Premium User NoahK17's Avatar
    Join Date
    Apr 2008
    Location
    Atlanta, GA
    Posts
    538
    Vote Rating
    2
      0  

    Default

    In Ext6.x you can simply do...

    myPanel.removeAll();
    Noah
    Front-End Developer
    Norfolk Southern

Page 2 of 2 FirstFirst 12

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •