PDA

View Full Version : Treepanel show loading icon on expanding



tdobberphul
7 Jan 2014, 3:26 AM
Hi all,

I have a longer request on expanding a treenode.
So the user has to know, that the program does something.
Im using now the loading-mask over:


onKostenanschlagTreePanelBeforeLoad: function(store, operation, eOpts) {
this.setLoading(true);
},


onKostenanschlagTreePanelAfterItemExpand: function(node, index, item, eOpts) {
this.setLoading(false);
},

... but this is more confusing for the user.

I would like, that the icon of the node or better, the icon "+" of the expanding-icon changes to the loading-icon meanwhile. Like you have on a XML-Tree: http://docs.sencha.com/extjs/4.1.3/extjs-build/examples/tree/xml-tree.html

Is there a possibility to achieve this?

Thanks a lot,
Tobias

P.S.:
1. Perhaps it is important, that I am using the neptune theme.
2.Here is the code of my Treepanel:


Ext.define('IGP_Office.view.KostenanschlagTreePanel', {
extend: 'Ext.tree.Panel',
alias: 'widget.kostenanschlagTreePanel',


height: 685,
itemId: 'kostenanschlagTreePanel',
width: 1320,
closable: true,
title: 'Kostenanschlag',
store: 'KostenanschlagTreeStore',


initComponent: function() {
var me = this;


Ext.applyIf(me, {
viewConfig: {
stripeRows: true,
rootVisible: false
},
columns: [
{
xtype: 'gridcolumn',
width: 120,
dataIndex: 'ordnungszahl_igp',
text: 'Ordnungszahl<br>IGP'
},
{
xtype: 'treecolumn',
dataIndex: 'kurztext',
text: 'Kurztext',
flex: 1
},
{
xtype: 'gridcolumn',
width: 120,
dataIndex: 'ordnungszahl_bauherr',
text: 'Ordnungszahl<br>Bauherr'
},
{
xtype: 'gridcolumn',
width: 120,
dataIndex: 'ordnungszahl_projektsteuerer',
text: 'Ordnungszahl<br>Projektsteuerer'
},
{
xtype: 'gridcolumn',
text: 'Anschlagskosten',
columns: [
{
xtype: 'numbercolumn',
dataIndex: 'gesamt_menge',
text: 'Menge'
},
{
xtype: 'numbercolumn',
renderer: 'euroMoney',
dataIndex: 'gesamt_einheitspreis',
text: 'Einheitspreis'
},
{
xtype: 'numbercolumn',
renderer: 'euroMoney',
dataIndex: 'gesamt_preis',
text: 'Gesamtpreis'
}
]
},
{
xtype: 'numbercolumn',
renderer: 'euroMoney',
width: 200,
dataIndex: 'aggregierter_gesamt_preis',
text: 'Aggregierter Gesamtpreis'
}
],
listeners: {
beforeload: {
fn: me.onKostenanschlagTreePanelBeforeLoad,
scope: me
},
afteritemexpand: {
fn: me.onKostenanschlagTreePanelAfterItemExpand,
scope: me
},
expand: {
fn: me.onKostenanschlagTreePanelExpand,
scope: me
}
}
});


me.callParent(arguments);
},


onKostenanschlagTreePanelBeforeLoad: function(store, operation, eOpts) {
this.setLoading(true);
},


onKostenanschlagTreePanelAfterItemExpand: function(node, index, item, eOpts) {
this.setLoading(false);
},

updateWithProjekt: function(projekt_id) {
Ext.apply(Ext.data.StoreManager.lookup('KostenanschlagTreeStore').getProxy().api,{
read: '../IGP_API/api.php?type=KostenanschlagAPI&function=getNode&login='+MITARBEITER.login+'&md5passwort='+MITARBEITER.md5passwort+'&projekt_id='+projekt_id,
create: undefined, //'../IGP_API/api.php?type=ProjektpositionAPI&function=createProjektPosition&login='+MITARBEITER.login+'&md5passwort='+MITARBEITER.md5passwort,
destroy: undefined, //'../IGP_API/api.php?type=ProjektpositionAPI&function=deleteProjektPosition&login='+MITARBEITER.login+'&md5passwort='+MITARBEITER.md5passwort
update: '../IGP_API/api.php?type=KostenanschlagAPI&function=updateNode&login='+MITARBEITER.login+'&md5passwort='+MITARBEITER.md5passwort+'&projekt_id='+projekt_id
});
Ext.data.StoreManager.lookup('KostenanschlagTreeStore').load();
}

});

tdobberphul
7 Jan 2014, 3:56 AM
Hi all,I could solve this problem for my own.I had own icons for the nodes, but I forgot to provide an icon for the loading.One last question: Can someone tell me, how I can tell extjs to use the icon instead of the expander-node?I suppose its some other class than x-tree-icon?
.x-grid-tree-loading .x-tree-icon{ background-image: url("../resources/icons/loading.gif") !important;}Best regards,Tobias