更改 extjs 中面板的背景颜色

Posted 2023-02-26

【中文标题】更改 extjs 中面板的背景颜色

【英文标题】：change the background color of panels in extjs

【发布时间】：2013-02-04 11:51:52

【问题描述】：

在我的项目中，我试图更改容器内所有面板的背景颜色。我正在尝试的代码如下：

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. 
        );
    

我应该写什么来更改主容器的父面板中存在的唯一面板的背景颜色？

我试过了：

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

但上述方法给了我以下错误：

未捕获的类型错误：无法调用未定义的方法“setStyle”

编辑：

在这里，我正在寻找一种与 jQuery 的children() 完全一样的工作的 extjs 方法。

$('#containerID').children('panel').children('panel').css(change background color);

【参考方案1】：

根据您的要求，您将始终拥有 9 个组件的总和，您从 -1 开始查看。最短的方法是使用 MixedCollection 的 each() 方法（在运行时所有项目都在 MixedCollection 中）

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

这可能不是性能最好的变体，但从最后一个问题中知道您的要求，我可以说这是最简单的。此外，它易于维护。并阅读我在上一个问题的 cmets 中发布的关于代表的文章！

我希望现在有错字，因为它未经测试

更新

嗯，您正在这里寻找ownerCt 属性（至少这是最简单的方法）。但是有一些更强大的导航方法up() / down() 都可以用ComponentQuery 字符串提供。将up() 参数留空将返回直接所有者/激活者（与ownerCt 基本相同）。

以下工作示例：

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
);

更新 2

要重置所有尝试这个（未经测试）

'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

【讨论】：

我已经浏览了您在上一篇文章中提供的链接。但由于我对 DOM 也不熟悉，所以我无法理解。这里我要做的是，每当用户点击一个面板时，点击的面板将变为红色，其他面板将变为白色。

这里我点击了父面板中的子面板。所以，这是行不通的。我需要一个像 jQuery 的 parent() 这样的方法（我认为）。

类似于 jQuery..$('#containerID').children('panel').children('panel').css(change background color);

您好，之前单击的面板背景颜色仍然存在（我的意思是不更改为白色，默认），如果我单击其他父面板（在同一面板中工作正常）。我认为您需要将所有者两次取消选中第一个面板才能进入子面板。

@Mr_Green 每个组件都有一个 el 属性，该属性在组件渲染后可用。