0

In my project, I am trying to change the background color of all the panels inside a container. The code which I am trying is as follows:

container --> panel (don't change) --> panel (Change)

//Generated dynamically using for loop.
listeners: {
   'render': function(panel) {
        panel.body.on('click', function() {
                //here change the background color of all the panels inside the container>panel. 
        });
    }
}

What should I write to change the background color of the only panels which are present inside the parent panels of a main container?

I tried:

Ext.each('panel',function(){this.body.setStyle('background','white')}),

But the above approach is giving me the following error:

Uncaught TypeError: Cannot call method 'setStyle' of undefined

EDIT:

Here, I am looking for a method of extjs which quite do the same work as jQuery's children().

$('#containerID').children('panel').children('panel').css(change background color);
Mr_Green
  • 40,727
  • 45
  • 159
  • 271

1 Answers1

2

Based on your requirements you will always have a sum of 9 components you are looking at -1 the you start from. The shortest way is to use the each() method of the MixedCollection (at runtime all items are within a MixedCollection)

'render': function(panel) {
    panel.body.on('click', function() {
         panel.items.each(function(p){ p.body.setStyle('background','white'); }, this)
    },this);
}

This may not be the variant with the best performance but knowing your requirement from the last question I can say that this is the easiest. And in addition it will be easy to maintain. And read the article about delegates that I posted in the comments of the last question!

I hope there is now typo, cause it is untested

Update

Well, you are looking for the ownerCt property here (at least that is the easiest way). But there are some mightier navigation methods up() / down() both can be feeded with a ComponentQuery string. Leave the up() arguments empty will return the immediate owner/activater (basically the same as ownerCt).

Following a working example:

var childItems = [], items = [];
for (i = 0; i < 9; ++i) {
    childItems.push({
        xtype: 'container',
        width: 50,
        height: 50,
        html: i + '',
        style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
        listeners: {
            'afterrender': function(panel) {
                panel.el.on('click', function(e,t) {
                    panel.el.on('click', function(e,t) {
                    panel.el.setStyle('background','red');
                    panel.ownerCt.items.each(function(p){ if(panel.el.id != p.id) p.el.setStyle('background','white'); })
                });
             }
        }
    });
}
for (i = 0; i < 9; ++i) {
    items.push({
        xtype: 'container',
        layout: {
            type: 'table',
            columns: 3
        },
        style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
        items: childItems
    });
}
Ext.create('Ext.container.Container', {
    layout: {
        type: 'table',
        // The total column count must be specified here
        columns: 3
    },
    renderTo: Ext.getBody(),    
    style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px', margin: '30px'},
    items: items
});

Update 2

To reset all try this (untested)

'afterrender': function(panel) {
          panel.el.on('click', function(e,t) {
              panel.el.setStyle('background','red');
              panel.ownerCt.ownerCt.items.each(function(op){ 
                   op.items.each(function(p){ 
                       if(panel.el.id != p.id) 
                          p.el.setStyle('background','white'); 
                   })
              }, this)
          });
 }

JSFiddle

sra
  • 23,820
  • 7
  • 55
  • 89
  • I have gone through the link you provided in the previous post. But as I am new to even DOM, I can't understand it. here what I am trying to do is that whenever the user clicks on a panel, the clicked panel will become red and other panels will become white. – Mr_Green Feb 04 '13 at 12:08
  • Here I am clicking the child panels which are present in the parent panel. So, this is not working. I am in need of a method like `parent()` of jQuery here (I think). – Mr_Green Feb 04 '13 at 12:11
  • Something similar to this of jQuery.. `$('#containerID').children('panel').children('panel').css(change background color);` – Mr_Green Feb 04 '13 at 12:14
  • Hi, the previously clicked panel background color is remaining(I mean not changing to white, default), If I click in other parent panel(working fine in the same panel). I think you need to take the owner twice and uncheck the first panel to go into the child panels. – Mr_Green Feb 04 '13 at 12:53
  • @Mr_Green What do mean with previous? In the first comment you wrote `..the clicked panel will become red and other panels will become white..`. – sra Feb 04 '13 at 12:59
  • yes its working good only in the same parent panel in which the child panel has been selected. not in whole container. If I select other child panel from other parent panel then the previous selected child panels background color is not changing to white. `container --> parent panels --> child panels`. – Mr_Green Feb 04 '13 at 13:01
  • @Mr_Green Yes, But I thought this as intended... Give me a minute to update – sra Feb 04 '13 at 13:04
  • Its working.. But happening after I click the child panel twice to change the color.. Is it happening at your side too? – Mr_Green Feb 04 '13 at 13:27
  • Thanks for your full support.. :) – Mr_Green Feb 04 '13 at 13:33
  • @Mr_Green The underlying DOM element wrapper (Ext.Element) for this component. – sra Feb 05 '13 at 05:31
  • In the above code you haven't declared any var as `el`.. is it default? or you did some indirect declaration here? (right now I am going through `Ext.element` docs..) – Mr_Green Feb 05 '13 at 05:38
  • 1
    @Mr_Green each component has a el property that is available after the component is rendered. – sra Feb 05 '13 at 05:54
  • ohh k sorry for disturbing you and again thanks for explaining clearly :) – Mr_Green Feb 05 '13 at 05:58