PDA

View Full Version : Treeview columns reordering.. bug?



SimonCVT
23 Jan 2012, 6:57 AM
I have a very strange problem. I have a dialog window that I create with a tree panel on the left and a editor on the right. I've use the "actioncolumn" to create a clickable column to allow the user to delete nodes from the tree as they go along, using getClass as explained elsewhere.

All this works brilliantly. However when I close the dialog ( I'm calling close() and destroy() ) and create a new instance I find that the columns have reordered themselves putting the actioncolumn first and the treecolumn on the right ( second column )

This seems very strange and i'm not quite sure why this would change between instances.


Ext.define('Views.dialogs.ItemEditor',{
extend : 'Ext.window.Window',

alias:'widget.defaultitemeditor',

height:400,
width:600,
modal: true,
border:false,
bodyBorder:false,
layout: 'border',
items :[{id: 'dialogHeader',region:'north',height:50,padding:"5 5 5 5" },
{region:'center', flex: 1,id:'details',layout:'fit'},

{
xtype:'treepanel',
region:'west',
width:200,
id:'itemTree',
store:Ext.StoreManager.lookup('ACCX.store.ItemExplorerStore'),
model:'ACCX.model.Folder',
columns:[{xtype:'treecolumn',text:'Name',dataIndex:'text',width:175}
,{xtype:'actioncolumn',text:'R',id:'deleteColumn',width:50,
//items: [{
icon:'./img/delete.png', // Use a URL in the icon config
tooltip: 'Delete',
getClass : function(v,metadata,r,rowIndex,colIndex,store) {
console.log(rowIndex);
if(rowIndex == 0 )
return 'x-hidden';

}
//}]
}]
},
{region: 'east',flex:1,title:'Actions',id:'actions',hidden:true,width: 150,layout:'fit'}

],
buttons:[{text:'Apply'},{text:'Cancel'}],
})

Does anyone have any idea, or failing that a way to lock the column indexes on create so they can't reorder themselves?

mitchellsimoens
23 Jan 2012, 12:36 PM
You should specify your items within a method...



initComponent : function() {
this.items = [...];

this.callParent();
}

SimonCVT
24 Jan 2012, 2:34 AM
OK, i've tried that, seems to slow down runtime execution of the code but doesn't fix my problem, the columns still appear in the wrong order on when I open the dialog for the second time.

What is the purpose of adding the items this way? I'm assuming its re initialising them as seperate instances btu I thought if i destroyed and recreated the dialog with its items it would do that anyway?

I also tried adding the actual columns in this manor but this just seemed to screw up the page and mess up the dialog ( sticking it in the top left hand corner and printing a bunch of invalid looking divs )

Revised code below.


Ext.define('Views.dialogs.ItemEditor',{
extend : 'Ext.window.Window',

alias:'widget.defaultitemeditor',

height:400,
width:600,
modal: true,
border:false,
bodyBorder:false,
layout: 'border',

initComponent : function()
{
this.items = [ Ext.create('Ext.panel.Panel',{id: 'dialogHeader',region:'north',height:50,padding:"5 5 5 5" }),
Ext.create('Ext.panel.Panel',{region:'center', flex: 1,id:'details',layout:'fit'}),

Ext.create('Ext.tree.Panel',{
xtype:'treepanel',
region:'west',
width:200,
id:'itemTree',
store:Ext.StoreManager.lookup('ACCX.store.ItemExplorerStore'),
model:'ACCX.model.Folder',

columns : [{xtype:'treecolumn',text:'Name',flex:2,dataIndex:'text',width:175}
,{xtype:'actioncolumn',text:'R',id:'deleteColumn',width:50,


icon:'./img/delete.png', // Use a URL in the icon config
tooltip: 'Delete',
getClass : function(v,metadata,r,rowIndex,colIndex,store) {
console.log(rowIndex);
if(rowIndex == 0 )
return 'x-hidden';
}
}]

}),

Ext.create('Ext.panel.Panel',{region: 'east',flex:1,title:'Actions',id:'actions',hidden:true,width: 150,layout:'fit'})

];

this.callParent();
},
buttons:[{text:'Apply'},{text:'Cancel'}],
loadRecord: function(){console.log('Load Record Called');}
})

SimonCVT
24 Jan 2012, 5:36 AM
Interestingly if i reverse the columns, i.e. put the action column FIRST and the treecolumn second, the columns stay put in the order they've been defined.

I can only think this can be a bug to do with ActionColumns in TreePanels?