Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

adding multi-column tree to example3

  • Loading branch information...
commit 39d12852943ef1403bb5dba3f4903e08e575f2aa 1 parent 07d39e0
Chris Cornutt authored May 02, 2012
3  zfapp/public/js/examples/example3/app/controller/Index.js
@@ -12,7 +12,8 @@ Ext.define('example3.controller.Index', {
12 12
 		'index.Samplegrid',
13 13
 		'index.Samplednd',
14 14
 		'index.Sampletabs',
15  
-		'index.Sampletree'
  15
+		'index.Sampletree',
  16
+		'index.Multicoltree'
16 17
 	],
17 18
 	models	: ['Sample'],
18 19
 	stores	: ['Sample'],
38  zfapp/public/js/examples/example3/app/view/index/Buttons.js
@@ -49,26 +49,10 @@ Ext.define('example3.view.index.Buttons', {
49 49
 					Ext.getCmp('content_area').remove(f, true);
50 50
 				}
51 51
 
52  
-				var grid = Ext.create('example3.view.index.Sampletabs');
53  
-				Ext.getCmp('content_area').add(grid);
  52
+				var tabs = Ext.create('example3.view.index.Sampletabs');
  53
+				Ext.getCmp('content_area').add(tabs);
54 54
 			}
55 55
 		},
56  
-		// {
57  
-		// 	margin: 4,
58  
-		// 	xtype	: 'button',
59  
-		// 	text	: 'Load Drag & Drop',
60  
-		// 	handler: function() {
61  
-		// 		console.log('load DnD');
62  
-
63  
-		// 		//clear out the panel...
64  
-		// 		while(f = Ext.getCmp('content_area').items.first()){
65  
-		// 			Ext.getCmp('content_area').remove(f, true);
66  
-		// 		}
67  
-
68  
-		// 		var panel = Ext.create('example3.view.index.Samplednd');
69  
-		// 		Ext.getCmp('content_area').add(panel);
70  
-		// 	}
71  
-		// },
72 56
 		{
73 57
 			margin: 4,
74 58
 			xtype	: 'button',
@@ -84,6 +68,22 @@ Ext.define('example3.view.index.Buttons', {
84 68
 				var tree = Ext.create('example3.view.index.Sampletree');
85 69
 				Ext.getCmp('content_area').add(tree);
86 70
 			}
87  
-		}
  71
+		},
  72
+		{
  73
+			margin: 4,
  74
+			xtype	: 'button',
  75
+			text	: 'Load Multi-column Tree',
  76
+			handler: function() {
  77
+				console.log('load multi-tree');
  78
+
  79
+				//clear out the panel...
  80
+				while(f = Ext.getCmp('content_area').items.first()){
  81
+					Ext.getCmp('content_area').remove(f, true);
  82
+				}
  83
+
  84
+				var panel = Ext.create('example3.view.index.Multicoltree');
  85
+				Ext.getCmp('content_area').add(panel);
  86
+			}
  87
+		},
88 88
 	]
89 89
 });
66  zfapp/public/js/examples/example3/app/view/index/Multicoltree.js
... ...
@@ -0,0 +1,66 @@
  1
+// Examples: http://www.sencha.com/learn/ext-js-trees/
  2
+
  3
+Ext.define('example3.view.index.Multicoltree', {
  4
+
  5
+	extend : 'Ext.tree.Panel',
  6
+
  7
+	alias  : 'widget.multicoltree',
  8
+	
  9
+	title  : 'Sample Double Tree Panel',
  10
+
  11
+	width  : 400,
  12
+	height : 400,
  13
+
  14
+	// show the root node or not
  15
+	//rootVisible: false,
  16
+
  17
+	// show the lines connecting the parent/child
  18
+	//lines: true,
  19
+
  20
+	columns: [
  21
+		{
  22
+			xtype: 'treecolumn',
  23
+			text: 'Name 1',
  24
+			dataIndex: 'name',
  25
+			width: 150
  26
+		},
  27
+		{
  28
+			xtype: 'treecolumn',
  29
+			text: 'Name 2',
  30
+			dataIndex: 'description',
  31
+			width: 150
  32
+		}
  33
+	],
  34
+
  35
+	fields: [
  36
+		'name',
  37
+		'description'
  38
+	],
  39
+
  40
+	store: Ext.create('Ext.data.TreeStore', {
  41
+	    root: {
  42
+	        name: 'Root',
  43
+	        description: 'Root description',
  44
+	        expanded: true,
  45
+	        children: [
  46
+	            {
  47
+	                name: 'Child 1',
  48
+	                description: 'Child, just 1',
  49
+	                expanded: true,
  50
+	                children: [
  51
+	                	{
  52
+	                		name: 'Child 1-1',
  53
+	                		description: 'Child 1 of 1',
  54
+	                		leaf: true
  55
+	                	}
  56
+	                ]
  57
+	            },
  58
+	            {
  59
+	                name: 'Child 2',
  60
+	                description: 'Child, just 2',
  61
+	                leaf: true
  62
+	            }
  63
+	        ]
  64
+	    }
  65
+	})
  66
+});
63  zfapp/public/js/examples/example3/app/view/index/Sampletree.js
... ...
@@ -1,38 +1,39 @@
1 1
 Ext.define('example3.view.index.Sampletree', {
2 2
 
3  
-	extend: 'Ext.panel.Panel',
  3
+	extend: 'Ext.tree.Panel',
  4
+		
  5
+	title  : 'Sample Tree Panel',
4 6
 
5 7
 	alias  : 'widget.sampletree',
6  
-	
7  
-	items  : [
8  
-		Ext.create('Ext.tree.Panel', {
9  
-			
10  
-			title  : 'Sample Tree Panel',
11 8
 
12  
-			width  : 400,
13  
-			height : 400,
  9
+	width  : 400,
  10
+	height : 400,
14 11
 
15  
-			store: Ext.create('Ext.data.TreeStore', {
16  
-			    root: {
17  
-			        text: 'Root',
18  
-			        expanded: true,
19  
-			        children: [
20  
-			            {
21  
-			                text: 'Child 1',
22  
-			                children: [
23  
-			                	{
24  
-			                		text: 'Child 1-1',
25  
-			                		leaf: true
26  
-			                	}
27  
-			                ]
28  
-			            },
29  
-			            {
30  
-			                text: 'Child 2',
31  
-			                leaf: true
32  
-			            }
33  
-			        ]
34  
-			    }
35  
-			})
36  
-		})
37  
-	]
  12
+	// show the root node or not
  13
+	//rootVisible: false,
  14
+
  15
+	// show the lines connecting the parent/child
  16
+	//lines: true,
  17
+
  18
+	store: Ext.create('Ext.data.TreeStore', {
  19
+	    root: {
  20
+	        text: 'Root',
  21
+	        expanded: true,
  22
+	        children: [
  23
+	            {
  24
+	                text: 'Child 1',
  25
+	                children: [
  26
+	                	{
  27
+	                		text: 'Child 1-1',
  28
+	                		leaf: true
  29
+	                	}
  30
+	                ]
  31
+	            },
  32
+	            {
  33
+	                text: 'Child 2',
  34
+	                leaf: true
  35
+	            }
  36
+	        ]
  37
+	    }
  38
+	})
38 39
 });

0 notes on commit 39d1285

Please sign in to comment.
Something went wrong with that request. Please try again.