how can i add spinner to tree column?

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

dbrin dbrin · Accepted Answer · 2013-09-11T07:24:03

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.

how can i add spinner to tree column?

1 Answers