Knowledge Base
  • Introduction
  • Events and Actions
  • Action Panel
  • sending email
  • calling a SQL action from a client side js action
  • Accessing to translations form a server
  • Executing SQL statements from within an action
  • How to invoke a generic SQL statement defined through a SQL action
  • How to show a message dialog
  • checking for "undefined" values
  • How to add spaces to the right of a text
  • How to create a docx report and show it on the web browser Enterprise Edition only
  • How to get or set a value from the graphics control
  • How to invoke a generic SQL query defined through a business component
  • How to remove spaces to the left and right of a text
  • How to support multiple themes in a single application, accoding to a rule
  • How to set content to a Google Map linked to a grid or form
  • How to replace all occurences of a pattern from a text
  • Utility methods
  • Link auto login
  • Creation of a link for the first access of a new user without give the user a password and forcing
  • Forgot password
  • setting up default values from values coming from a filter panel
  • identifing the modified record after the alteration
  • enabling/disabling checkboxes in a grid
  • Filtering a Lookup
  • formatting a column
  • using checkboxes to select rows in grid
  • showing a summary row in grid
  • Disabling a toolbar button
  • Configuring grid exports
  • Adding filter conditions to a grid
  • Filtering the grid content from a tree
  • Filtering the tree content, starting from a filter panel linked to a grid
  • collapsing a panel
  • validating a lookup
  • accessing the authorizations set for a specific grid
  • How to design a web service
  • How to remotelly invoke an action or business component or perform a write operation through a Restf
  • how to feed a grid from a JS business component
  • converting a JS object to a JSON string
  • executing a query
  • passing parameters to a server side JS action
  • return value
  • scheduling and frequency
  • finding the right filter panel
  • checking out if a component has been defined
  • Deploying an application
  • Enquiring a table belonging to the Platform repository
  • Adding a where clause to a business component linked to grid
  • Integrating Mailchimp lists
  • Formatting a number as a currency value to use it inside an email template
  • sending email from a template
  • How to send an email
  • Error 'smtpHost' is empty
  • Linking two windows
  • How to open manually a window from another window
  • How to open manually a popup window
  • How to hide a panel in a window dinamically
  • How to manage folder panels
  • How to manage card panels
  • Predefined variables supported by Platform
  • Accessing the application parameters
  • Application Log
  • How to design a web service
  • How to import java classes in server
  • How to import java classes in server
  • How to dynamically set a value on a combo
  • 4WS.Platform
  • How to listen to events in a mobile HTML panel
  • Issues with HTTPS requests
  • How to manage row totals in grid
  • How to send to the UI a notification to execute code automatically
  • How to filter a chart by date interval
  • How to filter a grid by date interval
  • How to read a text or csv file and save data on the database
  • How to write text or csv files
  • Reading an xls file stored in the specified path
  • How to create a report with Jasper Report
  • How to customize the alert message content
  • Setting up a cluster
  • Uploading and downloading files
  • How to listen to user definition changes
  • How to auto-show a window from login
  • How to manage encrypted fields
  • How to change CSS settings for a grid row
  • Customizing a Tree Panel
  • How to execute complex queries on Google Datastore
  • Theme customization
  • Retrieve and send the log of a mobile app
  • Import Roles and Users
  • How to synchronize multiple Form panels in the same window
  • Anchor buttons
  • Properties of subpanels
  • Bulk import
  • How to display the data not found message in a grid
  • How to setup an LDAP based authentication
  • How to synchronize data from Datastore to BigQuery
  • How to synchronize data from Datastore to Google Spanner
  • How to synchronize data from Datastore to CloudSQL
  • Scrollable form list
  • How to setup SAML authentication
  • How to export data from BigQuery in streaming
  • Update Google Spreadsheet
  • How to setup OAuth2 authentication
Powered by GitBook
On this page
  • Customizing a Filter Panel
  • Adding an icon to the left of a folder title
  • Adding additional graphical settings to a filter panel
  • Adding a placeholder inside an input control
  • Customizing a Grid Panel
  • A grid having rows with different heights
  • Adding additional graphical settings to a grid panel
  • Customizing column headers
  • Customizing a Form Panel
  • Adding additional graphical settings to a form panel
  • Customizing controls of form and filter panel

