Solution to automatically load the Extjs list details window after it is created_extjs

In Extjs, after creating a new row of data in the grid page of the current page, I entered the editing of the detailed page through a form. At this time, in order to allow the page to automatically open the detailed page for editing, I spent three hours and finally found the solution in Extjs Find the most suitable solution, but the result is only three sentences. I think this may be what many Extjs enthusiasts want to know or already know. For this reason, I will share it with you, just to contribute some of my own to the extjs community. idea.

After the list is created, there will usually be a prompt. Now I will tell you my first few ideas. If you want to see the results directly, you can skip to the last set of plans~

Option 1 (abandoned). After creating new data, send an id value to the createform method. This may be the first method that ordinary web developers think of, by passing parameters to a detail page, and then the detail searches for the corresponding data in the library based on the ID and displays it on the page. However, after investigation, it was found that the page is displayed through the sub-window of the current page, and the data of the sub-window is passed in through each row of data in the grid. If you want to display the second-level page, you must first display it in the grid. To read out a piece of data, pass the entire value as a record. After adding data, the list itself needs to be updated. It is better to read the latest data in the list directly and pass it in directly. Well, this brings me to the second plan ~

Plan 2 (successful) . After the data is created and the list is updated, set the first item in the list (because it is sorted according to the creation time) to the selected state, and call the onEdit method, which is equivalent to clicking on the first row of data in the grid and clicking the edit button. Effect (ps: Am I very talented?). Okay, after the save data method, call grid.selModel.selectRow(0), and then grid.onEdit() (your own defined editing method, take out the selected row through grid.getSelectionModel().getSelected(), and Pass the parameters to the form), please note that if you select it directly here, it will be the first item before the selected list is updated (not the first item after the update we want)~~ Because the load of the store is loaded asynchronously , haha, so here, we need to put these two methods into the setTimeout function, like this:

Copy code The code is as follows :

setTimeout(function(){
Ext.getCmp("gridPanel").sm.selectRow(0);
Ext.getCmp("gridPanel").onEdit() ;
},300);

Just set the delay and then execute the selection and editing methods. Have you noticed that I am using getCmp instead of this.grid? Because the scope of setTimeout in js is global, if a local variable is used here, js will report an error of "undefined object or method". However, I found another problem when I was using it. The delay time felt a bit long, and people always felt uncomfortable when there was a delay. Can it be done without using this function? Ever since, the ultimate plan is about to be released! This is a method I found after trying hard to no avail. Hehe, it feels a little opportunistic. Don’t laugh at me, haha~
I am also a novice. I just learned Extjs not long ago, and I am not that familiar with js. , I guess for experienced people, these small problems are trivial and are not taken seriously, but I still feel a sense of accomplishment after thinking about this. Experts just skip it and don’t listen to my ramblings, haha~
Option 3 ( Best). Select the list in the callback function of the Extjs message window and open the details. This is my best solution. Because I found that Ext provides four parameters for the Ext.Msg.alert() method, namely title, msg, fn, scope (see reference blog post). Among them, fn is the content of the callback function block, which will be called after clicking the button. function, I put the above two lines of code in the callback function, which solved the two major problems of delayed loading and user experience. It is really the best of both worlds, why not?

Copy code The code is as follows:

Ext.Msg.alert("Prompt message", " Created successfully, please enter detailed information!", function() {
this.grid.sm.selectRow(0);
this.grid.onEdit();
}, this);

Although the code seems to be only a few lines, it consumes a lot of my brain cells. In order to come up with this solution, I tried and debugged it dozens of times. If you find it useful, don’t forget to like it~
In the process of solving the problem, I referred to the following blog post:
ExtJS Ext.MessageBox.alert() pop-up dialog box detailed explanation