In the previous section, we designed some elements used in module customization , For the sake of intuition , In this section, we first establish the main interface of a module . You've seen me Design and implementation of module management general function custom system Bloggers should know something about it . The main interface of a module is a Grid, Above it is a toolbar for operating buttons , There's a navigation area on the left , On the right is a display area for recording details . Here's an example :

Now let's build this interface , First, in the view Create a directory in module, Create in this directory Module.js,ModuleController.js, moduleModel.js. These three files are the main interface of the module , The controller of the module and the data model of the module . And then in module Create a directory region, Place the controls for each part of the module in this directory , The specific control and interface are shown below :

Let's take a look at the code of each part :Module.js

/**
* A container for the main control interface of a module , It is used to place various module controls and coordinate the relationship between them
*/
Ext.define('app.view.module.Module', {
extend: 'Ext.panel.Panel', alias: 'widget.modulepanel', requires: ['app.view.module.ModuleController', 'app.view.module.ModuleModel'], uses: ['app.view.module.region.Navigate', 'app.view.module.region.Grid',
'app.view.module.region.Detail'], controller: 'module',
// MVVM The name of the controller for the schema ,main The controller will automatically load , This controller doesn't load automatically , Need to be in requires It is specified in , I don't know why
viewModel: {
type: 'module'
},
bind: {
// glyph : '{tf_glyph}', // This binding is invalid , stay tabPanel After rendering , Change the value again , There will be no effect .
title: '{tf_title}' // This binding is valid , According to ModuleModel To set title
},
layout: 'border', // Module adoption border Layout initComponent: function () {
this.glyph = this.getViewModel().get('tf_glyph'); // Because of the above glyph Of bind Invalid , So we need to add glyph Set up
this.items = [{
xtype: 'navigate', // Navigation area
region: 'west',
width: 250,
collapsible: true,
split: true
}, {
xtype: 'modulegrid', // Modular grid Display area
region: 'center' }, {
xtype: 'recorddetail', // Record details
region: 'east',
width: 250,
collapsible: true, // It can be folded and hidden
collapseMode: 'mini', // Folding trap pattern
split: true
// You can drag the size
}] this.callParent();
} })

ModuleController.js

/**
* The 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')
} })

ModuleModel.js

/**
* The 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')
} })

Let's take a look at the source code of the four module controls :

Grid.js

/**
* 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'],
bind: {
title: '{tf_title}' // Data binding to ModuleModel Medium tf_title
},
dockedItems: [{
xtype: 'gridtoolbar', // Button toolbar
dock: 'top'
}], // Custom fields have not been done yet , Let's put some fixed ones first
columns: [{
dataIndex: 'tf_name',
text: ' Project name ',
width: 250
}, {
dataIndex: 'tf_budget',
text: ' Total investment '
}],
store: new Ext.data.Store({
fields: ['tf_name', {
name: 'tf_budget',
type: 'float'
}],
data: [{
tf_name: ' Housing construction project ',
tf_budget: 1230000
}, {
tf_name: ' Road construction projects ',
tf_budget: 453092
}]
})
})

GridToolbar.js

/**
* A modular grid As shown above toolbar, There are various operation buttons in it I haven't considered the authority yet
*/
Ext.define('app.view.module.region.GridToolbar', {
extend: 'Ext.toolbar.Toolbar',
alias: 'widget.gridtoolbar',
uses: ['app.ux.GridSearchField'],
initComponent: function () {
this.items = [{
text: ' Show ',
glyph: 0xf022
}, {
text: ' newly added ',
xtype: 'splitbutton',
glyph: 0xf016,
menu: [{
text: ' Copy new ',
tooltip: ' When adding a new record, first add the current record to the new record ',
glyph: 0xf0c5
}, '-', {
text: ' Upload Excel New form bar ',
tooltip: ' According to the designation excel After adding data to the table , Upload a new record ',
glyph: 0xf062
}, {
text: ' Upload Excel Tables are added in batches ',
tooltip: ' According to the downloaded Excel After adding data to the requirements in the table , Upload batch new data ',
glyph: 0xf062
}]
}, {
text: ' modify ',
glyph: 0xf044
}, {
text: ' Delete ',
glyph: 0xf014
}, '-', {
glyph: 0xf0c6,
xtype: 'splitbutton',
menu: [{
text: ' Add attachment ',
icon: 'images/button/additionadd.png',
glyph: 0xf093
}, '-', {
text: ' Preview all attachments ',
glyph: 0xf03e
}, '-', {
text: ' Download all attachments ',
glyph: 0xf019
}]
}, {
xtype: 'splitbutton',
glyph: 0xf0ce,
menu: [{
text: ' The list is exported to excel',
glyph: 0xf0ce
}, '-', {
text: ' Export selected records to excel',
glyph: 0xf0ce
}]
}, {
xtype: 'splitbutton',
glyph: 0xf02f,
menu: [{
text: ' Print the current page ',
glyph: 0xf02f
}, {
text: ' Print all the records ',
glyph: 0xf02f
}]
}, '-', ' Screening ', {
width: 60,
xtype: 'gridsearchfield',
store: Ext.create('Ext.data.Store', {
proxy: {
type: 'rest'
}
})
}];
this.callParent();
}
})

