Ext treegrid example does not render in the lastest FF

[xun]

I checked out the treegrid example provided by Sencha. It renders successfully in Chrome and IE, however only briefly renders in FF, then turn completely blank.

Why

[xun]

Actually it did render. However checking Firebug, it has a lot of errors like the following
attempt to run compile-and-go script on a cleared scope

How do i get rid of them? thanks

[mankz]

Known Firebug bug: http://stackoverflow.com/questions/5...-cleared-scope

[xun]

Thanks. I read that too. However does not seem to apply.

In regards to treegrid, how do I supply a view config to it? I tried Ext.tree.View, get error; then I tried Ext.view.Table, it did not work either ... so far I only try to add a view/mask on loading, refreshing ...

Can you help? thanks

[mankz]

Can't help without seeing your code...

[xun]

Sencha's code, except I tried to add a view.

Ext.onReady(function () {
Ext.define('Task', {
extend: 'Ext.data.Model',
fields: [
{ name: 'task', type: 'string' },
{ name: 'user', type: 'string' },
{ name: 'duration', type: 'string' }
]
});


var view = Ext.create('Ext.tree.View', {
loadMask: { msg: "Loading" },
listeners: { refresh: { fn: function () { console.log("tree view refresh"); }, scope: this} },
emptyText: 'To begin ad campaign content, click <a href="javascript:void(0);" class="lnkM">here</a>'
});
var store = Ext.create('Ext.data.TreeStore', {
model: 'Task',
proxy: {
type: 'ajax',
//the store will get the content from the .json file
url: '/direct-ext/clients/tests/dummydata/hierarchy.htm'
},
folderSort: true
});

var tree = Ext.create('Ext.tree.Panel', {
title: 'Core Team Projects',
width: 500,
height: 300,
renderTo: Ext.getBody(),
collapsible: true,
useArrows: true,
rootVisible: false,
store: store,
multiSelect: true,
singleExpand: true,
//the 'columns' property is now 'headers'
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
}],
view: view
});


});

[mankz]

TreePanel is written in a way that prevents this, since it always creates its own view. Try passing viewConfig instead?

[xun]

I will try. Thanks so much for the prompt response. I really need it.

[xun]

how do I add drag (startDrag, endDrag) event to the treeDragDrop plugin?