Some modules may need to set different icons for each record, such as Modules in the system. In order to display a proper image in the menu, you need to set an icon for each different module (either without setting it).

An icon can be a file in a directory on the application server, a CLS setting for a font file, a custom cls, or an icon file uploaded in the foreground.Adding icons is also an aspect of expanding the functionality of the system. Its development process is also mentioned before. First, the requirements can be configured, and then the front and back to explain the implementation.Let's take a look at the design process.

1 For modules that require icons, a field is required to store the configuration information.A new boolean field tf_hasRecordIcon is added to the module (_Module), set to true to indicate that the module has an icon field.

2 For the module with icon field, three fields are needed to store the definition of the icon, and in the java bean:

@FieldDefine(title = "Icon Cls", number = 50)
  @Column(length = 50)
  private String tf_iconCls;

  @FieldDefine(title = "Icon Address", number = 60)
  @Column(length = 50)
  private String tf_iconUrl;

  @JsonIgnore
  @FieldDefine(title = "Icon File", number = 70)
  private Blob tf_iconFile;

Add these three fields to the database table:

3. There are three fields in the field settings of the module.Where tf_iconFile is set to Image.The Image type is processed in the same way as other fields and is included in the package that gets the grid data, so don't upload large files.

4. After these steps, let's create an icon column.

/**
 * The icon for each record of the module can be iconCls, iconUrl, iconFile
 */

Ext.define('app.module.widget.column.RecordIconColumn',
		{
			extend : 'Ext.grid.column.Column',
			alias : 'widget.recordiconcolumn',
			align : 'center',
			sortable : false,
			menuDisabled : true,
			text : '<span class="fa fa-file-image-o"></span>',

			renderer : function(value, metaData, record, rowIndex, colIndex) {
				if (record.get('tf_iconFile')) {
					// If there is data in the icon file, convert the binary data into a browser-recognizable local address
					var data = record.get('tf_iconFile');
					var bytes = new Uint8Array(data.length);
					for (var i = 0; i < data.length; i++)
						bytes[i] = data[i];
					var blob = new Blob([ bytes ], {
						type : 'image/png'
					});
					return '<img class="icon16_16" src="' + URL.createObjectURL(blob)
							+ '" />';
				} else if (record.get('tf_iconCls'))
					// If there are iconCls settings
					return '<div class="icon16_16 ' + record.get('tf_iconCls') + '" />';
				else if (record.get('tf_iconUrl'))
					// If there are iconUrl settings
					return '<img class="icon16_16" src="' + record.get('tf_iconUrl')
							+ '" />';
				else if (record.get('iconURL'))
					return '<img class="icon16_16" src="' + record.get('iconURL')
							+ '" />';
			}
		})

5: Add this field when generating columns.This code was already in the previous sections.

// If the module has a record icon, add the record field icon column
							if (module.tf_hasRecordIcon) {
								columns.push({
									xtype : 'recordiconcolumn',
									locked : true
								})
							}

Finally, see the effect.This is the effect added to Module Grouping.