Question

我必须在我的应用中更改按钮的样式。每个按钮都有自己的风格。所以我必须通过javascript动态地完成它。按钮在doc中有setStyle()。但它并不像那样。怎么做到这一点？

这是一个例子！

Ext.create('Ext.Button', {
    text: 'Click me',
    renderTo: Ext.getBody(),
    style : {
        'color' : 'red',
        'font-size' : '15px',
        'font-weight' : 'bold'
    },
    handler: function() {
        this.setStyle({'color':'blue'});
        alert('Style applied!');
    }
});

Answer 1

你的代码正在做它应该做的事情，但是它正在改变锚标记上的字体颜色，它只是包含你试图改变颜色的文本的跨度的包装。

我的建议是使用cls属性而不是样式。比切换它的风格..

这里是一个小提琴https://fiddle.sencha.com/#view/editor&fiddle/1o92

希望有所帮助

Answer 2

正如小组建议使用课程将是可维护的方式。

您的具体要求如何使用以下代码。

Ext按钮只是一个<a>标记，文字下方是<span>，类为＃34; .x-btn-inner＆＃34;

Ext.application({
name: 'Fiddle',

launch: function () {
    Ext.create('Ext.Button', {
        text: 'Click me',
        renderTo: Ext.getBody(),

        handler: function () {
            // Javascript style
            this.el.query('span .x-btn-inner')[0].style.color = 'red';
        }
    });
}


  });

https://fiddle.sencha.com/#view/editor&fiddle/1oar

Answer 3

检查并查看Sencha设置颜色的位置，例如在按钮的情况下，它设置在.x-btn-inner元素上。

。

<强> this.getEl（）选择（＆＃39; .X-BTN-内＆＃39）的setStyle（{＆＃39;颜色＆＃39;：＆＃39;蓝色＆＃39;}。）;

见小提琴 https://fiddle.sencha.com/#view/editor&fiddle/1obm

编辑：select未记录。请改用down。

this.getEl().down('.x-btn-inner').setStyle({'color':'blue'});

Answer 4

如果您使用Sencha CMD，您可以轻松地为按钮添加SASS mixins。在下面的示例中，我使用mixins'default-toolbar'和'default-small'作为示例。但你可以为各种按钮制作mixins并称之为'redalert'，'greenpeace'，'blueplanet'或任何你想要的。

SASS mixin具有很大的优势，它可以处理您不修改的动态值。因此，如果您将按钮的颜色更改为红色，则单击或悬停会自动修改为浅红色。例如。

另请参阅：Link to Sencha Docs for button UI mixin

Ext.application({
    name: 'Fiddle',

    launch: function () {
       Ext.create('Ext.Button', {
           text: 'Click me',
           renderTo: Ext.getBody(),
           scope: this,
           ui: 'default-toolbar',
           handler: function (b) {
               console.log(b.ui);
               b.setUI(b.ui !== 'default-small' ? 'default-small' : 'default-toolbar');
           }
       });
   }

}）

Answer 5

使用＆＃39; cls＆＃39;配置按钮。禁用按钮时，您可以为不同的按钮状态设置不同的类，例如 disabledCls ， iconCls 显示图标。您还可以使用 addCls 和 removeCls 方法添加或删除cls运行时。

ExtJS按钮样式

5 个答案: