ExtJs -- 04 -- Description of window properties and add child components in two ways: extjs custom components

ExtJs -- 04 -- Description of window properties and add child components in two ways: extjs custom components

Ext. you can set the display style for the layout attribute of the onReady (function () {/** extjs container component. The following options are used as needed: -Auto-** default **-hbox // horizontally arranged-vbox // vertically arranged 1) absolute: in the container, it is displayed based on the specified coordinates. 2) accordion: accordion effect. 3) anchor: pay attention to the following points: 1. the components in the container either specify the width or specify the height/width in anchor. the anchor value can only be negative (non-percentage value). Positive values are meaningless. 3. anchor must be a string value 4) border: divide the container into five areas: east, shouth, west, north, center5) card: like the Installation Wizard, one display 6) colunm: take the entire container as a column and then add sub-elements to the container. 7) fit: A sub-element will be filled with the entire container (if multiple sub-elements are filled with only one element) 8) form: is used to manage the layout of input fields in a form. 9) table: uses the layoutConfig: {colunms: 5 }, // divide the parent container into five columns */var win = new Ext. window. window ({id: "id001", // custom id title: "Custom title information", // title width: "40% ", // percentage can be used for width adaptive browser size height: 400, // height resizable: false, // change the size of constrainHea Der: true, // container header restriction // draggable: false, // drag closable: true, // close button display // modal: true, // modal left: 100, // absolute positioning left margin top: 50, // absolute positioning right margin collapsible: true, // display the scaling button maximizable: true, // whether to maximize, it can also be understood as whether to display the maximize button. Minimizable: true, // whether the minimum button can be minimized, or whether the minimum button is displayed. // Html: "<div> <span style = 'background: gray; '> div content area </span> </div>", // content bodyStyle: "background: lightgreen; ", // content area background color // padding: 10, // border padding // closeAction:" hide ", // click the close button to hide it ..... the default value is destroyrendTo: Ext. getBody (), // Where to render layout: "vbox", // if this attribute is to be added, you cannot add sub-components normally. items: [{// Add sub-component xtype: "panel", // alias width: "50%", height: 100, bodyStyle: "background: lightgray;", html: "panel content" },{ xtype: "button", text: "LO GIN "}, new Ext. button. button ({text: "REGISTER", handler: function () {// trigger handle Ext. msg. alert ("pop-up box title", "pop-up box prompt content! ") ;}})]}); Win. show ();})