14. Teach you EXTJS5 (14) Definition of module fields and grid columns [2]

Model and columns are generated, and the code in Module.js and Grid.js is modified to work together.

/** a container for the main control interface of a module, which is used to place the individual module controls and to coordinate 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 schema, the main controller will automatically load, this controller will not be loaded automatically, need to be specified in requires, do not know whyViewModel: {type:' Module '}, bind: {//Glyph: ' {tf_glyph} ',//This binding is not valid, and after TabPanel rendering, modifying this value will have no effect. Title: ' {tf_title} '//This binding is valid, and you can set the title based on the value in the Modulemodel}, Layout:' Border ',//module with Border layoutinitcomponent:function () {         This. Glyph = This. Getviewmodel (). Get (' tf_glyph ');//because the bind of the glyph above is invalid, you need to add the glyph setting 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 AreaRegion: ' West ', Width:250, Collapsible:true, Split:true}, {xtype:' Modulegrid ',//Grid display area of the moduleRegion: ' Center ', Store: This. Store}, {xtype:' Recorddetail ',//Record DetailsRegion: ' East ', Width:250, Collapsible:true,//can be collapsed hiddenCollapsemode: ' Mini ',//collapse Trap ModeSplittrue            //You can drag the size        }]         This. Callparent (); }})

In Module.js, the model was created according to Modelfactory, and a store was created, using the auto-generated model, because there is no relationship with the background, so the data is first in the local data. See the following code, type: ' Localstorage ', which is the use of local storage to store data.

this. Store = ext.create (' Ext.data.Store ', {    this. Model,    true ,    proxy: {        ' localstorage ',        this. Getviewmodel (). Get (' Tf_ ModuleName ')    })

The Grid.js also modifies:

/** * Main display area of module data, inherit 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 ToolbarDock: ' Top '}], Columnlines:true,//Add a table lineviewconfig: {striperows:true,//odd and even rows of different backgroundEnabletextselection:true}, InitComponent:function () {        varViewModel = This. Up (' Modulepanel '). Getviewmodel (); //Create a grid column         This. Columns =app.view.module.factory.ColumnsFactory.getColumns (ViewModel,10);  This. Callparent (); }})

Add columns to the grid. After the above steps, you can display the interface.

Manually add a few records below, add an event execution to the new button, add handler under "Add" to Gridtoolbar: ' AddRecord ',

/** * Controller of the module*/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 () {        varGrid = This. GetView (). Down (' Modulegrid '); varModel =ext.create (Grid.getstore (). model); Model.set (' tf_id ', 1); Model.set (' Tf_name ', ' Taihu Garden Community Building '); 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 ',NewDate ()); Model.set (' Tf_enddate ',NewDate ()); Model.set (' Tf_isvalid ',false); Model.set (' Tf_m3 ', 1239.24);        Grid.getstore (). Add (model);        Console.log (model);    Grid.getstore (). sync (); }})

Click on the "new" button in a few clicks to enter a few records.

14. Teach you EXTJS5 (14) Definition of module fields and grid columns [2]