how can i add spinner to tree column? - extjs

Question

I have following code:
function selectClassWindow() {
classes = Ext.create('Ext.tree.Panel', {
store: Ext.create('Ext.data.TreeStore', {
autoLoad: true,
autoSync: true,
fields: ['id','name', 'description','cost'],
proxy: {
type: 'ajax',
api: {
read: '/otp/getClass/'
}
},
root: {
name: 'Name1',
id: 0,
expanded: true
},
listeners: {
load: function (tree, node, records) {
node.eachChild(function (childNode){
childNode.set('checked',false);
});
}
}
}),
border: false,
rootVisible: false,
useArrows: true,
hideHeaders: true,
height: window.MaxHeightWindows,
xtype: 'listTree',
columns: [
{
xtype: 'treecolumn',
text: 'Name2',
flex: 1,
sortable: true,
dataIndex: 'name'
},</code>
Want to add here!
{
xtype: 'customspinner',
fieldLabel: 'How Much Beer?',
step: 6
}
]
})
classes.on('itemdblclick', function() {
selectedNode = classes.getSelectionModel().getSelection()
if (selectedNode[0] && selectedNode[0].isLeaf()) {
selectedClass = selectedNode[0].data.id
selectWindow.close()
if((window.selectedNode[0].parentNode&&selectedNode[0].parentNode.data.name == 'Text1')||
(window.selectedNode[0].parentNode.parentNode&&selectedNode[0].parentNode.parentNode.data.name == 'Text1')||
(window.selectedNode[0].parentNode.parentNode.parentNode&&selectedNode[0].parentNode.parentNode.parentNode.data.name == 'Text1')){
selectReasonWindow()
}else{
Ext.Ajax.request({
url: '/defect/updateDeparture/'+rec.data.id,
params: {
class_id: selectedClass,
reason_id: 0
},
success: function(result,response) {
if (window.departureGrid) {
departureGrid.store.load()
}
if (window.departureFullList) {
departureFullList.store.load()
}
if(window.logs){
logs.setValue(result.responseText)
}
if (window.crashDepartureList) {
crashDepartureList.store.load()
}
}
})
}
}
})
emptyPanel = Ext.create('Ext.panel.Panel', {
border: false,
flex: 1,
items: [classes]
})
selectWindow = Ext.create('Ext.window.Window', {
title: 'Name3',
width: 750,
border: false,
layout: {
type: 'hbox',
},
resizable:false,
collapsible: false,
constrain: true,
modal:true,
plain:true,
items: [emptyPanel],
buttons: [{
text: 'Ok',
handler: function() {
selectedNode = classes.getSelectionModel().getSelection()
if (selectedNode[0] && selectedNode[0].isLeaf()) {
selectedClass = selectedNode[0].data.id
selectWindow.close()
if((window.selectedNode[0].parentNode&&selectedNode[0].parentNode.data.name == 'Text1')||
(window.selectedNode[0].parentNode.parentNode&&selectedNode[0].parentNode.parentNode.data.name == 'Text1')||
(window.selectedNode[0].parentNode.parentNode.parentNode&&selectedNode[0].parentNode.parentNode.parentNode.data.name == 'Text1')){
selectReasonWindow()
}else{
Ext.Ajax.request({
url: '/defect/updateDeparture/'+rec.data.id,
params: {
class_id: selectedClass,
reason_id: 0
},
success: function(result,response) {
if (window.departureGrid) {
departureGrid.store.load()
}
if (window.departureFullList) {
departureFullList.store.load()
}
if(window.logs){
logs.setValue(result.responseText)
}
if (window.crashDepartureList) {
crashDepartureList.store.load()
}
}
})
}
}
}
},{
text: 'Close',
handler: function() {selectWindow.close()}
}]
}).show();
}
and i want add column "customspinner" to Ext.tree.Panel, but i get Uncaught TypeError: Object [object Object] has no method 'setSortState'. What's wrong?
In finally need something like this

Answer 1

There are a couple of things that are getting in your way:
grids do not support components in the cells (yet), they will soon.
For now you can use http://skirtlesden.com/ux/component-column
Tree already has a loading mask that is triggered by default on node load.
If you just want to add a spinner somewhere in your page just follow the Loading Mask component docs. Essentially any dom element can be targeted with mask/unmask calls.