Use the spreadsheet component ivx lessons learned

Before the show talked about how to use the data ivx use charting components in case more intuitive, but there is another means of data is also used to show - form. ivx also produced a corresponding spreadsheet component of this feature, it said today on how this form component is used.


1. Source table
form and as the need for loop to create data sources, but mostly an array of objects (ah, anyway, I just love the array of objects). You can see the first line of the first column in addition to several elements are behind the " left " (front and back of each note are two underscores), which is used to merge two adjacent tables, and the left into right, up, down it is also possible.

2. Check the box inside the frame and
the table attribute set contains the table box, inside the box which refers to the table in a small cell, and check the box that we selected that small cells. We can set its line width, style and color. Position inside the box is also very easy to understand, four small icons are only three dashed straight line, corresponding to about four internal frame up and down the border. This property can be seen binding data, the value of its binding to the decimal data 0-15, a range of just a corresponding 4-bit binary number, each icon was selected 1, was not selected 0 . FIG four are selected for example a binary number is 1111, the binary number is converted to decimal value 15 would exactly.


3. The column width
of actual cases in the table of contents of each column widths in fact may be unequal, this property is a very good point is that we can not only set the column width, it can also be more detailed more detailed settings according to the situation of each column . Even still fixed width px- pixel widths can be selected, or% - percentage width. Will be stretched open, you can set the minimum width and maximum width, which is to ensure that the entire table will not be severely deformed case we do when we must remember that these boundary processing.

4. High Line
Column Width setting up the natural line is high, because the structure of each line are the same, all contain the same columns, so the row height settings can be easier. Select Auto wrapped high content of fixed-line setting this property does not appear, and each table will depend on how high the total height of the component we add in it. High remaining two options is the need to set a fixed line, the difference is whether to allow the case to put highly indented according to the actual height of the table of contents.

5. Column Name
column header name is set, if the use of custom columns can enter your own name for each column, and if you do not fill open display meter will automatically column names as the array of objects header table. However, recommendations or input header array itself, in order to prevent confusion, and display cases gaps header. Header may be provided on their own display after the opening height of the header, size, color, font, and other related properties.


6. The binding data table
to demo text data binding components example, you can see, the drop down option data binding a total of three, the current object corresponding to a cell array in a data element (note corresponds to the specific ranks), table rows and table numbers respectively corresponding to a column name of the current frame data in an array of objects row number 1 and column names.

As for this one, you can look at a for loop create essay, for which you can add for container vessels, which form also can add a table, the table is the outermost layer 1, the second layer forms is 2, and so on.

7. The table shows how many more types of content
can be divergent thinking about, before the form is a text component, but in fact we can also put pictures in the assembly table, make a table showing the picture, just make an array of objects add a good picture, and then add an image component and images in the table of assets to address the current grid data just fine.

But this form of each picture Gerry is, that if you want to show some of the columns is text, and the column is to show some pictures of it? Here to tell a simple example, screening implemented if the container. Of course, either structure or logic there are many other methods, can be optimized space is also great, very actively encourage everyone to explore.


8. Dynamic Table
Are saying before static chart settings, but we need to understand such a relationship, the table is only responsible for display, its data is derived from an array of objects, and when we went to change the value of an array of objects, when the table will be with you of change.
Moreover, the components within the table in the data binding, you can obtain the current line and column names in the data grid array of objects, which allows us to more precisely target dynamically modify each element in the array. (Similarly, a dynamic table can also be applied to a for loop created by changes in the data array of objects and dynamic cycle of creation)
For example, we can add a button component in the table, and then add the following event to the button, when the button you can delete the entire line where the button is clicked.


Another example in the form of text components into the input box, when we entered the completion replace the original content with what we have just entered, that the new value into an array of objects. Coupled with the database holds, then the next time we open our new content is entered in this table shows the


9 summarizes
when property table itself is not difficult to understand, more is the design of the table structure, as well as involves dynamic table for logic design event. Therefore, the most important is how to grasp the table to form fused into each part of the actual cases, which require more hands-on attempt and exploration.