Desktop StatusBar - Create Button At Runtime - fails to show ?

[andyhill]

Please advise how to ADD / INSERT Button into StatusBar at Runtime - thanks.

procedure TMainForm.UniFormBeforeShow(Sender: TObject);
begin

  if FirstTime = True then begin 
    FirstTime:= False;

    (* INSERT
      UniSession.AddJS(UniStatusBar.JSName + '.items.insert '+
                      '(0, Ext.create '+
                      '  ( '+
                      '    "Ext.button.Button", '+
                      '    { '+
                      '      text: "Camera", '+
                      '      id:   "_btn1", '+
                      '      handler: function() '+
                      '      { '+
                      '        ajaxRequest('+MainForm.WebForm.JSName+', "_btn_click_", ["btnId="+this.id]) '+
                      '      } '+
                      '    } '+
                      '  ) '+
                      ');  '); // '+ UniStatusBar.JSName +'.doLayout();
    *)

    // ADD
    UniSession.AddJS(UniStatusBar.JSName + '.items.add '+
                    '( '+
                    '  Ext.create '+
                    '  ( '+
                    '    "Ext.button.Button", '+
                    '    { '+
                    '      text: "Camera", '+
                    '      id:   "_btn1", '+
                    '      handler: function() '+
                    '      { '+
                    '        ajaxRequest('+MainForm.WebForm.JSName+', "_btn_click_", ["btnId="+this.id]) '+
                    '      } '+
                    '    } '+
                    '  ) '+
                    ');  '); // '+ UniStatusBar.JSName +'.doLayout();

  end;  // FirstTime
end;
 

[Sherzod]

Hello,

What is your issue?

[andyhill]

Does Not Paint In StatusBar ?

[andyhill]

doLayout (although not used in code above) also fails ?

 

[Sherzod]

15 minutes ago, andyhill said:

doLayout (although not used in code above) also fails ?

Try updateLayout() instead of doLayout().

[andyhill]

Yes, Thank you.

Our button is very squashed (as one can imagine), what do I do to set Size and Colour ?

[andyhill]

    UniSession.AddJS(UniStatusBar.JSName + '.items.add '+
                    '( '+
                    '  Ext.create '+
                    '  ( '+
                    '    "Ext.button.Button", '+
                    '    { '+
                    '      text: "Camera", '+
                    '      id:   "_btn1", '+
                    '      left: 10, '+ IGNORED
                    '      width: 300, '+
                    '      height: 18, '+
                    '      color: 123, '+ IGNORED (font)
                    '      bgcolor: 123, '+ ?????
                    '      handler: function() '+
                    '      { '+
                    '        ajaxRequest('+MainForm.WebForm.JSName+', "_btn_click_", ["btnId="+this.id]) '+
                    '      } '+
                    '    } '+
                    '  ) '+
                    '); ' + UniStatusBar.JSName+'.updateLayout();');

 

Do we need to create a Panel first, then add Button in panel - How ?

 

[andyhill]

Experimenting, How would I add listener to each Menu Item ?

                    '      renderTo  : Ext.getBody(), '+
                    '      arrowAlign: "right", '+
                    '      menu: [ '+
                    '        {text: "Item 1"}, '+
                    '        {text: "Item 2"}, '+
                    '        {text: "Item 3"}, '+
                    '        {text: "Item 4"} '+
                    '      ], '+
                    '      handler: function() '+
                    '      { '+
                    '        ajaxRequest('+MainForm.WebForm.JSName+', "_btn_click_", ["btnId="+this.id]) '+
                    '      } '+
 

[Sherzod]

15 minutes ago, andyhill said:

How would I add listener to each Menu Item ?

Like this:

 

[andyhill]

Great.

    UniSession.AddJS(UniStatusBar.JSName + '.items.add '+
                    '( '+
                    '  Ext.create '+
                    '  ( '+
                    '    "Ext.button.Button", '+
                    '    { '+
                    '      text: "Camera", '+
                    '      id:   "_btn1", '+
                    '      margin: "0 5 0 5", '+ 
                    '      padding: 0, '+
                    '      width: 300, '+
                    '      height: 16, '+
                    '      renderTo  : Ext.getBody(), '+
                    '      arrowAlign: "right", '+
                    '      menu: [ '+
                    '        {text: "Item 1" , iconCls: "x-fa fa-camera-retro", handler: function () {ajaxRequest('+MainForm.WebForm.JSName+', "_mnu_one_", [])}}, '+
                    '        {text: "Item 2" , iconCls: "x-fa fa-video", handler: function () {ajaxRequest('+MainForm.WebForm.JSName+', "_mnu_two_", [])}}, '+
                    '        {text: "Item 3" , iconCls: "x-fa fa-trash", handler: function () {ajaxRequest('+MainForm.WebForm.JSName+', "_mnu_three_", [])}}, '+
                    '        {text: "Item 4" , iconCls: "x-fa fa-print", handler: function () {ajaxRequest('+MainForm.WebForm.JSName+', "_mnu_four_", [])}}, '+
                    '      ] '+
                    (*
                    '      handler: function() '+
                    '      { '+
                    '        ajaxRequest('+MainForm.WebForm.JSName+', "_btn_click_", ["btnId="+this.id]) '+
                    '      } '+
                    *)
                    '    } '+
                    '  ) '+
                    '); ' + UniStatusBar.JSName+'.updateLayout();');

How can I align the button vertically (paint button in the middle of the StatusBar) - it appears as top=4 ?

Also, Hide/Show Button at runtime ?

and finally Enable/Disable Menu Items at runtime ?

[andyhill]

Sherzod, 

Hide/Show MenuButton at runtime ?

Enable/Disable MenuButton Items at runtime ?

[andyhill]

Sherzod, Using Ext.button.Button Menu - Please advise how to:-

Hide/Show Ext.button.Button at runtime ?

Enable/Disable Ext.button.Button Menu Items at runtime ?

Thanks

[Sherzod]

Hello, 

I will check. 

[Sherzod]

On 2/10/2021 at 2:26 PM, andyhill said:

Also, Hide/Show Button at runtime ?

procedure TMainForm.UniButton1Click(Sender: TObject);
begin
  UniStatusBar.JSInterface.JSCall('down("#_btn1").hide', []); //or show
end;

 

[Sherzod]

On 2/10/2021 at 2:26 PM, andyhill said:

and finally Enable/Disable Menu Items at runtime ?

For example by Index:

procedure TMainForm.UniButton2Click(Sender: TObject);
begin
  // first item - getComponent(0), second item - getComponent(1)...
  UniStatusBar.JSInterface.JSCall('down("#_btn1").getMenu().getComponent(0).setDisabled', [True]); // or False
end;

 

[andyhill]

Thank You Sherzod, very much appreciated