PDA

View Full Version : What this.collumn/this.dockeditem interferes on the system?



wallynm
3 Dec 2011, 7:32 PM
Hello guys, after 2 days searching, changing the code, looking for many properties on the sencha doc, i finally solved an bug that was leaving me crazy...

So, i created an simple app to explain my problem at jsfiddle, there everyone will can see the code:
http://jsfiddle.net/wallysson/S7uGF/36/

That whas my bugged code, when i click many, and many times on the first node of the tree, it destroy the HTML of the view, first remove the header of the panel, them remove the entire panel... So, after try everything, i had the brillant ideia to change this code on the view panel...
so, the code it's now like this:
http://jsfiddle.net/wallysson/S7uGF/34/
(http://jsfiddle.net/wallysson/S7uGF/34/)
This link above, was everything what i was needing...


The main problem it's explained on these lines, the old code:


var gridUserTask = Ext.define('gconnect.view.gridUserTask', {
extend: 'Ext.grid.Panel',
alias:'widget.gridUserTask',
title: 'User tasks grid',
store: storeUserTask,
columns:[
{ header: 'Task name', dataIndex: 'taskname' },
{ header: 'Author', dataIndex: 'author', flex: 1 },
{ header: 'Owner', dataIndex: 'owner' }
],
dockedItems:[{
xtype: 'toolbar',
dock: 'top',
items: [
{ xtype: 'button', text: 'Adicionar' },
{ xtype: 'button', text: 'Editar' },
{ xtype: 'button', text: 'Deletar' }
]}]
})


The new code:


var gridUserTask = Ext.define('gconnect.view.gridUserTask', {
extend: 'Ext.grid.Panel',
alias:'widget.gridUserTask',
title: 'User tasks grid',
store: storeUserTask,


initComponent: function() {
this.columns = [
{ header: 'Task name', dataIndex: 'taskname' },
{ header: 'Author', dataIndex: 'author', flex: 1 },
{ header: 'Owner', dataIndex: 'owner' }
];

this.dockedItems = [{
xtype: 'toolbar',
dock: 'top',
items: [
{ xtype: 'button', text: 'Adicionar' },
{ xtype: 'button', text: 'Editar' },
{ xtype: 'button', text: 'Deletar' }
]}
],

this.callParent(arguments);
}
});


Well guys, the problem was fixed, thank you God!!! But i still wanna know why the Ext render fine the code with these code inside the initComp... i need to understand why this happened...


this.columns = [
{ header: 'Task name', dataIndex: 'taskname' },
{ header: 'Author', dataIndex: 'author', flex: 1 },
{ header: 'Owner', dataIndex: 'owner' }
];

this.dockedItems = [{
xtype: 'toolbar',
dock: 'top',
items: [
{ xtype: 'button', text: 'Adicionar' },
{ xtype: 'button', text: 'Editar' },
{ xtype: 'button', text: 'Deletar' }
]}


Thank you 4 everyone...

wallynm
4 Dec 2011, 2:24 PM
The first link was wrong... now i fixed it, someone can point to me why these code difference make the code work?

skirtle
4 Dec 2011, 4:08 PM
I don't think switching the columns makes any difference. It seems to be just the docked items. Interestingly, if you switch it from using docked items to a tbar it also works:


tbar: [
{ xtype: 'button', text: 'Adicionar' },
{ xtype: 'button', text: 'Editar' },
{ xtype: 'button', text: 'Deletar' }
]

Coming up with the exact reason would take a lot of digging but I can give you the general idea.

Adding properties in the Ext.define config directly will store them on the component's prototype. All instances of the class will share those objects/arrays. When the docked items are created the first time it must be using one of the objects/arrays in the config as part of its internal state, rather than taking a copy. This then gets changed about during the lifetime of the component. When the second toolbar is created its config is now the changed object, which may well no longer be a valid config. For example, the items may have been switched from an xtype array to the real components, which have subsequently been destroyed.

Generally it is dangerous putting reference types (objects/arrays) in your Ext.define config but, in my opinion, if you specify options via xtypes like this it should be supported. I regard this as a bug.

wallynm
5 Dec 2011, 7:43 PM
Well, as you're saying, each time that the toolbar it's rended, the config tems are changed, that makes sense, and every time it is called again, and again, the config it's invalid, as you said... Well, anyway, as i posted on the link, if i use


this.dockedItems = [{
xtype: 'toolbar',
dock: 'top',
items: [
{ xtype: 'button', text: 'Adicionar' },
{ xtype: 'button', text: 'Editar' },
{ xtype: 'button', text: 'Deletar' }
]}

Everything it's fine, and as you said,
if i try to use


tbar: [
{ xtype: 'button', text: 'Adicionar' },
{ xtype: 'button', text: 'Editar' },
{ xtype: 'button', text: 'Deletar' }
]

Everything it's fine, someone of the dev team could see this, for me, this is an bug...
And thanks for the reply!

skirtle
7 Dec 2011, 11:35 PM
I've just been doing a little more digging into this and it seems that the problem with dockedItems exists in 4.0.2a but was fixed by 4.0.7. Could you confirm that you're using an older version?