Extjs Study Notes 6 Panel_extjs

Extjs has encapsulated the Panel for us. The Panel has a unified title header, panel body, panel bottom, and can also freely add toolbars, etc. In addition, there are rich layouts in extjs, which can be used to layout Panels. This method is very similar to Java's Swing. Panels can be nested and can be used as the frame of the entire page or as a small functional area. The FormPanel used in the previous articles is inherited from the Panel class.

The following example shows a relatively complete Panel, mainly setting up the toolbar:

Copy code Code As follows:

• List Item 1


• List Item 2


• List Item 3< /li>
  
• List Item 4


• List Item 5

Remove the html configuration item in the above example and replace it with:
autoLoad:'RemoteContent.htm'. The effect is:

The autoLoad configuration item will change < The content between ;body> is loaded. It should be noted that the loaded file cannot contain , otherwise it will not load normally. Also note that loading aspx pages directly using this method often fails. For example, create a new Default.aspx page with the content:

Copy the code The code is as follows:

The button event is:

Label1.Text = "Hello Asp.net With Extjs.";

Configure autoLoad as the Default.aspx page, click the button, and you will find that the entire Panel is gone, leaving only the aspx page content. Therefore, autoLoad is suitable for loading html files, or html codes output through ashx pages. These output codes are strictly controlled by ourselves, and using the default aspx postback page will definitely not work. It is also impossible to directly combine extjs and asp.net server controls. If you have to be lazy, you can use this method:

html:' 'That's it.
Panel also has a ContentEl attribute that can load the dom node on this page. This method can also be used in conjunction with the asp.net server control, with slight modifications to Default.aspx:

Copy code The code is as follows :

Here is some fixed Content

< /form>