gistfile1.js

	/**Tree Panel with search bar...*/
			var SBTreePanel = function(){
				SBTreePanel.superclass.constructor.call(this, {
					id:'sbooktreepanel',
					region:'west',
					split:true,
					width: 280,
					minSize: 175,
					collapsible: true,
					rootVisible:false,
					lines:false,
					autoScroll:true,
					animCollapse:false,
					animate: false,
					collapseMode:'mini',
					root: treedata,
					collapseFirst:false,
					xtype:'treepanel',
					title:'Scrapbook Folders',
					autoScroll:true,
					root: treedata,
					listeners: {
						contextmenu : onCtxMenu
					}
				});
				
				this.getSelectionModel().on('beforeselect', function(sm, node){
					return node.isLeaf();
				});
				
			};
			Ext.extend(SBTreePanel, Ext.tree.TreePanel, {
				initComponent: function(){
					this.hiddenPkgs = [];
					
					this.filter = new Ext.tree.TreeFilter();
					Ext.apply(this, {
						tbar:[ ' ',
						new Ext.form.TextField({
							width: 200,
							emptyText:'Find a page',
							enableKeyEvents: true,
							listeners:{
								render: function(f){
									this.filter = new Ext.tree.TreeFilter(this, {
										clearBlank: true,
										autoClear: true
									});
								},
								keydown: {
									fn: this.filterTree,
									buffer: 350,
									scope: this
								},
								scope: this
							}
						}), ' ', ' ',
						{
							iconCls: 'edit-all',
							tooltip: 'Edit All',
							handler: function(){this.bbar.show()},
							scope: this
						},
						{
							iconCls: 'expand-all',
							tooltip: 'Expand All',
							handler: function(){ this.root.expand(true); },
							scope: this
						}, '-', {
							iconCls: 'collapse-all',
							tooltip: 'Collapse All',
							handler: function(){ this.root.collapse(true); },
							scope: this
						}],
						bbar:{
							hidden: true,
							items: [{
								text: 'Select All',
								handler: this.selectAll,
								iconCls: 'icon-config'
							},'-',{
								text: 'Deselect All',
								//handler: this.scrollToMember.createDelegate(this, ['props']),
								iconCls: 'icon-prop'
							}, '-',{
								text: 'Delete Selected',
								//handler: this.scrollToMember.createDelegate(this, ['methods']),
								iconCls: 'icon-method'
							}]
						}
					})
					SBTreePanel.superclass.initComponent.call(this);
				},
				
				selectAll : function() {console.log('Select all')},
				//collapse: function(){console.log('Collapse panel...'); return true;},
				filterTree: function(t, e){
					var text = t.getValue();
					if(text=='' || !text){
						this.root.cascade(function(){this.ui.show()});
						this.root.collapseChildNodes(true);
						return;
					}
					this.expandAll();
					//Custom filter... shows parents also. Like in ExtJS API..
					this.filter_helper(this.root,t,e);
					
				},
				filter_helper: function(root,t,e){
					var text = t.getValue();
					var re = new RegExp(text,'i'); 
					
					var childNodes = root.childNodes;
					var flag = false;
					var filtChild = [];
					var self = this;
					root.eachChild(function(){
						var pv = self.filter_helper(this,t,e);//Also push the parent
						
						var rv = re.test(this.text);

						if(rv||pv){
							flag = true;
							filtChild.push(this);
						}else{
							this.ui.hide();
						}
					})
					
					if(flag == true){
						flag = false;
						//show the filtered children and their parent
						for(c in filtChild){
							if(c<filtChild.length){
								filtChild[c].ui.show();
							}
						}
						return true;
					}else{
						return false;
					}
				},
				
			});
			var sbtreepanel = new SBTreePanel();