PDA

View Full Version : Treepanel and RadioGroup Newbie Questions



timb73
6 Sep 2010, 3:43 AM
Hi there,
I have a viewport with a LHS treepanel and a "detail" panel on the RHS.
In the toolbar of the RHS detail panel I have a radioGroup with 2 options: summary details and full details.
viewport initial declaration:


new Ext.Viewport({
layout: 'border',
defaults: {
split: true,
border: true,
bodyStyle: 'padding:10px'
},
items: [
{
defaults: {
border: false
},
region: 'west',
collapsible: true,
xtype: 'panel', // This panel will first contain the loading indicator later the tree.
id: 'lhs-panel',
autoScroll: true,
monitorSize: true,
layout: 'fit',
title: 'Explorer',
bodyStyle: 'padding:10px 0 10px 0px',
width: 300
}, {
region: 'center',
xtype: 'panel', // This panel will present details of the selected tree node.
id: 'rhs-panel',
autoScroll: true,
tbar: [
' ',
{
xtype: 'radiogroup',
columns: [115, 115],
items: [
{boxLabel: 'Summary details', name: 'rb-detail', id: 'rb-detail-summ', inputValue: 'summary', checked: true},
{boxLabel: 'Full details', name: 'rb-detail', id: 'rb-detail-full', inputValue: 'full'}
],
listeners: {
change: function() {
full = !full;
refreshRhsPanel();
}
}
},
{
xtype: 'checkbox',
height: (Ext.isIE ? 30:20),
boxLabel: 'Show All Empty Fields',
listeners: {
check: function() {
showEmptyFields = !showEmptyFields;
refreshRhsPanel();
}
}
}
]
}
]
});



When the user initially clicks on a node in the treepanel, there may be additional information available from the server for the selected node. In this case I display a "More Info" button in the RHS detail panel.
Clicking on the "More Info" button causes an Ext.Ajax.request to retrieve the additional info as JSON.

Due to the nature of the app I am working on, I need to do some pre-processing of the JSON data within the JS before displaying anything within the treepanel and the detail panel.

There are a couple of things that I would like to achieve:
1) When the user clicks on the "More Info" button within the detail panel I want to change the icon for the selected node to the "loading" spinner whilst the JSON is being retrieved and pre-processed, and then change it back to the original icon once the new data is loaded. I've tried setting the iconCls for the selected node but this doesn't seem to have the desired effect.

2) When the user clicks on the "More Info" button I also want to automatically set the RHS panel toolbar radioGroup "full details" radiobutton to be selected (irrespective of what was selected before). It's not at all obvious to me how I achieve this. I have tried various things but nothing has worked.

Any assistance would be gratefully received.
Thanks.

Condor
6 Sep 2010, 4:18 AM
node.getUI().beforeLoad();
...
node.getUI().afterLoad();

Ext.getCmp('id-of-radiogroup').setValue('full');

timb73
6 Sep 2010, 4:20 AM
Awesome. Thanks!