Learn Extjs5 with me. (Definition of 15--module field and grid column [2])

Learn Extjs5 with me. (Definition of 15--module field and grid column [2])model and columns are generated, and the code in Module.js and Grid.js is modified to work together.

/** * A container for the master interface of a module that is used to place individual module controls and 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, the controller will not automatically load, need to be specified in the requires, Do not know why ViewModel: {type: ' module '},bind: {///glyph: ' {tf_glyph} ',//This binding is not valid, after the TabPanel render, then modify this value, there will be no effect. Title: ' {tf_title} '//This binding is valid and can be set according to the value in Modulemodel title},layout: ' Border ',//module with Border layout initcomponent:function ( {this.glyph = This.getviewmodel (). Get (' tf_glyph ');//Because the above glyph bind is invalid, you need to add 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 ',//NAV region: ' West ', width:250,c Ollapsible:true,split:true}, {xtype: ' Modulegrid ',//module's grid display area region: ' Center ', Store:this.store}, {xtype: ' Rec  Orddetail ',//Record detail region: ' East ', width:250,collapsible:true,//Can be folded hidden collapsemode: ' mini ',//collapse trap mode split:true// 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 ', {model:this.model,autoload:true,proxy: {type: ' Localstorage ', ID: ' module ') + ' __ ' + This.getviewmodel (). Get (' Tf_modulename ')}})

The Grid.js also modifies:

/** * The main display area of the 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 bound to Tf_title},dockeditems in Modulemodel: [{xtype: ' Gridtoolbar ',//button Toolbardock: ' Top '}],colu Mnlines:true,//Plus form line viewconfig: {striperows:true,//odd-even line with different undertone enabletextselection:true},initcomponent:function () {var ViewModel = this.up (' Modulepanel '). Getviewmodel ();//create grid column This.columns = App.view.module.factory.ColumnsFactory.getColumns (ViewModel, ten); 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, and add it under "new" in GridtoolbarHandler:' 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 ', ' 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 ', 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 "new" button in a few clicks to enter a few records.