Come with me. EXTJS5 (20--module grid Other functions of the idea, the first 20 sections of the source code)

Come with me. EXTJS5 (20--module grid Other functions of the idea, the first 20 sections of the source code)
through the design and coding of custom modules and grids, it is now possible to generate interfaces and perform some simple curd operations on a module with configuration information. Since this is a fully explanatory front-office architecture, any new ideas you can think of will fit into all modules. For example, "grid column width automatic adaptation" This feature, we can add "column width Adaptive mode" In the system settings, the following three options: 1, do not automatically adapt, 2, the first time to load data automatically adapt; 3? Each load data is automatically adapted. Because the column width automatically adapts takes the time, if the field is many, the record many will be slow, therefore may join this setting, lets the user according to own preference to set. You can also make some settings for each type of field, such as the display format of the date, the numeric value of the floating point is not added to the section symbol, the number of decimal digits, the color, and so on. The following describes a small feature that uses the MVVM feature to display the Namefield of the currently selected record on the title. First look at the effect:



The following specific changes, first in the grid.js to change the bind statement

Bind: {title: ' {tf_title} {selectednames} '//data bound to Tf_title in Modulemodel and//Name of selected record},

Then add the attribute to the data in the Modulemodel.js:

Selectednames: '//Names of the   selected record is displayed on the title

The grid's record selection event has been added in the previous sections, as long as you modify the event function, and modify the Modulecontroller.js

The selected record has changed after the event selectionchange:function (model, selected, eopts) {//sets the state of the Delete button This.getview (). Down (' toolbar button# Delete ') [selected.length > 0? ' Enable ': ' Disable ' (); var ViewModel = This.getview (). Getviewmodel (); The name of the organization-selected record is displayed in the title, and there are two options to choose from. One is to use the following MVVM attribute, and the second is to call Refreshtitle () var selectednames = ' if (Selected.length > 0) {if (!! Selected[0].getnamevalue ()) Selectednames = Selectednames + ' "<em> ' + selected[0].getnamevalue () + ' </em> ' + (Selected.length > 1?) ' et ' + selected.length + ': ') + ' ';} Viewmodel.set (' Selectednames ', selectednames); Modify the data in the Modulemodel, and automatically update bind's title//This.getview () when modified. Down (' grid '). Refreshtitle (); This is done without the MVVM attribute},

In a few simple sentences, a new function is added. The operation of the grid is temporarily over, starting with the development process of customizing the form and customizing the chart. Have questions or suggestions please reply, or contact me: [email protected].

To download the source code can be downloaded to my resources, or click the Open link to enter the download page.