Navigate.js

/**
* The main control interface of the navigation area , This is one of the core controls of the system
*/ Ext.define('app.view.module.region.Navigate', {
extend: 'Ext.panel.Panel',
alias: 'widget.navigate', // glyph : 0xf0d0,
title: ' Navigation ', initComponent: function () { this.callParent();
} })

Detail.js

/**
* Selected grid One of the records , The area where the details are displayed , Put it on the right side.
*/ Ext.define('app.view.module.region.Detail', {
extend: 'Ext.grid.property.Grid',
alias: 'widget.recorddetail', //glyph : 0xf0ca, // Added this one , The one on the top right can hide this panel You can't see the button ,extjs It's bug A bag ,bug A room
title: ' Record details ', initComponent: function () {
this.source = {
' Project name ': 'title',
' Total investment ': 2929292
}
this.callParent();
} })

11、 Hand to hand Extjs5( 11、 ... and ) Module interface overall design of more related articles

  1. 4、 Hand to hand Extjs5( Four ) Add top and bottom areas to the main interface

    This section adds a top area and a bottom area to the main interface . The interface of a management system can be roughly divided into the top title section . Intermediate data display and processing part . Bottom notes and Status section . Before adding these two areas , We first in MainModel.js Add some data to . ...

  2. teach-by-doing Linux drive 2- The module parameters and symbols of

    adopt < teach-by-doing Linux drive 1- Modular programming , Get along well with module> Learning from , We've learned how to load a module into the kernel , Now let's learn how to pass parameters between modules . One . Pass parameters to the module When we load a module into Li ...

  3. 21、 Hand to hand Extjs5( The 21st ) modular Form Custom design of

    The previous sections complete the module Grid The custom of , modular Form Custom process and Grid The process is similar to , But it's more complicated . Let's first design the overall goal to be achieved . 1、 There can be multiple Form programme , Corresponding to display . newly added . modify . to examine . Approval and other functions ...

  4. 13、 Hand to hand Extjs5( 13、 ... and ) Module fields and Grid Definition of columns [1]

    This section adds module custom fields , And generate... From these fields model. Then define grid Groups and columns in . From all this, we really entered the rhythm of module customization , The complexity and skill of the code are also greatly improved . Start with the customization of module fields . Have a look first ...

  5. 23、 Hand to hand Extjs5( 23 ) modular Form Custom design of [2]

    Various types of fields will be added in this section , When adding fields, you can add multiple fields in one row , So there's another layer in the hierarchy fieldcontainer.form The main hierarchy is as follows : form -- fieldSet -- ...

  6. 20、 Hand to hand Extjs5( twenty ) modular Grid The multi list scheme of

    For modules with many fields, in a grid All fields are displayed in the , It's going to look bloated , For different users, the types of fields they focus on are not the same , Therefore, it is necessary for Grid The list of design multiple programs . When designing this custom system , I've put this part ...

  7. 19、 Hand to hand Extjs5( nineteen ) modular Grid Other functions of

    After the custom module and Grid Design and coding of , Now we can generate interface for a module with configuration information and do some simple CURD operation . Because this is a fully interpretive front-end Architecture , So any new idea you come up with can be put into all the modules . For example, yes. ...

  8. 18、 Hand to hand Extjs5( eighteen ) Drag and drop deletion of module records 、 Drag and drop to copy new

    Drag and drop in web pages (drag-drop) It's an interesting operation ,extjs5 Good encapsulation of drag and drop action in , There are also various classes to support , But learn well “ Drag and drop ” This thing is really hard , Especially for people like me who are not good at English , I don't quite understand the instructions on the official website , Do one ...

  9. 17、 Hand to hand Extjs5( seventeen ) New modules 、 modify 、 Delete operation

    In the last section Grid During the exhibition, we made a function that the amount unit can be selected manually , If you want to add other features , Just follow this pattern , For example, you want to change the color of the amount field . Decimal digit . Whether the zero value shows . Currency symbols . Units are shown in the title bar or in gold ...

