Extjs Study Notes 6 Panel_extjs-JS Tutorial-php.cn

Extjs Study Notes 6 Panel_extjs

WBOY

Release： 2016-05-16 18:36:55

Original

1299 people have browsed it

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:

 
Extjs Combobox< /title> <br><link rel="Stylesheet" type="text/css" href="ext-3.1.0/resources/css/ext-all.css" /> <br><script type ="text/javascript" src="ext-3.1.0/adapter/ext/ext-base.js"></script> <br><script type="text/javascript" src="ext- 3.1.0/ext-all.js"></script> <br><script type="text/javascript" src="ext-3.1.0/src/locale/ext-lang-zh_CN.js "></script> <br><script type="text/javascript"> <br>Ext.onReady(function() { <br>new Ext.Panel({ <br>title: 'Panel Header', <br>tbar: ['Top Toolbar', { <br>// xtype: 'button', // default for Toolbars, same as 'tbbutton' <br>text: 'Button' <br>}, <br>{ <br>xtype: 'splitbutton', // same as 'tbsplitbutton' <br>text: 'Split Button' <br>}, // begin using the right-justified button container <br>'-> ;', // same as {xtype: 'tbfill'}, // Ext.Toolbar.Fill <br>{ <br>xtype: 'textfield', <br>name: 'field1', <br>emptyText: ' enter search term' <br>}, <br>// add a vertical separator bar between toolbar items <br>'-', // same as {xtype: 'tbseparator'} to create Ext.Toolbar.Separator <br> 'text 1', // same as {xtype: 'tbtext', text: 'text1'} to create Ext.Toolbar.TextItem <br>{xtype: 'tbspacer' }, // same as ' ' to create Ext. Toolbar.Spacer <br>'text 2', <br>{ xtype: 'tbspacer', width: 50 }, // add a 50px space <br>'text 3'], <br>bbar: ['Bottom Toolbar '], <br>applyTo: 'mypanel', <br>frame: true, <br>html: '<div>Here is the body of the Panel</div>', <br>bodyStyle: 'background- color:#FFFFFF', <br>height: 300, <br>width: 600, <br>collapsible: true, <br>tools: [{ id: 'toggle' }, { id: 'close' }, { id: 'maximize'}], <br>buttons: [new Ext.Button({ text: 'Click Me' })] <br>}); <br>}); <br></script> <br></head> <br><body> <br><div id="mypanel"></div> <br></body> <br></html> <br>
</div> <br>The effect is as follows: <br><a href="/upload/2010-1/20100108001424175.png"><img title="image"   style="max-width:90%"  style="max-width:90%" alt="image" src="http://files.jb51.net/upload/2010-1/20100108001424323.png"  style="max-width:90%" border="0"></a> <br>The following describes how to load content into the panel. In fact, the above example has shown a method, which is to specify directly through html attributes, but this method does not seem to have much practical value. Panel has an autoLoad property that can load remote pages. Create a new page RemoteContent.htm with the following content: <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="21730" class="copybut" id="copybut21730" onclick="doCopy('code21730')"><u>Copy the code </u></a></span> The code is as follows: </div>
<div class="codebody" id="code21730"> <br>< html xmlns="http://www.w3.org/1999/xhtml"> <br><head> <br><title> 
 
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