Extjs 如何在sencha中单击按钮时更改图像

我对森查很陌生。所以我想显示，当点击按钮，然后改变以前的图像图像

有关图片的更多信息： 在这张图片中，当laod文件，然后红色按钮出现时，我想点击Ok按钮在相同的位置将红色变为绿色。

这是Main.js中的“我的代码”：但无法更改：

 {
        xtype: 'image',
        width:33,            
        height:33,    
        src:'resources/images/online.png'

      },
      {
        xtype: 'button',
        text:'Go Online?',
        cls: 'messagesBtn',
        pressedCls: 'x-button-pressed'
      listeners: {
                tap: function (button, e, eOpts) {

                  //console.log('hello');
                  if (!Ext.device.Connection.isOnline()) {
                      console.log('Connected (' + Ext.device.Connection.getType() + ')');
                      .wishlogbtn
                   {
                   background-image: url('resources/images/Online.png') !important;
                   }

                      }

                else {
                      console.log('Offline');
                      button.setText('Go Offline?');

                    .wishlogbtn
                   {
                   background-image: url('resources/images/Offline.png') !important;
                   }

                              }
                }      

      }    

.messagesBtn {
   background: url(resources/images/online.png) no-repeat;
 } 

 .messagesBtn.x-button-pressing {
     background: url(../images/offline.png) no-repeat;
 }

    Uncaught SyntaxError: Unexpected identifier Main.js:132
Uncaught Error: The following classes are not declared even if their files have been loaded: 'test.view.Main'. Please check the source code of their corresponding files for possible typos: 'app/view/Main.js

在app.css文件中：

 {
        xtype: 'image',
        width:33,            
        height:33,    
        src:'resources/images/online.png'

      },
      {
        xtype: 'button',
        text:'Go Online?',
        cls: 'messagesBtn',
        pressedCls: 'x-button-pressed'
      listeners: {
                tap: function (button, e, eOpts) {

                  //console.log('hello');
                  if (!Ext.device.Connection.isOnline()) {
                      console.log('Connected (' + Ext.device.Connection.getType() + ')');
                      .wishlogbtn
                   {
                   background-image: url('resources/images/Online.png') !important;
                   }

                      }

                else {
                      console.log('Offline');
                      button.setText('Go Offline?');

                    .wishlogbtn
                   {
                   background-image: url('resources/images/Offline.png') !important;
                   }

                              }
                }      

      }    

.messagesBtn {
   background: url(resources/images/online.png) no-repeat;
 } 

 .messagesBtn.x-button-pressing {
     background: url(../images/offline.png) no-repeat;
 }

    Uncaught SyntaxError: Unexpected identifier Main.js:132
Uncaught Error: The following classes are not declared even if their files have been loaded: 'test.view.Main'. Please check the source code of their corresponding files for possible typos: 'app/view/Main.js

我在控制台上遇到此错误：

 {
        xtype: 'image',
        width:33,            
        height:33,    
        src:'resources/images/online.png'

      },
      {
        xtype: 'button',
        text:'Go Online?',
        cls: 'messagesBtn',
        pressedCls: 'x-button-pressed'
      listeners: {
                tap: function (button, e, eOpts) {

                  //console.log('hello');
                  if (!Ext.device.Connection.isOnline()) {
                      console.log('Connected (' + Ext.device.Connection.getType() + ')');
                      .wishlogbtn
                   {
                   background-image: url('resources/images/Online.png') !important;
                   }

                      }

                else {
                      console.log('Offline');
                      button.setText('Go Offline?');

                    .wishlogbtn
                   {
                   background-image: url('resources/images/Offline.png') !important;
                   }

                              }
                }      

      }    

.messagesBtn {
   background: url(resources/images/online.png) no-repeat;
 } 

 .messagesBtn.x-button-pressing {
     background: url(../images/offline.png) no-repeat;
 }

    Uncaught SyntaxError: Unexpected identifier Main.js:132
Uncaught Error: The following classes are not declared even if their files have been loaded: 'test.view.Main'. Please check the source code of their corresponding files for possible typos: 'app/view/Main.js

---

使用功能添加CLS

试试这个：

button.addCls('your_cls');

或

我记不太清楚了

编辑：

在Sencha api中，我们可以阅读：

我有：第1步在收费站

{xtype:'toolbar'，项：[{xtype:'label'，html:'Step-1'}]}

在我的页面的某个地方有一个按钮，当我点击这个按钮时 按钮我正在尝试应用此类，如下所示：

Ext.get（“linkid”）.addCls（“非活动”）但它根本不起作用

如果我使用的是applyStyles（{}）它会工作。问题在哪里

谢谢阿斯维尼

---

此问题没有答案…

使用函数addCls

试试这个：

button.addCls('your_cls');

或

我记不太清楚了

编辑：

在Sencha api中，我们可以阅读：

我有：第1步在收费站

{xtype:'toolbar'，项：[{xtype:'label'，html:'Step-1'}]}

在我的页面的某个地方有一个按钮，当我点击这个按钮时 按钮我正在尝试应用此类，如下所示：

Ext.get（“linkid”）.addCls（“非活动”）但它根本不起作用

如果我使用的是applyStyles（{}）它会工作。问题在哪里

谢谢阿斯维尼

这个问题没有答案……

你试过了吗

另外，作为补充说明，我建议将逻辑（侦听器）放入控制器，将css放入scss文件。它将使您的应用程序更易于长期管理。有一些很好的sencha组合在一起。

你试过了吗

另外，作为补充说明，我建议将逻辑（侦听器）放入控制器，将css放入scss文件。它将使您的应用程序更易于长期管理。有一些非常好的sencha组合在一起