TreePanel with checkboxes... doesn't in IE

[andrewjbaker]

Hi all,

Using 1.1.1, I've successfully created a TreePanel control with checkboxes courtesy of crepitus.com...

But, I then read that Ext 1.x also has support for checkboxes against tree nodes (though it's not made clear in the documentation). So... I've altered my code to use the built-in checkbox functionality and all is well. Well, that is, unless you attempt to view the Web site using IE6/7.

Debugging hints at an error within the section that constructs the TreePanel.

Any assistance gratefully received.



/*
* makeStaff - make Staff ContentPanel
*/
function
makeStaff()
{
tpStaff = new Ext.tree.TreePanel('tpStaff', {
animate: true,
containerScroll: true,
enableDD: false,
fitToFrame: true,
id: 'tpStaff',
loader: new Ext.tree.TreeLoader({
baseAttrs: { checked: false },
baseParams: { methodName: 'Execute', args: _establishmentId },
dataUrl: 'Bsl/GetStaff.ashx'
}),
name: 'tpStaff',
rootUIProvider: Ext.tree.CheckboxNodeUI,
rootVisible: false,
selModel: new Ext.tree.CheckNodeMultiSelectionModel()
});
tpStaff.setRootNode(new Ext.tree.AsyncTreeNode({
draggable: false,
id: 'atnStaff',
text: 'Staff',
uiProvider: Ext.tree.CheckboxNodeUI
}));
tpStaff.render();

tpStaff.on('click', function() {
var sm = tpStaff.getSelectionModel();
var nodes = sm.getSelectedNodes();
_personId = nodes[0].attributes.id;
loadState();
});

var fStaff = new Ext.form.Form({
labelWidth: 128
});
fStaff.add(
tpStaff
);
fStaff.render('fStaff');
}

[andrewjbaker]

OK, IE is behaving now. It seems that it was a scoping-related issue (note the related).

In Mozilla Firefox all is OK, but within IE I had to declare the variable tpStaff in a global manner outside the function.



tpStaff = null;

/*
* makeStaff - make Staff ContentPanel
*/
function
makeStaff()
{
tpStaff = new Ext.tree.TreePanel('tpStaff', {
animate: true,
containerScroll: true,
enableDD: false,
fitToFrame: true,
id: 'tpStaff',
loader: new Ext.tree.TreeLoader({
baseAttrs: { checked: false },
baseParams: { methodName: 'Execute', args: _establishmentId },
dataUrl: 'Bsl/GetStaff.ashx'
}),
name: 'tpStaff',
rootUIProvider: Ext.tree.CheckboxNodeUI,
rootVisible: false,
selModel: new Ext.tree.CheckNodeMultiSelectionModel()
});
tpStaff.setRootNode(new Ext.tree.AsyncTreeNode({
draggable: false,
id: 'atnStaff',
text: 'Staff',
uiProvider: Ext.tree.CheckboxNodeUI
}));
tpStaff.render();

tpStaff.on('click', function() {
var sm = tpStaff.getSelectionModel();
var nodes = sm.getSelectedNodes();
_personId = nodes[0].attributes.id;
loadState();
});

var fStaff = new Ext.form.Form({
labelWidth: 128
});
fStaff.add(
tpStaff
);
fStaff.render('fStaff');
}