PDA

View Full Version : [3.0] How to use Ext.each on Items Panel ?



arnolem
15 Jan 2010, 2:43 AM
Hello,

I have a panel



var myPanel= new Ext.Panel({
id:'main-panel',
renderTo: 'panelDiv',
layout:'column',
layoutConfig: {columns:3},
defaults:{
columnWidth: (1/3),
style:'margin:5px'
},
items:[
item1,
item2,
item3
]
});
I want to change the margin property for each panel items


Ext.each(panel.items, function(el, index, items){
console.log(el); // undefined
console.log(index); // 0 -> 1 -> 2
console.log(items); // Object items=[3] keys=[3] length=3 map=Object
console.log(items[items]); // undefined
console.log(Ext.get(el)); // null
console.log(Ext.getCmp(el));// undefined
})
I try to change the css property to el but is undefined.
Can you help me please ?

Animal
15 Jan 2010, 3:08 AM
Why all this console.logging of random GUESSES?

If you use a debugger, you can just LOOK at what is there, and find out what to do in about 10 seconds.

Animal
15 Jan 2010, 3:10 AM
What do the docs say that you may pass to Ext.each?

What is Panel.items?

What methods does that have?

arnolem
15 Jan 2010, 3:11 AM
It's just to show people the functioning of the script.
Have you any idea how to access each element?

Animal
15 Jan 2010, 3:12 AM
You must learn.

Answer the questions I asked by looking at the API docs.

It will be clear then.

fabio.parra
15 Jan 2010, 3:13 AM
Mypanel.items is a MixedCollection. you can iterate items in this ways:



myPanel.items.each(function(panelItem, index, totalCount){
});

and


Ext.each(myPanel.items.items, function(panelItem, index, allItems){
});

arnolem
15 Jan 2010, 3:14 AM
I have a listener on beforender to patch IE6Bug


var myPanel = new Ext.Panel({
...
items:[
item1,
item2,
item3
],
listeners: {
beforerender: function (panel){
if(Ext.isIE6){
console.log(panel.items); // Object items=[3] keys=[3] length=3 map=Object
Ext.each(panel.items, function(el, index, items){
console.log(el); // undefined
console.log(index); // 0
console.log(items); // Object items=[3] keys=[3] length=3 map=Object
console.log(items[items]); // undefined
console.log(Ext.get(el)); // null
console.log(Ext.getCmp(el));// undefined
})
}
}
}
});

arnolem
15 Jan 2010, 3:20 AM
Mypanel.items is a MixedCollection. you can iterate items in this ways:



myPanel.items.each(function(panelItem, index, totalCount){
});
and


Ext.each(myPanel.items.items, function(panelItem, index, allItems){
});


Thanks, I have mising a "Items" on "myPanel.items.items"
Now, I tried to access on style property on each element :-?

Animal
15 Jan 2010, 3:49 AM
Mypanel.items is a MixedCollection. you can iterate items in this ways:



myPanel.items.each(function(panelItem, index, totalCount){
});

and


Ext.each(myPanel.items.items, function(panelItem, index, allItems){
});



OK, so how does he learn? He'll copy that post, paste it in like a magic spell, and be none the wiser.

Animal
15 Jan 2010, 3:50 AM
Do not randomly guess, and log the guesses!

An infinite number of monkeys could write software in that way (given an infinite time!)

WHAT are you trying to do?

arnolem
15 Jan 2010, 6:03 AM
Hello Animal, I have understand. I dont work randomly and I am always working with the API documentation and Firebug.
It's not very easy for me to speaking english and un try to expose my problem without mistake. I speak more simply.
I have tried to explore panel.items or I dont see that the collection is in panel.items.items.

For my Problem, it's good. I have corectly modified the items margin style ;)

Animal
15 Jan 2010, 7:01 AM
Look, use Firebug to see what's what here:

http://i131.photobucket.com/albums/p286/TimeTrialAnimal/examining.jpg

See, I'm looking at a "panel" var, and seeing exactly what it's got.

No need to guess.

You can even see "items" at the bottom there, and you can click that and examine that, and drill down and down and see the whole object graph.

arnolem
15 Jan 2010, 7:09 AM
Ok thanks, I see :)