Generate MetaData for ExtJs Data Reader
Metadata is one of my most used properties in Ext.data.reader.Reader. It allows me to pass custom data/configuration to Grid Panel, Form, ComboBox and other components without needing extra efforts to change the code. At the following example, I just want to put my column layout configuration to the grid without configuring the data fields in the data store. If the settings of data fields is bound with data columns' information on the database, then we could save a lot of time to match the data field types when updating/retrieving data to/from server.
In this article, we are going to retrieve field types, defaultValues, and allowBlank settings via the meta data which is generated based on the data columns information of the MySQL database.
For example, we want to display a data grid with paging toolbar which shows a list of values of 'items'.
We now just need to create a simple JsonStore and let the proxy retrieves the information by 'MetaDataExample.php'.
The following function feeds the meta data to the client and it indicates that we want to show all records from all fields of items table. The 'db' variable is a custom class to handle the database operation and I will explain the functions later. The 'ret' variable contains output data to feed the JSON reader.
We want to avoid some unwanted characters to appear on the data, we need to convert some characters to UTF8 format characters.
At the following function, we start to generate the metadata for output. The key part is the value of 'fields', since we want to output the field types and default values based by the database's table structure.
We start to parse the meta data output fields from the data columns of the data table. First of all, we find out the name of the data table from the query result object and gather the columns' information by calling 'getFullColumnsInfo' function which is in the database class. Then we begin to collect the list of database output fields from the query result and match the names to the columns' information we have collected. The columns' information has pretty much enough properties we need in order to generate the settings of field name, field type, default value and allowBlank for meta data fields.
The convertType function plays an important role. We want to convert MySQL's data type to ExtJs data type. This function contains my most used types. The rest of less used types, I leave them to be 'auto'. If you have further types need to be converted, feel free to add them in.
Please note that MySQL does not have 'Boolean' type, but it uses 'tinyint' instead.
The following simple database class wraps functions we need together. In this example, we use PDO class to connect to our MySQL database. You might want to use mysqli extension for MySQL functions instead. However I don't recommend using mysql extension since mysql extension is deprecated since PHP version 5.5.0.
You can also use the same concept to configure the Grid Panel column settings via the meta data. Have a look at 'Dynamic GridPanel for ExtJs 4' and it may give you some ideas to apply column settings via meta data to the Grid Panel.
You can download the source code via here.
In this article, we are going to retrieve field types, defaultValues, and allowBlank settings via the meta data which is generated based on the data columns information of the MySQL database.
For example, we want to display a data grid with paging toolbar which shows a list of values of 'items'.
We now just need to create a simple JsonStore and let the proxy retrieves the information by 'MetaDataExample.php'.
The following function feeds the meta data to the client and it indicates that we want to show all records from all fields of items table. The 'db' variable is a custom class to handle the database operation and I will explain the functions later. The 'ret' variable contains output data to feed the JSON reader.
We want to avoid some unwanted characters to appear on the data, we need to convert some characters to UTF8 format characters.
At the following function, we start to generate the metadata for output. The key part is the value of 'fields', since we want to output the field types and default values based by the database's table structure.
We start to parse the meta data output fields from the data columns of the data table. First of all, we find out the name of the data table from the query result object and gather the columns' information by calling 'getFullColumnsInfo' function which is in the database class. Then we begin to collect the list of database output fields from the query result and match the names to the columns' information we have collected. The columns' information has pretty much enough properties we need in order to generate the settings of field name, field type, default value and allowBlank for meta data fields.
The convertType function plays an important role. We want to convert MySQL's data type to ExtJs data type. This function contains my most used types. The rest of less used types, I leave them to be 'auto'. If you have further types need to be converted, feel free to add them in.
Please note that MySQL does not have 'Boolean' type, but it uses 'tinyint' instead.
The following simple database class wraps functions we need together. In this example, we use PDO class to connect to our MySQL database. You might want to use mysqli extension for MySQL functions instead. However I don't recommend using mysql extension since mysql extension is deprecated since PHP version 5.5.0.
You can also use the same concept to configure the Grid Panel column settings via the meta data. Have a look at 'Dynamic GridPanel for ExtJs 4' and it may give you some ideas to apply column settings via meta data to the Grid Panel.
You can download the source code via here.
Related Posts
In case you missed it
A short update from me
It has been a while since I post a blog page on Blogger which was created back in 2013. So I took an opportunity to...
Showcase the blog site elements
The standard paragraphs Welcome to this demo page! Here, you’ll get an exclusive preview of our cutting-edge platform designed to revolutionise your digital experience. Our...
Issue with "Don't track your own pageviews"
Do you use your own domain name with Blogger? Do you place “Blogger’s Stats Widget” on your page? Or do you regularly check up the...