Jump to content

Panel header icons [tools]


mhmda

Recommended Posts

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.

  • Upvote 1
Link to comment
Share on other sites

  • 3 months later...

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

- 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", [])
      }
  }];
Link to comment
Share on other sites

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.

 

 

Link to comment
Share on other sites

  • 11 months later...

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.

Link to comment
Share on other sites

  • 3 months later...

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,

  • Like 1
  • Upvote 1
Link to comment
Share on other sites

  • 4 years later...

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

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...