Was this helpful?

Theme customization

(6.0.2 version)

PreviousHow to execute complex queries on Google DatastoreNextRetrieve and send the log of a mobile app

Last updated 3 years ago

Was this helpful?

Customizing a Filter Panel

Adding an icon to the left of a folder title

In order to set an icon to the left of a folder title, in case the folder contains a filter panel:

  • add to xtheme.css file something like

.x-tab-strip .x-tab-with-icon span.x-tab-strip-text.myclassename {
	background-image: url(../images/menu/myiconname.png) !important;
}

where "myclassname" represents the name of a CSS class referring the icon to show for this specific panel

  • set to the "Additional Settings" available in the Filter Panel definition pane something like

iconCls: "myclassname"

Adding additional graphical settings to a filter panel

You can include more settings for a filter panel using the "Additional Settings" available in the Filter Panel definition pane something like.

See to get a whole description of available settings.

Adding a placeholder inside an input control

It is possible to set an initial tooltip text within the control, which disappears automatically when typing a text in it. In order to do it add to Additional Settings property for a control named emptyText.

Example:

emptyText: "abc"

Customizing a Grid Panel

A grid having rows with different heights

It is not needed to set any additional setting to have rows with different heights: you have simply to set a cell content having multiple lines. Lines can be expressed in HTML format and a new line is represented by the <br> tag.

A good approach can be to bind a server-side javascript business component and use it to fill in the cell content: through javascript you can easily create complex HTML content, using for example the tags <table> <tr> <td>.

An alternative approach is to do it on the web layer, through the renderer property of a column, where you can define HTML content, for example using the tags <table> <tr> <td>:

value = 
'<table height=200 width=200>'+
'<tr><td>ID  :</td><td>'+record.data.id+'</td></tr>'+
'<tr><td>PIN :</td><td>'+record.data.pin+'</td></tr>'+
'<tr><td>Address :</td><td>'+record.data.address+'</td></tr>'+
'</table>';

In this example, the record passed to the row must contains attributes named id, pin and address.

Adding additional graphical settings to a grid panel

You can include more settings for a filter panel using the "Additional Settings" available in the Grid Panel definition pane something like.

Customizing column headers

The column header area can contain:

  • the column header text

  • optionally the ascending/descending icon to show a data ordering (the column header is a three-state clickable button: no sort, ascending sort, descending sort)

  • optionally the filter icon, used to emphasize the application of a filter condition on such a column; default behavior: visible on the left-top side, beside the text

  • optionally the "no filter applied" icon, used to emphasize the application of a filter condition on such a column; default behavior: NOT visible; if set to visible, it would be on the left-top side, beside the text and as an alternative to the filter icon

It is possible to customize the column header content through a series of CSS classes:

Column header height

class name: x-grid3-hd-inner

Example: how to increase header height

.x-grid3-hd-inner {
    height: 30;
}

Filter condition applied icon

class name: filter_on

Example: position the filter icon on the bottom-left position

.filter_on {
    position: absolute;
    bottom: 10;
}

Example: redefining the filter icon

.filter_on{
	width: 12;
	height: 12;
	background: url(../images/filter_on.gif) no-repeat;
}

NO filter condition applied icon

class name: filter_off

Example: position the NO filter icon on the bottom-left position

.filter_off {
    position: absolute;
    bottom: 10;
}

Example: redefining the NO filter icon

.filter_off{
	display: initial;
	width: 12;
	height: 12;
	background: url(../../extjsutils/images/filter_off.gif) no-repeat;
}

Customizing a Form Panel

Adding additional graphical settings to a form panel

You can include more settings for a filter panel using the "Additional Settings" available in the Grid Panel definition pane something like.

Customizing controls of form and filter panel

You can add, for each control contained in a form and filter panel, one or more css cls. Access the controls and activate the advanced mode, then click on the style column.

For button control you can set also the icon.

You can set the properties also on panels

See to get a whole description of available settings.

to get a whole description of available settings.

https://docs.sencha.com/extjs/3.4.0/#!/api/Ext.form.FormPanel
https://docs.sencha.com/extjs/3.4.0/#!/api/Ext.grid.GridPanel
/docs.sencha.com/extjs/3.4.0/#!/api/Ext.form.FormPanel