Panel header icons [tools]

[mhmda]

Is there any way to implement Panel->Tools (header icons) using unigui?

 

OR I must do it using 'beforeinit' in js events?

[Sherzod]

Hi Mohammad,

 

Sorry can you clarify?!

 

Best regards.

[mhmda]

Ext.create('Ext.panel.Panel', {
        width: 400, height: 200,        
        title: 'Test',
        tools: [{
                type: 'gear'
        }, {
                type: 'pin'
        }],
        renderTo: document.body
});

Tools section

 

[Sherzod]

Yes, at the moment using ClientEvents..

[mhmda]

This is doesn't work:

function beforeInit(sender, config)
{
  config.tools='tools:[{type:\'refresh\'}]';
}

It doesn't show icons.

[Sherzod]

use like this:

function beforeInit(sender, config) {
    config.tools = [{
        type: 'gear'
    }, {
        type: 'pin'
    }];
}

[mhmda]

Thanx....

[souza.fo]

This is very interesting, but how to capture the "OnClick" Event of these buttons?

 

[Sherzod]

This is very interesting, but how to capture the "OnClick" Event of these buttons?

 

Hi,

 

Yes of course, without the handler it's useless )

 

Try, for example:

 

1. ...

function beforeInit(sender, config) {
    config.tools = [{
        type: 'gear',
        handler: function() {
            ajaxRequest(sender, "_gear", [])
        }
    }, {
        type: 'pin'
    }];
}

2.

UniPanel->onAjaxEvent:

procedure TMainForm.UniPanel1AjaxEvent(Sender: TComponent; EventName: string;
  Params: TUniStrings);
begin
  if EventName = '_gear' then
  begin
    ShowMessage('"gear" clicked');
  end;

end;

Best regards.

[souza.fo]

Thanks a lot!

[mhmda]

How can I use icon font in 'tools'?

[jahlxx]

Hi.

 

I've this:

 

function beforeInit(sender, config) {
    header = {
        titlePosition: 1
        };    
    config.tools = [
    {type: 'gear',
     tooltip: 'Edit',
     handler: function() {
            ajaxRequest(sender, "_edit", [])
        }},
    {type: 'save',
     tooltip: 'Save',
     handler: function() {
            ajaxRequest(sender, "_save", [])
        }}
    ];
}
 

 

But only changes the position of the first button, not the second.

 

I've been looking for info, but don't find anything.

 

Any idea?

 

Thanks.

[Sherzod]

Hi,

config.header = {
    titlePosition: indx  
};  

indx - "maxIndx"

 

In this test case indx = 2

 

Best regards.

[jahlxx]

Ok. It works. Thanks.

 

Only 2 more things about this:

 

- Insert a separator between buttons is possible?

 

- And have customized images? I have a images subfolder of the files folder on the server, and like to use them. Is possible?

 

Thanks.

[Sherzod]

- Insert a separator between buttons is possible?

 

Ext.panel.Tool does not have a separator I guess

[Sherzod]

- And have customized images? I have a images subfolder of the files folder on the server, and like to use them. Is possible?

 

Try this:

 

1. CustomCSS: images size -> 15x15

.x-tool-mybutton {
    background-image: url("files/zoom-icon.png");
}

.x-tool-over .x-tool-mybutton {
    background-image: url("files/zoom-icon-over.png");
}

2.

  config.tools = [{
      type: 'gear',
      tooltip: 'Edit',
      handler: function() {
          ajaxRequest(sender, "_edit", [])
      }
  }, {
      type: 'mybutton' //<---------
  }, {
      type: 'save',
      tooltip: 'Save',
      handler: function() {
          ajaxRequest(sender, "_save", [])
      }
  }];

[jahlxx]

Ok.

 

I've to stretch the image, I don't know which is the standard size.

 

Backig to separator, if I put:

 

{type: 'myseparator'},

 

and in customcss:

 

.x-tool-myseparator {
    background-image: url("files/blank.png");
}
 

 

and blank.png does not exists, I get something like a separator.

 

 

[AlbertoVesx]

Hi, what happen with this code when UniGUI change the extjs version, for example extjs 6.5, would it still working?

 

Best regards

Ext.create('Ext.panel.Panel', {
  width: 400, height: 200,  
  title: 'Test',
  tools: [{  
  type: 'gear'
  }, {
  type: 'pin'  
  }],
  renderTo: document.body
});

Hi,

 

Yes of course, without the handler it's useless )

 

Try, for example:

 

1. ...

function beforeInit(sender, config) {
    config.tools = [{
        type: 'gear',
        handler: function() {
            ajaxRequest(sender, "_gear", [])
        }
    }, {
        type: 'pin'
    }];
}

2.

UniPanel->onAjaxEvent:

procedure TMainForm.UniPanel1AjaxEvent(Sender: TComponent; EventName: string;
  Params: TUniStrings);
begin
  if EventName = '_gear' then
  begin
    ShowMessage('"gear" clicked');
  end;

end;

Best regards.

[Sherzod]

Hi,

 

Yes

 

Best regards,

[AlbertoVesx]

Thank you.

[david600320@hotmail.com]

How can I use icon font in 'tools'?   

 

- Mohammad have asked this in this section . but no answers .

 

any ideas ?

[Sherzod]

Hi,

 

How can I use icon font in 'tools'?   

 

- Mohammad have asked this in this section . but no answers .

 

any ideas ?

 

One possible solution I think, for example "font-awesome", try:

 

1. ... CustomFiles ->

http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

2. ... ClientEvents ->

function beforeInit(sender, config) 
{
    config.tools = [{
        type: 'gear',
        handler: function() {
            ajaxRequest(sender, "_gear", [])
        }
    }, {
        text: 'fa-envelope',
        glyph: 'xf0e0@FontAwesome',
        handler: function() {
            ajaxRequest(sender, "_envelope", [])
        }
    }];
}

Best regards,

[david600320@hotmail.com]

Thanks , delphi developer ! 

 

You are always Good !! 

 

BTW ,  Is it possible to see it  to be double size  like  'fa-envelope fa-2x'   ?

 

Best regards,

[Point]

hello,

is possible show caption ?

   config.tools = [{
        type: 'plus',
        text: 'Add Record',
        handler: function() {
            ajaxRequest(sender, "_addrecord", [])
        }
   }, {
        type: 'gear',
        text: 'Process',
        handler: function() {
            ajaxRequest(sender, "_process", [])
        }
    }];

best regards

[Sherzod]

Hello,

7 minutes ago, Point said:

is possible show caption ?

With tools, no I guess.