ExtJs2.0 Learning Series (2)--ext.panel

Previous Article ExtJs2.0 Study Series (1)--ext.messagebox, by everyone's mixed, or some friends put forward good suggestions, thank you here!

Today we introduce the panel component in ExtJS.

HTML code

<div id="container">
　　</div>

JS Code

var p = new Ext.panel ({
        Title: ' My Panel ',//Header
        collapsible:true,//the contraction button on the upper right corner, set to False to not display
        Renderto: ' container ',//This panel is displayed in the HTML Layer with ID container
        width:400,
        HEIGHT:200,
        HTML: "<p> I am content, the HTML I contain can be executed!" </p> "//panel the content in the body, you can execute HTML code
    });

Because the subclass component of the Panel component includes the Tabpanel,gridpanel,formpanel,treepanel component, it is important to introduce the configuration parameters and associated properties and methods of the Panel component.

Configuration parameters (only some of the common parameters are enumerated)

1.autoLoad: Valid URL string, put the data in the body of that URL load display, but may not have style and JS control, just HTML data

2.autoScroll: Set to True to produce scroll bars when content overflows, default to False

3.autoShow: Set to True to display the element set to "X-hidden", it is necessary that the default is False

4.bbar: Bottom bar, shown in the main body,//code: Bbar:[{text: ' Bottom toolbar Bottomtoolbar '}],

5.tbar: Top bar, shown in main body,//code: Tbar:[{text: ' Top toolbar Toptoolbar '}],

6.buttons: Button collection, automatically added to footer (footer parameter, shown outside the main)/code: Buttons:[{text: "button is located in Footer"}]

7.buttonalign:footer the position of the button, the enumeration value is: "Left", "right", "center", default is Right

8.collapsible: Set to True to display the Shrink button in the upper-right corner, default to False

9.draggable:true can be dragged, but requires you to provide the procedure, the default is False

10.html: The content of the subject

11.id:id value, you can find this component by ID, it is recommended to add this ID value

12.width: Width

13.height: Height

13.title: Title

14.titleCollapse: Set to True, click anywhere in the title bar to shrink, default to False.

15.applyTo: (ID) in which HTML element is rendered

16.CONTENTEL: (ID) render which HTML element inside, render the contents of El

17.renderTo: (ID) in which HTML element is rendered

About the difference between these three parameters (personally think: ApplyTo and Renderto emphasize to HTML element, Contentel is HTML element to ext component):

English is as follows (my English poor, dare not disorderly translation):

Contentel-this config option is used to take existing content and place it in the "a new panel." It isn't going to being the actual panel itself.

(It would actually copy the InnerHTML of the El and use It as the body). You should add either the X-hidden or the X-hide-display CSS class to prevent a brief flicker of the content before it is Rendered to the panel.

Applyto-this config option allows you to the pre-defined markup to create a entire Panel. By entire, I mean your can include the header, Tbar, body, footer, etc. These elements must are in the correct order/hierarchy. Any components which are is not found and need to is created.

Renderto-this config option allows you to the render a Panel as its created.

This would is the same as saying Mypanel.render (element_to_render_to);

Which adult help to translate ...