mhmda Posted July 19, 2016 Share Posted July 19, 2016 Is there any way to implement Panel->Tools (header icons) using unigui? OR I must do it using 'beforeinit' in js events? Link to comment Share on other sites More sharing options...
Sherzod Posted July 19, 2016 Share Posted July 19, 2016 Hi Mohammad, Sorry can you clarify?! Best regards. Link to comment Share on other sites More sharing options...
mhmda Posted July 19, 2016 Author Share Posted July 19, 2016 Ext.create('Ext.panel.Panel', { width: 400, height: 200, title: 'Test', tools: [{ type: 'gear' }, { type: 'pin' }], renderTo: document.body }); Tools section Link to comment Share on other sites More sharing options...
Sherzod Posted July 19, 2016 Share Posted July 19, 2016 Yes, at the moment using ClientEvents.. Link to comment Share on other sites More sharing options...
mhmda Posted July 19, 2016 Author Share Posted July 19, 2016 This is doesn't work: function beforeInit(sender, config) { config.tools='tools:[{type:\'refresh\'}]'; } It doesn't show icons. Link to comment Share on other sites More sharing options...
Sherzod Posted July 19, 2016 Share Posted July 19, 2016 use like this: function beforeInit(sender, config) { config.tools = [{ type: 'gear' }, { type: 'pin' }]; } Link to comment Share on other sites More sharing options...
mhmda Posted July 19, 2016 Author Share Posted July 19, 2016 Thanx.... Link to comment Share on other sites More sharing options...
souza.fo Posted July 19, 2016 Share Posted July 19, 2016 This is very interesting, but how to capture the "OnClick" Event of these buttons? Link to comment Share on other sites More sharing options...
Sherzod Posted July 19, 2016 Share Posted July 19, 2016 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. 1 Link to comment Share on other sites More sharing options...
souza.fo Posted July 19, 2016 Share Posted July 19, 2016 Thanks a lot! Link to comment Share on other sites More sharing options...
mhmda Posted July 20, 2016 Author Share Posted July 20, 2016 How can I use icon font in 'tools'? Link to comment Share on other sites More sharing options...
jahlxx Posted October 20, 2016 Share Posted October 20, 2016 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 More sharing options...
Sherzod Posted October 20, 2016 Share Posted October 20, 2016 Hi, config.header = { titlePosition: indx }; indx - "maxIndx" In this test case indx = 2 Best regards. Link to comment Share on other sites More sharing options...
jahlxx Posted October 20, 2016 Share Posted October 20, 2016 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 More sharing options...
Sherzod Posted October 20, 2016 Share Posted October 20, 2016 - Insert a separator between buttons is possible? Ext.panel.Tool does not have a separator I guess Link to comment Share on other sites More sharing options...
Sherzod Posted October 20, 2016 Share Posted October 20, 2016 - 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 More sharing options...
jahlxx Posted October 20, 2016 Share Posted October 20, 2016 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 More sharing options...
albertovesx Posted October 18, 2017 Share Posted October 18, 2017 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 More sharing options...
Sherzod Posted October 18, 2017 Share Posted October 18, 2017 Hi, Yes Best regards, 1 Link to comment Share on other sites More sharing options...
albertovesx Posted October 19, 2017 Share Posted October 19, 2017 Thank you. Link to comment Share on other sites More sharing options...
david600320@hotmail.com Posted January 31, 2018 Share Posted January 31, 2018 How can I use icon font in 'tools'? - Mohammad have asked this in this section . but no answers . any ideas ? Link to comment Share on other sites More sharing options...
Sherzod Posted February 1, 2018 Share Posted February 1, 2018 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, 1 1 Link to comment Share on other sites More sharing options...
david600320@hotmail.com Posted February 1, 2018 Share Posted February 1, 2018 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, 1 Link to comment Share on other sites More sharing options...
Point Posted February 15, 2022 Share Posted February 15, 2022 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 More sharing options...
Sherzod Posted February 15, 2022 Share Posted February 15, 2022 Hello, 7 minutes ago, Point said: is possible show caption ? With tools, no I guess. Link to comment Share on other sites More sharing options...
Recommended Posts
Please sign in to comment
You will be able to leave a comment after signing in
Sign In Now