Models and columns are generated, and the code in Module.js and Grid.js needs to be modified to enable them to work together.

/**
 * Containers of the master interface of a module for placing individual module controls and coordinating their relationships
 */
Ext.define('app.view.module.Module', {
			extend : 'Ext.panel.Panel',

			alias : 'widget.modulepanel',

			requires : ['app.view.module.ModuleController',
					'app.view.module.ModuleModel', 'app.view.module.factory.ModelFactory'],

			uses : ['app.view.module.region.Navigate', 'app.view.module.region.Grid',
					'app.view.module.region.Detail'],

			controller : 'module',
			// The name of the controller of the MVVM architecture, the main controller will load automatically, the controller will not automatically load, need to be specified in requires, do not know why.
			viewModel : {
				type : 'module'
			},
			bind : {
				// Glyph:'{tf_glyph}', // This binding is invalid, and modifying this value after tabPanel rendering will have no effect.
				title : '{tf_title}' // This binding is valid, and you can set the title based on the values in ModuleModel
			},
			layout : 'border', // The module adopts border layout

			initComponent : function() {
				this.glyph = this.getViewModel().get('tf_glyph'); // Because the bind of glyph above is invalid, you need to add the glyph settings here.
				this.model = app.view.module.factory.ModelFactory.getModelByModule(this
						.getViewModel());

				console.log(this.model);

				this.store = Ext.create('Ext.data.Store', {
							model : this.model,
							autoLoad : true,
							proxy : {
								type : 'localstorage',
								id : 'module' + '__' + this.getViewModel().get('tf_moduleName')
							}
						})

				this.items = [{
							xtype : 'navigate', // Navigation area
							region : 'west',
							width : 250,
							collapsible : true,
							split : true
						}, {
							xtype : 'modulegrid', // Module grid display area
							region : 'center',
							store : this.store
						}, {
							xtype : 'recorddetail', // Record details
							region : 'east',
							width : 250,
							collapsible : true, // Collapsible hiding
							collapseMode : 'mini', // Folding trapping model
							split : true
							// Can drag size
					}]

				this.callParent();
			}

		})

In Modele.js, a model is created based on the modelFactory, and a Store is created using the automatically generated model. Since there is no relationship with the background, the data is stored in the local data first. See the following code, type:'local storage', which uses local storage to store data.

this.store = Ext.create('Ext.data.Store', {
							model : this.model,
							autoLoad : true,
							proxy : {
								type : 'localstorage',
								id : 'module' + '__' + this.getViewModel().get('tf_moduleName')
							}
						})

        

In Grid.js, the following modifications are also made:

/**
 * Main display area of module data, inherited from Grid
 */

Ext.define('app.view.module.region.Grid', {
			extend : 'Ext.grid.Panel',
			alias : 'widget.modulegrid',
			uses : ['app.view.module.region.GridToolbar',
					'app.view.module.factory.ColumnsFactory'],
			bind : {
				title : '{tf_title}' // Data binding to tf_title in ModuleModel
			},
			dockedItems : [{
						xtype : 'gridtoolbar', // Button toolbar
						dock : 'top'
					}],
			columnLines : true, // Add tabular lines
			viewConfig : {
				stripeRows : true, // Odd and even lines with different background colors
				enableTextSelection : true
			},
			initComponent : function() {
				var viewModel = this.up('modulepanel').getViewModel();
				// Create grid columns
				this.columns = app.view.module.factory.ColumnsFactory.getColumns(
						viewModel, 10);
				this.callParent();
			}
		})

Add columns to the Grid. After the above steps, you can show the interface.

Next, add a few records manually, add an event execution to the new button, and add it under "Add" in GridToolbar. handler : 'addRecord' ,

/**
 * Module Controller
 */

Ext.define('app.view.module.ModuleController', {
			extend : 'Ext.app.ViewController',

			requires : ['Ext.MessageBox', 'Ext.window.Toast'],

			alias : 'controller.module',

			init : function() {
				console.log('modulecontroller.init')
			} ,
			
			addRecord : function(){
				var grid = this.getView().down('modulegrid');
				var model = Ext.create(grid.getStore().model);
				model.set('tf_id',1);
				model.set('tf_name', 'Construction of garden garden');
				model.set('tf_code','2004-01');
				model.set('tf_squaremeter',12000);
				model.set('tf_budget',3800000);
				model.set('tf_rjl',0.67);
				model.set('tf_startDate',new Date());
				model.set('tf_endDate',new Date());
				model.set('tf_isValid',false);
				model.set('tf_m3',1239.24);

				grid.getStore().add(model);
				console.log(model);
				grid.getStore().sync();
			}

		})

Click on the "Add" button a few times and click on several records.