Learn extjs5 with me (20 -- other functions of the module Grid, the first 20 source codes)

Learn extjs5 with me (20 -- other functions of the module Grid, the first 20 source codes)
Learn extjs5 with me (20 -- other functions of the module Grid, the first 20 source codes)
After the design and encoding of the custom module and Grid, you can now generate an interface for a module with configuration information and perform some simple CURD operations. Because this is a fully explanatory front-end architecture, any new ideas you think of can be put into all modules. For example, for the "Automatic Adaptation of Grid column width" function, we can add the "Adaptive Mode of column width" to the system settings. The following three options are available: 1. Auto adaptation is not enabled; 2. Automatic Adaptation when loading data for the first time; 3? Data is automatically loaded each time. It takes time to automatically adapt to the column width. If there are many fields, many records will be slow. Therefore, you can add this setting so that you can set it based on your preferences. You can also set fields of each type, such as the display format of the date, the number of floating points, the number of decimal places, and the color. Next we will introduce a small feature that uses MVVM features to display the nameField of the currently selected record on the title. First look at the effect:



Next, modify the bind statement in Grid. js.

Bind: {title: '{tf_title} {selectedNames}' // bind data to tf_title and // name of the selected record in ModuleModel },

Then add the attribute to data in ModuleModel. js:

SelectedNames: ''// the names of the selected record is displayed on the title

The selected events of the Grid record have been added in the previous sections. You only need to modify the event function and modify ModuleController. js.

// SelectionChange: function (model, selected, eOpts) after the selected record changes {// set the deletion button status this. getView (). down ('toolbar button # delete') [selected. length> 0? 'Enable': 'disable'] (); var viewModel = this. getView (). getViewModel (); // The name Of The record selected by the organization is displayed on the title. There are two options to choose from. One is to use the following MVVM features, the second is to call refreshTitle () var selectedNames = ''if (selected. length> 0) {if (!! Selected [0]. getNameValue () selectedNames = selectedNames + '『'+ Selected [0]. getNameValue () +''+ (Selected. length> 1? 'Wait' + selected. length + 'barri': '') +'';} viewModel. set ('selectednames', selectedNames); // modify the data in the ModuleModel. After modification, the bind title is automatically updated. // this. getView (). down ('grid '). refreshTitle (); // This does not require MVVM features },

A few simple sentences Add a new feature. The Grid operation has come to an end temporarily. The following describes how to develop custom forms and charts. If you have any questions or suggestions, please reply or contact me: jfok1972@qq.com.

If you want to download the source code, you can download it from my resources, or click the open link to go To the download page.