I. Overview
1.1 Problem
In actual projects, sometimes customers will require the toolbar buttons to be displayed in the center or on the right.
1.2 Solution
We only need to use JS to adjust the CSS style of the toolbar on the "start loading" event in the template Web attributes.
II. Example
2.1 Example 1: toolbar button is displayed in the center
1) Open the report
Open %FR_HOME%/webapps/webroot/WEB-INF/reportlets/GettingStartedEN .cpt
2) Template design
Click menu template>template web attributes>pagination preview settings , select "individually set for this template" to add a start loading event:
$('.x-toolbar').css('vertical-align','middle');
$('table').css({'margin-left':'auto','margin-right':'auto'});
3) Click pagination preview to see the effect:
2.2 Example 2: toolbar button is displayed on the right
1) Open the report
Open %FR_HOME%/webapps/webroot/WEB-INF/reportlets/GettingStartedEN .cpt
2) Template design
Click menu template>template web attributes>pagination preview settings , select "individually set for this template" to add a start loading event:
$('.x-toolbar').css('vertical-align','middle');
$('table').css({'float':'right'});
3) Click pagination preview to see the effect:
2.3 Example 3: top and bottom toolbar button is displayed on the right
1) Open the report
Open %FR_HOME%/webapps/webroot/WEB-INF/reportlets/GettingStartedEN .cpt
2) Template design
Click menu template>template web attributes>pagination preview settings , select "individually set for this template" to add a start loading event:
$('.x-toolbar').css('vertical-align','middle');
$('table').css({'float':'right'});
3) Click pagination preview to see the effect:
Previous：JS Toolbar Buttons Only Export a Single Format File
