View Full Version : Ext JS 4 - Basic Tree View

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


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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="ext-">
<script type="text/javascript" src="ext-"></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

<title id="title">Building A Basic Tree</title>


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: