On dynamic column of Gridpanel dynamic header in extjs4.1

Previously wrote a gridpanel about dynamic column blog, was only experimental writing, the actual project is not used, because it is experimental writing, so the actual project to consider the problem is not many, for example, if it is dynamic column, the data is dynamic, and may not be fixed, these specific problems, Only after the actual development, will understand, this time just smooth development of gridpanel dynamic column, summed up the process, for the same problem of students to provide a train of thought.

Because it is the actual development of the project, the specific code is more, here is just a few key points of the code, in fact, these code understand, the other functions are very good to get. By the way, my background database operations are in C #.

Since it is a dynamic column, it should consist of two parts of dynamic information, part of the dynamic header information, and a part of dynamic Data information. Header information can be directly generated dynamically, and dynamic data, I have considered the dynamic generation of classes, and then based on the generated class, the construction of data collection, and then tried, not working, so the dynamic Data information or use JS construction, it is not complicated.

When generating a dynamic header, I created a header class, as follows

Because my dynamic columns are all int type, so it is fixed when the foreground is generated, if you have different types, you can add one more field to represent the data type of the field.

After the dynamic header is generated, there are two places to be needed, that is the columns collection of Gridpanel, and the Fields collection of the Build data collection store.

Both the header collection and the data collection are uploaded to the foreground page through the background serialization, which is very simple to manipulate, and the above code is basically just said, building the columns and fields arrays.

The next step is to have a data build, generally this dynamic column, is the row-to-column operation, if not row to column that is simpler. What is a row-and-go column? As an example,

There's a collection of this.

Account name Score

Language Li 120

Math Lee 130

English Lee 140

Language Li 250

Math Lee 250

The final dynamic column requirement is this

Name Chinese maths English

Lee 120 30 40

Lee 250 50 0

Say is dynamic column, in fact, the source of dynamic column is fixed, of course you can also say that I can use SQL, union query can get row to column. Yes, the key is to pass to the foreground way, if you are to serialize, you need to serialize according to a dynamic class, and then to the foreground, that is, in JSON format, if only a DataTable-like way, the foreground is not displayed, Gridpanel data source is generally store.

Then we will organize our data in the format we need, here is a flexible place of JS, attributes can be added directly, such as the above generated header set of dynamic Dataindex, we can define an object, Dynamically adds dataindex and corresponding data values to this object.

OK, the dynamic header collection has, the corresponding data set of the structure has, the following is simple, only need to construct the store, and reconfigure the grid on the line

The dynamic column and the dynamic header are finished.

On dynamic column of Gridpanel dynamic header in extjs4.1