Dojo: How to add a drop-down box that gets stored from a database for a table

The example of adding a drop-down box to a table is on the official website, but if the dropdown box data is requested from the database. There is a need for some attention.

The first thing you want to achieve is as follows:

The initial data of the table is empty, and the table data is obtained after clicking on the query, but the data of the drop-down box is requested separately in the corresponding formatter function to the server.

The approximate steps are as follows:

1. Initialize the table

GridLayout =[{defaultcell: {type:cells._widget, Styles:' Text-align:center; '}, Cells: [{name:"WBS", Field: "Wbscode", Width: "40px"}, {name:"Configuration Name", field: "ConfigName", Width: "80px"}, {name:"Device Name", field: "Equipname", Width: "80px"}, {name:"Repair Item Number", Field: "Mopno", Width: "60px"}, {name:"Repair Project name", Field: "Mopname", Width: "60px"}, {name:"Period", Field: "Mlpcode", Width: "40px"}, {name:"Person in charge", Field: "PersonName", Width: "80px", Formatter:formatterpersoncombobox}, {name:"Scheduled Time", field: "Plandate", Width: "80px"}, {name:"Spare parts/tool shortage alarm", field: "Plandate", Width: "80px" }                                ]                        }]; Storegrid=NewMemory (); Datastoregrid=NewObjectStore ({objectstore:storegrid}); Grid=NewEnhancedgrid ({structure:gridlayout, S Tore:datastoregrid,"Class": "Grid", Escapehtmlindata:false, Nodatamessage:"No Maintenance Project Data", plugins: {indirectselection: {headerselector:true, field: "IsChecked", Width: "40px", Styles: "Text-align:center;"}}                     }, "Griddiv"                    ); Grid.startup (); 

2. Fill in the formatter function corresponding to the drop-down box

                    //function to create a drop-down box for the owner in the table                    functionFormatterpersoncombobox () {varPersonid= ""; varselectperson=NewComboBox ({label:"Combo", Style:"width:80px;", PlaceHolder:"Please select ...", Searchattr:"Name"//This attribute must not be less                           }); Request.get ("Utilselectgetjsonaction.action?mode=combobox&utilselect.selectname=personselect", {handleAs: "JSON"}). Then (function(data) {//The returned data is in the form of the array object                               varStoreperson =NewMemory ({data:data}); Selectperson.store=storeperson;//can't be an object type store, so strangeSelectperson.startup ();                        }); Selectperson._destroyonremove=true; returnSelectperson; }    

What needs to be explained here is that the code in its corresponding then method is actually executed last, i.e. Selectperson.startup (), after the request function has requested data, which is executed after the return Selectperson;

This leads to the inability to put the initialization of the ComboBox in the then write, that is, the code cannot be written like this

            functionFormatterpersoncombobox () {varPersonid= ""; Request.get ("Utilselectgetjsonaction.action?mode=combobox&utilselect.selectname=personselect", {handleAs: "JSON"}). Then (function(data) {//The returned data is in the form of the array object                               varStoreperson =NewMemory ({data:data}); varselectperson=NewComboBox ({label:"Combo", Style:"width:80px;", PlaceHolder:"Please select ...", Store:storeperson, searchattr:"Name"//This attribute must not be less                                                                          });                        }); Selectperson._destroyonremove=true; returnSelectperson; }    

The code above causes the Selectperson to actually be returned before the ComboBox is initialized, resulting in an error.

The problem now is that all the ComboBox is actually requesting the same data source, and if it is multiple records, it makes multiple unnecessary get requests to the server, which remains to be resolved.

The solution is this, because the table data is obtained by clicking the Query button.

So you can request the data source for the drop-down box when the page loads for the first time.

       // initializes the data source for the owner drop-down box, which is the server making the request, stored in the Storeperson, and called                    directly in the subsequent formatter var storeperson=New  Memory ({});                    Request.get ("Utilselectgetjsonaction.action?mode=combobox&utilselect.selectname=personselect", { Handleas: "JSON"})                              . Then (function(data) {                                                                     new  Memory ({ Data:data  })                                  ;    

It is then called directly in the formatter function, because the formatter function needs to click the Query button to execute, so it will be in Storeperson = new Memory ({data:data}); Before executing:

                    //function to create a drop-down box for the owner in the table                    functionFormatterpersoncombobox () {varPersonid= ""; varselectperson=NewComboBox ({label:"Combo", Style:"width:80px;", PlaceHolder:"Please select ...", Store:storeperson, searchattr:"Name"//This attribute must not be less                           }); Selectperson._destroyonremove=true; returnSelectperson; }

Dojo: How to add a drop-down box that gets stored from a database for a table