Rearrangine extjs windows in cascade [ as we do in ..for example..windows7]

Click the image to view demo

 

Download files from here: windowRearrange.js  and  windowRearrange.html

Extjs tree filter [filtering tree items in extjs 4 ]

Download  source code from here:  treeDemp.html, treeDemo1.js  [Note: you will need extjs 4]
Click the image to see demo
The main idea is for each keyup in the text box i do following:

1. tree.getRootNode().cascadeBy(function() { // descends into child nodes
2.    if(!(this.data.qtip.indexOf(txt.getValue())>-1)) {//Now do the actual filtering
3.         console.log("remove");
4.         removeArray[i] = this;//cannot call this.remove() here as cascadeBy() tends to traverse all the nodes and if node is removed it gives error
5.         i++;
6.    }
7.    
8. });
9. for(var j=0;j<i;j++) {
10.         removeArray[j].remove();//do actual removing, but unforunately once //removed,,there is not a easy way to add back to same location so , here i //simply regenrate whole tree again at line 53 : setnode(tree)
12. }

Detail code given below:

1. Ext.application({
2.     name: 'treeFilterDemo',
3.     appFolder: 'app',
5.     requires: [  'Ext.form.Panel','Ext.container.Viewport',
6.                  'Ext.tab.Panel','Ext.tree.Panel','Ext.data.TreeStore','Ext.layout.container.Border'
7.              ],
8.      setnode:function(tree){
9.                 var node = {text:'', qtip:'',expanded:true, leaf:false, children:[]};
10.                
11.                 var node1_1 = {text:'apple_1', qtip:'apple_1',expanded:true, leaf:true, children:[]};
12.                 var node1_2 = {text:'apple_2', qtip:'apple_2',expanded:true, leaf:true, children:[]};
13.                 var node1 = {text:'apple', qtip:'apple,apple_1,apple_2',expanded:true, leaf:false, children:[node1_1,node1_2]};
14.                 var node2_1 = {text:'apricoat_1', qtip:'apricoat_1',expanded:true, leaf:true, children:[]};
15.                 var node2_2 = {text:'apricoat_2', qtip:'apricoat_2',expanded:true, leaf:true, children:[]};
16.                 var node2 = {text:'apricoat', qtip:'apricoat,apricoat_1,apricoat_2',expanded:true, leaf:false, children:[node2_1,node2_2]};
17.                 node.children = [node1,node2];
18.                 tree.setRootNode(node);
19.         },
21.     launch: function() {
22.                 var setNodeFn = this.setnode;
23.                 var tree =  Ext.create('Ext.tree.Panel', {
24.                 myRootNodes:[],
25.                 region:'center',
26.                 hideHeaders: true,
27.                 rootVisible: false,
28.                 expandedNodes:[],
29.                  viewConfig: {
30.                     plugins: {
31.                         ptype: 'treeviewdragdrop',
32.                         appendOnly: true
33.                     }
34.                 },
35.                 height: 350,
36.                 width: 400,
37.                 });
38.                 var textField = {xtype:'textfield',
39.                 prompt:'serach',
40.                 name: 'name',
41.                 region:'north',
42.                 value:'Type filter text',
43.                 enableKeyEvents:true,
44.                 listeners:{
45.                     focus:{fn:function (view, record, item, index, even) {
46.                    this.setValue("");
47.            
49.                     }},
50.                     keyup:{
51.                                 fn:function(view, record, item, index, even){
52.                                 var txt= this;
53.                                 setNodeFn(tree);
54.                                 var removeArray = [];
55.                                 var i=0;
56.                                                         tree.getRootNode().cascadeBy(function() { // descends into child nodes
57.                                                            if(!(this.data.qtip.indexOf(txt.getValue())>-1)) {//Now do the actual filtering
58.                                                                 console.log("remove");
59.                                                                 removeArray[i] = this;//cannot call this.remove() here as cascadeBy() tens to traverse all the nodes and if node is removed it gives error
60.                                                                 i++;
61.                                                            }
62.                                                            
63.                                                         });
64.                                                         for(var j=0;j<i;j++) {
65.                                                                 removeArray[j].remove();//do actual removing, but unforunately once removed,,there is not a easy way to add back to same location so , here i simply regenrate whole tree again at line 53 : setnode(tree)
66.                                                        
67.                                                         }
68.                         }
69.                     }
70.                                
71.                  }
72.                };
73.                 this.setnode(tree);
74.         Ext.create('Ext.container.Viewport', {
76.             items: [
77. textField,tree
78.             ]
79.         });
82.     }
83. });

EXTJS Error : strange error in border.js

make sure you imported 'Ext.layout.container.Border'

EXTJS Error : me.dockedItems is undefined:

one main reason is that, in your init function you did not called "callParent()".
"callParent()" should be called usually at the end of your init function

stateful example in extjs [saving tree selection in extjs]

First read this:  http://dev.sencha.com/deploy/ext-4.0.2a/docs/#/api/Ext.state.Stateful-cfg-stateful
Following example demonstrate simple way to save a selected item in tree:

       

           this.tree = Ext.create(‘Ext.tree.Panel’, {
    viewConfig: {
        plugins: {
            ptype: ‘treeviewdragdrop’,
            appendOnly: true
        }
    },
    height: 350,
    width: 400,
    stateEvents: ['saveSelectedItem'],
    stateId:’myTreeId’,
    stateful:true,
    rootVisible: false,
    mySelectedItem:”,//my own added Variable
    getState : function () {
        /*this is place where we state what things are to be saved*/
        console.log(‘saving’+this.mySelectedItem);
        /*we return thing to be save in format key:value*/
        return {
            mySelectedItem: this.mySelectedItem
        }
    },
    applyState : function (state) {
        /*this is place where we recover the saved state*/
        console.log(state);
        console.log(“Previosuly selected “+state.mySelectedItem);
     },
    listeners:{
       itemclick:{fn:function (view, record, item, index, even) {
            console.log(“saving item:”+record.data.text);
            this.mySelectedItem =  record.data.text;
            this.fireEvent(‘saveSelectedItem’);
       }}
    }});