ExtJS List Details window automatically load resolution after new _EXTJS

Source: Internet
Author: User
Tags first row
In ExtJS, after you create a new row of data on the grid page of the current page, through the form into the detailed page of the editor, at this point, in order to allow the page to automatically open the detailed page editor, I spent three hours, finally found in the ExtJS under the most appropriate scheme, the result is only three words, I think, This may also be what many ExtJS enthusiasts want to know or already know, and for that reason, share it with you, only to contribute some ideas to the ExtJS community.

After the list is created, there will usually be a hint, now I put my first few ideas to talk with you, want to see the results directly can jump to the last set of solutions ~

Option 1 (waiver). After you create a new data, send an ID value to the CreateForm method. This is probably the first way to think of common web prawns, by passing in a detail page, and then detail to the library to find the corresponding data based on the ID and then display it on the page. However, after investigation, found that the page is through the current page of the child window to show the way, the child window data is passed through each line of data in the grid, if you want to display level two page, first of all, in the grid to read out a piece of data, the whole as a record to pass the value. And after adding data, itself is to update the list, but also directly read the list of the latest data, directly into, well, this thought of the second set of programs ~

Programme 2 (Success). After the data is created and updated, the first item in the list (because it is sorted according to the creation time) is selected, and the OnEdit method is called, which is equivalent to clicking on the first row of data in the grid and the Edit button effect (PS: I am not very talented). OK, after the method of the save data, call Grid.selModel.selectRow (0) and then Grid.onedit () (your own defined editing method, through Grid.getselectionmodel (). getselected ( ) to remove the selected row, and pass the parameters to form), pay attention to, here directly selected words, is the list before the election of the first (not the one we want to update the first OH) ~ ~ ~ Because the store's load is asynchronous loading, haha, so here, To put these two methods into the SetTimeout function, like this:
Copy Code code as follows:

settimeout (function () {
EXT.GETCMP ("Gridpanel"). Sm.selectrow (0);
EXT.GETCMP ("Gridpanel"). OnEdit ();
},300);

Set the delay, and then execute the selection and editing methods on the line. Have you found that I am using getcmp instead of This.grid? Because the scope of settimeout in JS is global, so if you use local variables here, JS will be an error "undefined object or method." However, the use of the time to find a problem, this delay feeling a little longer, and, there is a delay makes people feel always uncomfortable, can not use this function to do it? So, the ultimate solution is coming out! This is my brooding no fruit but accidentally found the way oh, hey, there are so little opportunistic feeling, we do not laugh oh, haha ~
I'm a beginner, too. Just learn ExtJS not how long, and JS also not so familiar, estimated put the skilled that, these small problems are trivial, but I think after this feeling is still quite a sense of achievement, master directly skip, don't listen to my long-winded, hehe ~
Programme 3 (BEST). Select the list in the callback function of the EXTJS message window and open the details. This is my best plan. Because I found ext to the Ext.Msg.alert () method provides four parameters, respectively is Title,msg,fn,scope (see reference Bowen) where, FN is the callback function block content, after the click of the button will call the function, I put the above two lines of code in the callback function, To solve the delay loading and the user experience of the two major problems, it is a good thing, why not?
Copy Code code as follows:

Ext.Msg.alert ("Prompt info", "new success, enter details!", function () {
This.grid.sm.selectRow (0);
This.grid.onEdit ();
}, this);

Although it seems that the code does not have a few lines, but it consumes me a lot of brain cells ah, in order to come up with this program, testing and debugging dozens of times, if we feel useful, do not forget the top stickers Oh ~
In the process of solving the problem, the following posts are referenced:
ExtJS Ext.MessageBox.alert () pop-up dialog box detailed

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.