Extjs layout (1)

Common Ext layout s cover almost all layout methods to meet developers' needs. We will introduce the common methods one by one. Border layout the Border layout is a common layout method in Ext (the overall layout of the entire page is often used ).

Common Ext layout covers almost all layout methods to meet developers' needs. We will introduce the common methods one by one.

Border Layout

Border layout is a common layout method in Ext (the overall layout of the entire page is often used), and it is likely to be used. Before reading the code, familiarize yourself with a special container ViewPort, which is an abstraction of the browser window. You can understand it as a visible area of the browser and render it to the document. body and automatically adjust the size. Only one Viewport can be created for a page.

Var pnNorth = new Ext. panel ({id: 'pnnorth', autoWidth: true, heigth: 80, frame: true, region: 'north', html: 'Place the page header content here '}); var pnWest = new Ext. panel ({id: 'pnwest', title: 'menu item', width: 200, heigth: 'auto', split: true, // display the separation bar region: 'west ', collapsible: true}); var pnCenter = new Ext. tabPanel ({region: 'center', activeTab: 0, items: [{title: 'inbox ', authHeight: true, closable: true, // whether html can be disabled: 'The received email is displayed here... '}]}); Var vp = new Ext. Viewport ({layout: "border", items: [pnNorth, pnWest, pnCenter]});

Column Layout

The Column layout is a Column layout. For example, I have two sub-panels in one panel. What should I do if I want to display one on the left and one on the right? You can select Column to divide the parent Panel into two columns, one on the left and one on the right.

Var pnSub1 = new Ext. panel ({height: 300, columnWidth :. 3, html: 'This is sub-panle1'}); var pnSub2 = new Ext. panel ({height: 300, columnWidth :. 7, html: 'This is sub-panle2'}); var pn = new Ext. panel ({id: 'pn ', title: 'parent Panel', renderTo: 'divpanel ', width: 800, height: 300, layout: 'column', items: [pnSub1, pnSub2]});

Fit Layout

In terms of complexity, the fit layout should be the simplest and the setting should be the least. Fit layout also sets the layout attribute of the parent container, but the sub-container does not need to set any corresponding attribute. It aims to make the sub-container adapt to the parent container (the width of the sub-container configured with fit layout is invalid), but note that if the parent container has multiple sub-containers, only the first one is displayed.

Var pnSub1 = new Ext. panel ({title: "sub panel1", html: "sub panel1 (displayed)"}); var pnSub2 = new Ext. panel ({title: "sub panel2", html: "sub panel2 (not displayed)"}); var pn = new Ext. panel ({renderTo: "divPanel", title: "parent panel", width: 800, height: 200, layout: "fit", items: [pnSub1, pnSub2]});

Table Layout

Most of the Table la s are used in complex scenarios. You can't simply think about the preceding simple situations for web development. Therefore, Table la s are quite common. Of course, but it is slightly different from other la s in parameter settings (not to be afraid, in fact, it is still very small ).

New Ext. panel ({title: "parent Panel", renderTo: "divPanel", width: 900, height: 200, layout: "table", layoutConfig: {columns: 3}, defaults: {height: 100, width: 300}, items: [{html: "First Sub-panel (row: 1, column: 1)", rowspan: 2, // merge Row height: 200 },{ html: "second sub-panel (row: 1, column: 2)", colspan: 2, // merge column width: 600 }, {html: "third sub-panel (row: 2, column: 1)"}, {html: "fourth sub-panel (row: 2, column: 2) "}]});

Form Layout

This layout is specially designed for forms. Of course, it is mostly used in FormPanel (it is also the default Layout Method for FormPanel ). We have mentioned previously that FormPanel does not involve complex la S. In fact, more complex la s are used in actual applications.

New Ext. panel ({renderTo: "divPanel", title: "This is Panel", width: 300, height: 120, bodyStyle: 'padding: 10', layout: "form ", hideLabels: false, labelAlighn: "right", defaultType: "textfield", items: [{fieldLabel: "name", name: "name" },{ fieldLabel: "Age ", name: "age"}]}); new Ext. formPanel ({renderTo: "divPane2", title: "This is FormPanel", width: 300, height: 120, bodyStyle: 'padding: 10', layout: "form ", hideLabels: false, labelAlighn: "right", defaultType: "textfield", items: [{fieldLabel: "name", name: "name" },{ fieldLabel: "Age ", name: "age"}]});

We can also see from the code that the difference is that we have configured layout as form for the Panel. From this we can also see that the default layout of FormPanel is form layout, therefore, if you are a friend who is used to using Panel instead of FormPanel, you must consider the problem of submission. If you use Panel, to be submitted, You need to obtain the control values one by one, while FromPanel does not.

Ext. onReady (function () {var pnRow1 = new Ext. panel ({border: false, layout: 'column', items: [new Ext. panel ({columnWidth :. 5, layout: 'form', border: false, labelWidth: 40, labelAlign: 'right', items: [{xtype: 'textfield ', fieldLabel: 'name', name: 'uname', anchor: '000000'}]}), new Ext. panel ({columnWidth :. 3, layout: 'form', border: false, labelWidth: 40, labelAlign: 'right', items: [{xtype: 'Radio ', fieldLabel: 'gender', boxLabel: 'male', name: 'sex', inputValue: 'male', checked: true, anchor: "95%"}]}), new Ext. panel ({columnWidth :. 2, layout: 'form', border: false, labelWidth: 1, items: [{xtype: 'Radio ', boxLabel: 'female', name: 'sex', inputValue: 'femal', labelSeparator: '', anchor:" 95% "}]})]}; var pnRow2 = new Ext. panel ({layout: 'column', border: false, items: [new Ext. panel ({columnWidth :. 5, layout: 'form', border: false, labelWidth: 40, labelAlign: 'right', items: [{xtype: 'datefield ', name: 'birthday', fieldLabel: 'birthday', anchor: '20140901'}]}), new Ext. panel ({columnWidth :. 5, layout: 'form', border: false, labelWidth: 40, labelAlign: 'right', items: [{xtype: 'combo ', name: 'Study', store: ['specialization', '', 'master', 'doctorate'], fieldLabel: 'diploma ', anchor: '000000'}]}); var pnRow3 = new Ext. panel ({layout: 'column', border: false, items: [new Ext. panel ({columnWidth :. 3, layout: 'form', border: false, labelWidth: 40, labelAlign: 'right', items: [{xtype: 'checkbox', name: 'hoby', inputValue: 'computer ', fieldLabel: 'hobbies', boxLabel: 'computer ', anchor: '20180101'}]}), new Ext. panel ({columnWidth :. 3, layout: 'form', border: false, labelWidth: 1, labelAlign: 'right', items: [{xtype: 'checkbox', name: 'hoby', inputValue: 'football', boxLabel: 'soccer ', labelSeparator: '', anchor: '000000'}]}), new Ext. panel ({columnWidth :. 4, layout: 'form', border: false, labelWidth: 1, labelAlign: 'right', items: [{xtype: 'checkbox', name: 'hoby', intputValue: 'tinytable', boxLabel: 'table tennis ', labelSeparator: '', anchor: '000000'}]})]}; var pnRow4 = new Ext. panel ({// Of course, you can add TextField directly in FormPanel, because there is only one row, but for consistency and alignment convenience, I still put layout: 'form' in the panel ', border: false, labelWidth: 40, labelAlign: 'right', items: [{xtype: 'textfield ', name: 'e-mail', fieldLabel: 'address', anchor: '20140901'}]}); var pnRow5 = new Ext. panel ({layout: 'form', border: false, labelWidth: 40, labelAlign: 'right', items: [{xtype: 'htmleditor ', name: 'note ', fieldLabel: 'note', height: 200, anchor: '000000'}]}); new Ext. formPanel ({renderTo: "divPanel", title: "Personal Information Input", width: 600, bodyStyle: 'padding: 10px ', layout: "form", items: [pnRow1, pnRow2, pnRow3, pnRow4, pnRow5]}) ;});