Apr 03, 2014, 6:26 PM
Help with TreePanel using BufferedRenderer and CommandColumn
I'm having a hard time getting my tree to render correctly when I'm using a BufferedRenderer, and have a CommandColumn set with OverOnly(true). Everything works correctly if the renderer isn't there, but the I take a performance hit. Incidentally, the renderer is fine if I don't use OverOnly, but for the purpose of this page, OverOnly is definitely preferred. Referring to the attached screenshot... If I expand the NONCONSOL node, all of the children work as expected... the command shows up when I hover over a row. As you can see, the children of the XTOTUPS node already have the command rendered. If I hover over any of those nodes, I get the error...
"0x800a138f - JavaScript runtime error: Unable to get property 'addCls' of undefined or null reference"
and the page crashes.
NOTE: The code snippet has the CommandColumn moved to the left of the text at the request of the business owner. The screenshot was taken before that change.
Much thanks to anyone that can provide any insight or workarounds.
"0x800a138f - JavaScript runtime error: Unable to get property 'addCls' of undefined or null reference"
and the page crashes.
Html.X().TreePanel()
.ID("treeDrillDown")
.Animate(false)
.RootVisible(false)
.Root(Html.X().Node().NodeID("0"))
.DisplayField("text")
.Height(415)
.Width(685)
.MarginSpec("10 0 0 0")
.IDMode(IDMode.Static)
.Store(
Html.X().TreeStore()
.ID("storeDrillDown")
.AutoLoad(false)
)
.ColumnModel(
Html.X().CommandColumn()
.Width(25)
.Commands(
Html.X().GridCommand()
.CommandName("EditGroup")
.Icon(Icon.Add)
)
.OverOnly(true)
.DirectEvents(de =>
{
de.Command.Url = Url.Action("_TempEntityRequest_EntiyGroupSelection", "Temp", new { area = "CARMA" });
de.Command.FormID = "frmSymbolSelection";
de.Command.ExtraParams.Add(new Parameter { Name = "entity", Value = "record.data.id", Mode = Ext.Net.ParameterMode.Raw });
}),
Html.X().TreeColumn()
.Flex(1)
.DataIndex("text")
)
.Plugins(
Html.X().BufferedRenderer()
)
.Listeners(l =>
{
l.BeforeLoad.Fn = "nodeLoad";
})
//-------------------------------------------------------------------------------------
// Tree Loading (when a node is clicked)
//-------------------------------------------------------------------------------------
var nodeLoad = function (store, operation, options) {
var node = operation.node;
//added here to see if it speeds up.
Ext.suspendLayouts();
App.treeDrillDown.suspendEvents();
if (node.hasChildNodes() == true) {
node.removeAll();
}
applyLoadMask(App.tabEntityTrees, true, 'Loading...');
Ext.net.DirectMethod.request({
url: "/FRP/Temp/SymbolGroupRequest_GetChildren",
cleanRequest: true,
params: {
nodeID: node.getId(),
instance: App.cboInstance.getValue(),
root: App.cboRoot.getValue()
},
success: function (result) {
applyLoadMask(App.tabEntityTrees, false);
node.set('loading', false);
node.set('loaded', true);
node.appendChild(result);
node.expand();
},
failure: function (errorMsg) {
applyLoadMask(App.tabEntityTrees, false);
Ext.Msg.alert('Error', errorMsg);
}
});
//added here to see if it speeds up.
Ext.resumeLayouts(true);
App.treeDrillDown.resumeEvents();
return false;
}
Unfortunately, I can't post all of my code (and had to strip out some of the info from the screenshot), since this is for an internal application at a very large company. Hopefully I've provided enough info that someone can provide a suggestion as to how to get around this issue.NOTE: The code snippet has the CommandColumn moved to the left of the text at the request of the business owner. The screenshot was taken before that change.
Much thanks to anyone that can provide any insight or workarounds.
Last edited by craigthames; Apr 03, 2014 at 6:30 PM.