PDA

View Full Version : New to Ext JS - Trouble adding a treegrid component to a tab panel



briantai
11 Aug 2010, 6:43 PM
Jumped into Ext JS a few days ago and it seems like it's great for rapid development of web app interfaces. Worked a customized version of the treegrid component off of the example and used Ext Designer to come up with a tabbed panel interface. The tree grid renders properly when I set it to renderTo=Ext.getBody() but not when I try adding it to the tabbed panel configuration.

I defined the treegrid component as a new variable and then listed that variable as one of the "items" for the tabbed panel.


var TDCurrentDay = new Ext.ux.tree.TreeGrid({
title: 'Current Day Display: '+'August 11th, 2010',
width: 1500,
height: 500,
tbar: {
xtype: 'toolbar',
items: [
{xtype: 'button',text: 'Expand All', icon:'../images/page_spearmint_down.png',
handler: function(){
TDCurrentDay.expandAll();
}
},
{xtype: 'spacer',width:5},
{xtype: 'button',text: 'Collapse All', icon:'../images/page_spearmint_up.png',
handler: function(){
TDCurrentDay.collapseAll();
}
}
]
},
enableDD: false,
columns:[
{header: 'Unit',dataIndex: 'genUnit',width: 200},
{header: 'H1',width: 50,dataIndex: 'duration',align: 'center'},
{header: 'H2',width: 50,dataIndex: 'duration',align: 'center'},
{header: 'H3',width: 50,dataIndex: 'duration',align: 'center'},
{header: 'H4',width: 50,dataIndex: 'duration',align: 'center'},
{header: 'H5',width: 50,dataIndex: 'duration',align: 'center'},
{header: 'H6',width: 50,dataIndex: 'duration',align: 'center'},
{header: 'H7',width: 50,dataIndex: 'duration',align: 'center'},
{header: 'H8',width: 50,dataIndex: 'duration',align: 'center'},
{header: 'H9',width: 50,dataIndex: 'duration',align: 'center'},
{header: 'H10',width: 50,dataIndex: 'duration',align: 'center'},
{header: 'H11',width: 50,dataIndex: 'duration',align: 'center'},
{header: 'H12',width: 50,dataIndex: 'duration',align: 'center'},
{header: 'H13',width: 50,dataIndex: 'duration',align: 'center'},
{header: 'H14',width: 50,dataIndex: 'duration',align: 'center'},
{header: 'H15',width: 50,dataIndex: 'duration',align: 'center'},
{header: 'H16',width: 50,dataIndex: 'duration',align: 'center'},
{header: 'H17',width: 50,dataIndex: 'duration',align: 'center'},
{header: 'H18',width: 50,dataIndex: 'duration',align: 'center'},
{header: 'H19',width: 50,dataIndex: 'duration',align: 'center'},
{header: 'H20',width: 50,dataIndex: 'duration',align: 'center'},
{header: 'H21',width: 50,dataIndex: 'duration',align: 'center'},
{header: 'H22',width: 50,dataIndex: 'duration',align: 'center'},
{header: 'H23',width: 50,dataIndex: 'duration',align: 'center'},
{header: 'H24',width: 50,dataIndex: 'duration',align: 'center'}
],
dataUrl: 'treegrid-data.json'
});



{
xtype: 'panel',
title: 'Current Day',
id: 'currentDayTab',
autoShow: true
items:[TDCurrentDay]
},

Also, couldn't figure out how to programmatically add the tree grid component to the tabbed panel. I'm sure this is a simple fix for most of you (:|