Column tree
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
-->
<!-- Revised from Ext JS Library 3.0.0 -->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/examples/ux/css/ColumnNodeUI.css" />
<script type="text/javascript" src="ext-3.0.0/examples/ux/ColumnNodeUI.js"></script>
<script>
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.onReady(function(){
var tree = new Ext.ux.tree.ColumnTree({
width: 550,
height: 300,
rootVisible:false,
autoScroll:true,
title: 'Example Tasks',
renderTo: Ext.getBody(),
columns:[{
header:'Task',
width:330,
dataIndex:'task'
},{
header:'Duration',
width:100,
dataIndex:'duration'
},{
header:'Assigned To',
width:100,
dataIndex:'user'
}],
loader: new Ext.tree.TreeLoader({
dataUrl:'ext-3.0.0/examples/tree/column-data.json',
uiProviders:{
'col': Ext.ux.tree.ColumnNodeUI
}
}),
root: new Ext.tree.AsyncTreeNode({
text:'Tasks'
})
});
});
</script>
</head>
<body>
<h1>ColumnTree Example</h1>
</body>
</html>
Related examples in the same category