PDA

View Full Version : Ext JS 4 - Basic Tree View



ank5
15 Oct 2013, 8:05 PM
I need to create a very basic tree with some static entries, just like the example in

http://docs.sencha.com/extjs/4.2.2/extjs-build/examples/build/KitchenSink/ext-theme-neptune/#basic-trees

I took the code from the code preview section and added it to the HTML file, but that is not sufficient. What else do I need to do to get the basic tree (I don't need the 'Tree with No Lines' and 'Tree with Arrows')?

Below is my HTML file


<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="ext-4.2.1.883/resources/css/ext-all.css">
<script type="text/javascript" src="ext-4.2.1.883/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.define('KitchenSink.view.tree.BasicTrees', {
extend: 'Ext.Container',
xtype: 'basic-trees',
width: 640,


layout: {
type: 'table',
columns: 2,
tdAttrs: { style: 'padding: 10px;' }
},


defaults: {
xtype: 'treepanel',
width: 300,
height: 200,
rootVisible: false,
// Sharing the store synchronizes the views:
store: 'Files'
},

initComponent: function() {
this.items = [
{
title: 'Tree'
},
{
title: 'Tree with No Lines',
lines: false
},
{
title: 'Tree with Arrows',
useArrows: true,
colspan: 2
}
];


this.callParent();
}
});
</script>
<title id="title">Building A Basic Tree</title>
</head>
<body>
</body>

</html>

Gary Schlosberg
21 Oct 2013, 11:30 AM
If you are looking for a more standalone example of a tree (and for more standalone examples in general) you might look to the examples within the API docs:
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.tree.Panel
https://fiddle.sencha.com/#fiddle/13c