Permalink
Browse files

adding multi-column tree to example3

  • Loading branch information...
1 parent 07d39e0 commit 39d12852943ef1403bb5dba3f4903e08e575f2aa @enygma committed May 3, 2012
@@ -12,7 +12,8 @@ Ext.define('example3.controller.Index', {
'index.Samplegrid',
'index.Samplednd',
'index.Sampletabs',
- 'index.Sampletree'
+ 'index.Sampletree',
+ 'index.Multicoltree'
],
models : ['Sample'],
stores : ['Sample'],
@@ -49,26 +49,10 @@ Ext.define('example3.view.index.Buttons', {
Ext.getCmp('content_area').remove(f, true);
}
- var grid = Ext.create('example3.view.index.Sampletabs');
- Ext.getCmp('content_area').add(grid);
+ var tabs = Ext.create('example3.view.index.Sampletabs');
+ Ext.getCmp('content_area').add(tabs);
}
},
- // {
- // margin: 4,
- // xtype : 'button',
- // text : 'Load Drag & Drop',
- // handler: function() {
- // console.log('load DnD');
-
- // //clear out the panel...
- // while(f = Ext.getCmp('content_area').items.first()){
- // Ext.getCmp('content_area').remove(f, true);
- // }
-
- // var panel = Ext.create('example3.view.index.Samplednd');
- // Ext.getCmp('content_area').add(panel);
- // }
- // },
{
margin: 4,
xtype : 'button',
@@ -84,6 +68,22 @@ Ext.define('example3.view.index.Buttons', {
var tree = Ext.create('example3.view.index.Sampletree');
Ext.getCmp('content_area').add(tree);
}
- }
+ },
+ {
+ margin: 4,
+ xtype : 'button',
+ text : 'Load Multi-column Tree',
+ handler: function() {
+ console.log('load multi-tree');
+
+ //clear out the panel...
+ while(f = Ext.getCmp('content_area').items.first()){
+ Ext.getCmp('content_area').remove(f, true);
+ }
+
+ var panel = Ext.create('example3.view.index.Multicoltree');
+ Ext.getCmp('content_area').add(panel);
+ }
+ },
]
});
@@ -0,0 +1,66 @@
+// Examples: http://www.sencha.com/learn/ext-js-trees/
+
+Ext.define('example3.view.index.Multicoltree', {
+
+ extend : 'Ext.tree.Panel',
+
+ alias : 'widget.multicoltree',
+
+ title : 'Sample Double Tree Panel',
+
+ width : 400,
+ height : 400,
+
+ // show the root node or not
+ //rootVisible: false,
+
+ // show the lines connecting the parent/child
+ //lines: true,
+
+ columns: [
+ {
+ xtype: 'treecolumn',
+ text: 'Name 1',
+ dataIndex: 'name',
+ width: 150
+ },
+ {
+ xtype: 'treecolumn',
+ text: 'Name 2',
+ dataIndex: 'description',
+ width: 150
+ }
+ ],
+
+ fields: [
+ 'name',
+ 'description'
+ ],
+
+ store: Ext.create('Ext.data.TreeStore', {
+ root: {
+ name: 'Root',
+ description: 'Root description',
+ expanded: true,
+ children: [
+ {
+ name: 'Child 1',
+ description: 'Child, just 1',
+ expanded: true,
+ children: [
+ {
+ name: 'Child 1-1',
+ description: 'Child 1 of 1',
+ leaf: true
+ }
+ ]
+ },
+ {
+ name: 'Child 2',
+ description: 'Child, just 2',
+ leaf: true
+ }
+ ]
+ }
+ })
+});
@@ -1,38 +1,39 @@
Ext.define('example3.view.index.Sampletree', {
- extend: 'Ext.panel.Panel',
+ extend: 'Ext.tree.Panel',
+
+ title : 'Sample Tree Panel',
alias : 'widget.sampletree',
-
- items : [
- Ext.create('Ext.tree.Panel', {
-
- title : 'Sample Tree Panel',
- width : 400,
- height : 400,
+ width : 400,
+ height : 400,
- store: Ext.create('Ext.data.TreeStore', {
- root: {
- text: 'Root',
- expanded: true,
- children: [
- {
- text: 'Child 1',
- children: [
- {
- text: 'Child 1-1',
- leaf: true
- }
- ]
- },
- {
- text: 'Child 2',
- leaf: true
- }
- ]
- }
- })
- })
- ]
+ // show the root node or not
+ //rootVisible: false,
+
+ // show the lines connecting the parent/child
+ //lines: true,
+
+ store: Ext.create('Ext.data.TreeStore', {
+ root: {
+ text: 'Root',
+ expanded: true,
+ children: [
+ {
+ text: 'Child 1',
+ children: [
+ {
+ text: 'Child 1-1',
+ leaf: true
+ }
+ ]
+ },
+ {
+ text: 'Child 2',
+ leaf: true
+ }
+ ]
+ }
+ })
});

0 comments on commit 39d1285

Please sign in to comment.