ExtJs 4.2.1 click the button to bring up the form window

Source: Internet
Author: User

When I was a beginner at ExtJs, I wanted to make a project like this: I used EasyUi to click the button to bring up the Dialog box. There is a Dialog in EasyUi, which is very convenient to use, but now I have moved to ExtJs and found that there is no such framework as Dialog. I found no such control on the Internet, so I searched for the implementation method of the ExtJs Dialog box, now I will post the implementation results. If you have any ideas, I hope to leave a message! Ext. get ("btn_edit "). on ("click", function () {var form = new Ext. formPanel ({// labelAlign: 'top', bodyStyle: 'padding: 5px 5px 0', layout: 'form', items: [{xtype: 'textfield ', name: 'title', anchor: '000000'}, {xtype: 'htmleditor ', border: true, id: 'context', plugins: [Ext. create ('ext. zc. form. htmleditorimag')], height: 400, anchor: '000000'}], buttonAlign: 'center', buttons: [{text: 'save', I Con :'.. /.. /.. /Images/extjs/disk.png ', handler: function () {var text = form. getForm (). findField ('context '). getValue (); alert (text) ;},{ text: 'close', icon :'.. /.. /.. /Images/extjs/cross.png ', handler: function () {win. close (this) ;}}]}); var win = Ext. create ("Ext. window. window ", {title:" edit ", // title draggable: false, icon :'.. /.. /.. /Images/extjs/pencil.png ', height: 600, // height width: 800, // width Layout: "fit", // The window layout type modal: true, // whether the window is modal. The default value is false resizable: false, items: [form]}); win. show () ;}); Description: first, use a button listener to listen to the button action. When you click the button, create a FormPanel first, some basic controls are created in this panel. I will not talk about them here. Then I will create a window and use the Panel I just created as the items of this window, in this way, a form window is created, and then displayed. The above code is win. show (). Note: At the same time, set the window code to modal: true. This is a complete window display!

Related Article

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.