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? Quote 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. Quote 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 Quote 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.. Quote 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. Quote 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' }]; } Quote Link to comment Share on other sites More sharing options...
mhmda Posted July 19, 2016 Author Share Posted July 19, 2016 Thanx.... Quote 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? Quote 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 Quote Link to comment Share on other sites More sharing options...
souza.fo Posted July 19, 2016 Share Posted July 19, 2016 Thanks a lot! Quote 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'? Quote 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. Quote 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. Quote 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. Quote 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 Quote 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", []) } }]; Quote 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. Quote 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. Quote 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 Quote Link to comment Share on other sites More sharing options...
albertovesx Posted October 19, 2017 Share Posted October 19, 2017 Thank you. Quote 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 ? Quote 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 Quote 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 Quote 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 Quote 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.