treePicker

HTML

<script src="http://cdn.sencha.com/ext/gpl/4.2.1/examples/ux/TreePicker.js"></script>
<script src="http://cdn.sencha.com/ext/gpl/4.2.1/ext-all-dev.js"></script>
<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.1/resources/css/ext-all-neptune.css">

JavaScript

var store = Ext.create('Ext.data.TreeStore', {
    root: {
        expanded: true,
        children: [
            { id: 1, text: "detention", leaf: true },
            { id: 2, text: "homework", expanded: true, children: [
                {id: 21, text: "book report", leaf: true },
                {id: 22, text: "algebra", leaf: true}
            ] },
            { text: "buy lottery tickets", leaf: true }
        ]
    }
});

Ext.create('Ext.ux.TreePicker', {
    store: store,
    displayField: 'text',
    renderTo: Ext.getBody()
});