Extjs list details window automatically loaded after new

In Extjs, after a new row of data is created on the grid page of the current page, the detailed page is edited in the form. In this case, in order to enable the page to automatically open the detailed page editing, it took me three hours to finally find the most appropriate solution in Extjs, but there were only three sentences, I think, this may also be something that many Extjs fans want to know or already know. To this end, I would like to share with you my thoughts on contributing to the extjs community.

After the list is created, there is usually a prompt. Now I will share with you some of my first ideas. If you want to directly view the results, you can skip to the last solution ~

Solution 1 (discard). After creating the data, send an id value to the createform method. This may be the first method that comes to mind for common web crawlers. By passing the parameter to a detail page, detail searches for the corresponding data in the database based on the id and displays the data on the page. However, after investigation, we found that the page is displayed through the subwindow of the current page, and the data of the subwindow is transmitted through each row of data in the grid, to display the second-level page, read a piece of data from the grid and pass the data as a record. After adding the data, it is necessary to update the list. It is better to directly read the latest data in the list and pass it in directly. Well, this comes to the second solution ~

Solution 2 (successful ). after the data is created and updated, set the first item in the list (sorted by creation time) to the selected status and call the onEdit method, it is equivalent to clicking the data in the first row of the grid and clicking the edit button (ps: Am I really talented ). All right, call grid after the save data method. selModel. selectRow (0), and then grid. onEdit () (custom editing method, through grid. getSelectionModel (). getSelected () retrieves the selected row and passes the parameter to form.) Note that if you select the row directly, is the first item before the selected list update (not the first item after the update )~~ Because store load is asynchronously loaded, haha, so here we need to put these two methods into the setTimeout function, as shown in the following code:
Copy codeThe Code is as follows:
SetTimeout (function (){
Ext. getCmp ("gridPanel"). sm. selectRow (0 );
Ext. getCmp ("gridPanel"). onEdit ();
},300 );

Set the latency, and then execute the selection and editing method. Have you found that getCmp is used, not this. grid? Because the scope of setTimeout in js is global, if a local variable is used here, js will report an error "undefined object or method ". However, I found another problem when using the function. It seems that the delay time is a bit long. Besides, it may make people feel uncomfortable when there is a delay. Can I just fix it without using this function? The ultimate solution is coming soon! This is a method that I tried to find out without failure. Hey hey, it's so opportunistic. Don't laugh at me, haha ~
I am also a newbie. I haven't learned Extjs for a long time, and js is not so familiar. It is estimated that I have been familiar with it. These minor problems are all trivial, however, after I think of this, I feel quite fulfilled. The experts just skipped it, so don't listen to me ~
Solution 3 (BEST). Select the list in the callback function of the message window of Extjs and open the details. This is my best solution. Because I found Ext has. msg. the alert () method provides four parameters: title, msg, fn, and scope (see the reference blog). fn is the content of the callback function block, after clicking the button, I will call this function. I put the above two sentences in the callback function, which solves the two major problems of delayed loading and user experience. What is better?
Copy codeThe Code is as follows:
Ext. Msg. alert ("prompt message", "created successfully. Please enter the details! ", Function (){
This. grid. sm. selectRow (0 );
This. grid. onEdit ();
}, This );

Although it seems that there are few lines of code, it consumes a lot of brain cells. In order to come up with this solution, I tried and debugged it dozens of times. If you think it is useful, don't forget to stick it up ~
During the problem solving process, refer to the following blog:
ExtJS Ext. MessageBox. alert () dialog box details