PDA

View Full Version : 4.2 treegrid when tree expand occur error



op1op
15 Apr 2013, 9:07 PM
Hi all,I use treegrid than want to display child with radio,but when expand that catch exception like this:Uncaught TypeError: Cannot call method 'insertSibling' of null in file src/tree/view.js line 312

tmpEl = nodeEl.insertSibling

Use the example:\examples\kitchensink\app\view\tree\TreeGrid.js

add the code "dockedItems" like:

Ext.define('KitchenSink.view.tree.TreeGrid', { extend: 'Ext.tree.Panel',

requires: [
'Ext.data.*',
'Ext.grid.*',
'Ext.tree.*',
'Ext.ux.CheckColumn',
'KitchenSink.model.tree.Task'
],
xtype: 'tree-grid',

//<example>
exampleTitle: 'TreeGrid',
exampleDescription: [
'<p>',
' This example is an advanced tree example. It illustrates:',
'</p>',
'<ul class="feature-list">',
' <li>Multiple headers</li>',
' <li>Preloading of nodes with a single AJAX request</li>',
' <li>Header hiding, showing, reordering and resizing</li>',
' <li>useArrows configuration</li>',
' <li>Keyboard Navigation</li>',
' <li>Discontiguous selection by holding the CTRL key</li>',
' <li>Using custom iconCls</li>',
' <li>singleExpand has been set to true</li>',
'</ul>'
].join(''),
themes: {
classic: {
width: 500,
colWidth: 40
},
neptune: {
width: 600,
colWidth: 55
}
},
//</example>

title: 'Core Team Projects',
height: 300,
useArrows: true,
rootVisible: false,
multiSelect: true,
singleExpand: true,

initComponent: function() {
this.width = this.themeInfo.width;

Ext.apply(this, {
store: new Ext.data.TreeStore({
model: KitchenSink.model.tree.Task,
proxy: {
type: 'ajax',
url: 'resources/data/tree/treegrid.json'
},
folderSort: true
}),
columns: [{
xtype: 'treecolumn', //this is so we know which column will show the tree
text: 'Task',
flex: 2,
sortable: true,
dataIndex: 'task'
},{
//we must use the templateheader component so we can use a custom tpl
xtype: 'templatecolumn',
text: 'Duration',
flex: 1,
sortable: true,
dataIndex: 'duration',
align: 'center',
//add in the custom tpl for the rows
tpl: Ext.create('Ext.XTemplate', '{duration:this.formatHours}', {
formatHours: function(v) {
if (v < 1) {
return Math.round(v * 60) + ' mins';
} else if (Math.floor(v) !== v) {
var min = v - Math.floor(v);
return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm';
} else {
return v + ' hour' + (v === 1 ? '' : 's');
}
}
})
},{
text: 'Assigned To',
flex: 1,
dataIndex: 'user',
sortable: true
}, {
xtype: 'checkcolumn',
header: 'Done',
dataIndex: 'done',
width: this.themeInfo.colWidth,
stopSelection: false,
menuDisabled: true
}, {
text: 'Edit',
width: this.themeInfo.colWidth,
menuDisabled: true,
xtype: 'actioncolumn',
tooltip: 'Edit task',
align: 'center',
icon: 'resources/images/edit_task.png',
handler: function(grid, rowIndex, colIndex, actionItem, event, record, row) {
Ext.Msg.alert('Editing' + (record.get('done') ? ' completed task' : '') , record.get('task'));
},
// Only leaf level tasks may be edited
isDisabled: function(view, rowIdx, colIdx, item, record) {
return !record.data.leaf;
}
}],
//add this text code 20130416
dockedItems : [{
xtype : 'toolbar',
dock : 'bottom',
items : [{
xtype : 'radiogroup',
// fieldLabel: 'Two Columns',
// Arrange radio buttons into two columns,
// distributed
// vertically
// columns: 2,
// vertical: true,
items : [{
boxLabel : '1',
name : 'depth',
inputValue : '1'
}, {
boxLabel : '2',
name : 'depth',
inputValue : '2',
width : 58
}],
listeners : {
change : function(field, newValue, oldValue,
eOpts) {


this.up('panel').collapseAll();
this.up('panel').getRootNode().cascadeBy(
function(depth) {

this.expand();

}, null, [1 * newValue.depth]);
}
}
}]
}]
});
this.callParent();
}
});

slemmon
17 Apr 2013, 9:04 AM
The tree has animate: true (at least inherently it does) so you can't collapse the nodes and then immediately expand them - you'll need to get it finish processing first by deferring the expand action.



change : function(field, newValue, oldValue,
eOpts) {
var tree = this.up('panel');


tree.collapseAll();


Ext.defer(function () {
tree.getRootNode().cascadeBy(
function(depth) {


this.expand(true);

}, null, [1 * newValue.depth]);
}, 300);
}

op1op
17 Apr 2013, 6:17 PM
Thank you very much,It works!

rt.karthik87
25 Dec 2013, 11:00 PM
I hope the defer function is not a good option for expanding all the nodes. It will slow down the browser.
I am too facing a different issue while expanding all the nodes.

Please see my requirements as below :

Consider am having 5 nodes. Each node contains 3 hierarchical level. If we expand a node it wil show around 80 rows. So if we expand all the 5 nodes it will 450 rows. In this case by default I want to expand all the nodes in the initial view. When i tried calling the expandAll method, it shows script error in IE and Firefox. I implemented buffered renderer plugin in the tree. It works fine. Is there any way to expand all the nodes without using buffered render plugin and defer function.

And i am also having a requirement like search text box for the tree. So when i tried to implement both buffered render and sarching functionlity , then the extjs tree fails. It does not provide such a option.:((

Is there any extjs developer or any guy in SENCHA to solve my issue.?;)