Random recommendation

  1. String.format() Formatted string

    1. Several common conversion characters Conversion character explain example %d Integer types ( Decimal system ) 99 %f Floating point type 99.99 %s String type "mingrisoft" %c Character type 'm' %b Boolean ...

  2. Markdown Grammar quick reference table

      Markdown Grammar quick reference table 1 Title and text format title # This is a H1 < First level title > ## This is a H2 < Secondary title > ###### This is a H6 < Six level title > writing ...

  3. uc browser qq Browser ad filtering

  4. Java Call weather Webservice Small application of

    I don't say much nonsense , Post code directly : CityReq.java package com.weather; import javax.xml.bind.annotation.XmlElement; import j ...

  5. 201521123024 《Java Programming 》 The first 5 Weekly learning summary

    1. This week's learning summary 2. Written work 1. Code reading :Child Code inside the package 1.1 com.parent In bag Child.java Can the file be compiled ? Which sentence will go wrong ? Try to correct the mistake . And analyze the output . Can't make up ...

  6. Chapter 2 User Authentication, Authorization, and Security(1): choice Windows and SQL Authentication

    The source of the original text is :http://blog.csdn.net/dba_huangzj/article/details/38657111, Catalogue of special topics :http://blog.csdn.net/dba_huangzj ...

  7. 《java Season one 》 And LinkList Simulation structure case

    demand : Please use LinkedList A collection of analog stack data structures , And test the The title means : Your own definition of a collection class , Within this collection class, you can use LinkedList simulation . Define a class called MyStack The code is as follows : packa ...

  8. [ turn ]BTC RPC API GetTransaction

    In this paper, from : GetTransaction GetTransaction gettransaction Call to get the details of the transaction in the specified wallet . The call requires a node Enable the wallet function . Parameters TXID: To see the details of the transaction I ...

  9. [P1306] The Fibonacci common divisor ( Matrix fast power + Fibonacci sequence )

    The data didn't strengthen at first , A simple program can take gcd(f[n],f[m])=f[gcd(n,m)] The following is after strengthening the data 80 Code division #include<bits/stdc++.h> usin ...

  10. C Language --- Variables and functions

    One C A program is made up of one or more program modules , Each program module serves as a source program file , A source program file is a compilation unit . Source program files are divided into library functions and user-defined functions , And parametric functions . Nonparametric functions . Function call procedure : 1) set ...