Toggle Desktop

[SISBLU Software]

Hello, I need Toggle Button for my application. 
 

there is only this component for mobile.  How can I do for Desktop?

[Sherzod]

4 hours ago, Daha Software said:

How can I do for Desktop?

Hello,

You can use this config for now:

UniButton1 ->

procedure TMainForm.UniFormCreate(Sender: TObject);
begin
  UniButton1.JSInterface.JSConfig('enableToggle', [True]);
end;

function click(sender, e, eOpts)
{
    alert(sender.pressed)
}

 

[SISBLU Software]

No work. I use uni-1.90.0.1531, Theme Desketop: crisp

UniButton1.JSInterface.JSConfig('enableToggle', [True]);

[Sherzod]

7 minutes ago, Daha Software said:

Theme Desketop: crisp

Does it work on other themes?

[Sherzod]

12 minutes ago, Daha Software said:

No work. I use uni-1.90.0.1531, Theme Desketop: crisp

Works for me (1534).

[SISBLU Software]

 

No Work in 1534. 

I tested on other theme also does not work

 

[SISBLU Software]

In Attach test. No Work for me

Toggle.zip

[Sherzod]

7 minutes ago, Daha Software said:

I tested on other theme also does not work

Seems to work for you too.

 

[Sherzod]

[SISBLU Software]

Now I understand. It changes color only.
But he doesn't look like Toggle.

How do I stay like this?

[Sherzod]

10 minutes ago, Daha Software said:

It changes color only.
But he doesn't look like Toggle.

Yes, for the desktop it looks like this.

[Sherzod]

2 hours ago, Daha Software said:

How do I stay like this?

It can be done by creating a custom component, I think.

[SISBLU Software]

This already exists in UNIGUI Touch. That would help a lot if it existed for DESKTOP

[fraxzi]

15 hours ago, Daha Software said:

This already exists in UNIGUI Touch. That would help a lot if it existed for DESKTOP

+1, I am also looking that kinda component too in Desktop.

-Frances

[Wilton Ergon]

https://store.falconsistemas.com.br/?gclid=Cj0KCQjwupD4BRD4ARIsABJMmZ_QFRABkbdhoP8au95YMrweq3wkOcpc3KJa4HyzKaEVm0WHGJzfWD8aAuHQEALw_wcB

 

here it is.

[Sherzod]

On 7/6/2020 at 9:15 PM, Daha Software said:

This already exists in UNIGUI Touch. That would help a lot if it existed for DESKTOP

 

21 hours ago, fraxzi said:

+1, I am also looking that kinda component too in Desktop.

 

Hello,

Simple implementation on a desktop browser.

1. MainForm.Script:

Ext.define('Ext.field.Toggle', {
    extend: 'Ext.slider.Single',

    xtype: 'toggle',
    minValue: 0,
    maxValue: 1,

    width: 80,

    onRender: function(parentNode, containerIdx) {
        this.callParent([parentNode, containerIdx]);
        this.publishValue();
    },

    setValue: function(thumbIndex, value) {
        value = value ? 1 : 0;
        this.callParent([value]);

        this.bodyEl.toggleCls('x-togglefield-on', value);
        this.publishValue();
    },

    getValue: function() {
        return this.callParent([0]) ? true : false;
    }
});

2. CustomCSS:

.x-togglefield-on .x-slider:before {
    background-color: green;
}

 

3. UniPanel1:

Caption = ''

function beforeInit(sender, config)
{
    config.layout = {
        type: 'vbox',
        padding: 5
    };
    
    config.items = [
      {
          xtype: 'toggle',
          reference: 'firsttoggle',
          listeners: {
              change: function(field, newValue, oldValue) {
                  console.log(field.reference + ' Value of this toggle has changed:', (newValue) ? 'ON' : 'OFF');
              }
          }
      },
      {
          xtype: 'toggle',
          reference: 'secondtoggle',
          listeners: {
              change: function(field, newValue, oldValue) {
                  console.log(field.reference + ' Value of this toggle has changed:', (newValue) ? 'ON' : 'OFF');
              }
          }
      }
    ]
}

 

4. Results:

Theme: Triton

Theme: Crisp

 

5. Sources:

https://fiddle.sencha.com/#view/editor&fiddle/27ac

https://docs.sencha.com/extjs/7.0.0/modern/Ext.field.Toggle.html

[SISBLU Software]

Perfect. 

 

Thanks a lot for the help

[Harry88]

how to get value from firsttoggle to delphi code?

[delagoutte]

hello,

i would like this toggle look like this :

but i dont find the css class that i must use for having this result. any css champion could help me ?