在sencha touch中更改背景图像

问题描述：

我是sencha touch的初学者，所以我有一些基本问题。在sencha touch中更改背景图像

我在CSS中加入了背景图像面板：

#inputPanel{ 
    background:url(../i/input-bg.png) no-repeat left top; 
}

面板显示每一次，我想更改背景图片：

this.inputPanel = new Ext.form.FormPanel({ 
    cls:'panel', 
    id:'inputPanel', 
    items:[], 
    dockedItems:[], 
    listeners:{ 
     beforeshow:function(){ 
      if(showImageAAA) 
       // Change the background image to AAA 
      else 
       // Change the background image to BBB 
     }, 
    } 
});

有没有什么简单的方法去做吧？谢谢。

答

，你可以做以下

this.inputPanel = new Ext.form.FormPanel({ 
    cls:'panel', 
    id:'inputPanel', 
    items:[], 
    dockedItems:[], 
    listeners:{ 
     beforerender:function(){ 
      if(showImageAAA) 
       // Change the background image to AAA 
       this.style="background:url(../i/input-bgAAA.png) no-repeat left top;"; 
      else 
       // Change the background image to BBB 
       this.style="background:url(../i/input-bgBBB.png) no-repeat left top;"; 
     }, 
    } 
});

希望这有助于！

谢谢Scott。请在另一个答案中看到我的意见。 – subchap

第二次，如果您之前被隐藏，则应该获取inputPanel并在get call show inputPanel中设置其样式。 –

答

我想你可以设置面板的“style”或“bodyStyle”属性。

谢谢。你可以再详细一点吗？ – subchap

当“beforeshow”事件触发时，会给出几个参数：即将显示的组件和选项对象。 http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel.Panel。因此，将该事件监听器更改为“beforeshow：function（panel，options）”，然后在函数中，您可以像“panel.style ='background-color：red;'” – Miles

感谢您的更新。我已经尝试过了，但是它似乎只在第一次显示面板时才改变样式。如果关闭面板，请更改“showImageAAA”，然后再次打开面板，背景保持不变。但是，如果在第一次显示面板之前更改“showImageAAA”，则会更正背景。那么在第二次展示面板之前我应该做些什么？ – subchap

在sencha touch中更改背景图像

相关推荐