Several common la s of Extjs4.0

Ext. onReady (function () {/*** 1. auto layout (default layout) */varpanel1Ext. create (& amp; #39; Ext. panel. panel & amp; #39;, {title: & amp; #39; panel1 & amp; #39;, html: & amp; #39; panel1ddd & amp; # Ext. onReady (function () {/*** 1. auto layout (default layout) */var panel1 = Ext. create ('ext. panel. panel ', {title: 'panel1', html: 'panel1ddd', height: 80, width: 100}); var panel2 = Ext. create ('ext. panel. panel ', {title: 'panel2', html: 'panel2ffff', height: 80, width: 100}); var panel3 = Ext. create ('ext. panel. panel ', {title: 'panel3', html: 'panel3yyyy', height: 80, width: 100}); var panel4 = Ext. create ('ext. panel. panel ', {title: 'panel4', html: 'panel4ggg', height: 80, width: 100}); var auto = Ext. create ('ext. window. window ', {title: 'Auto Layout', width: 100, height: 420, layout: 'auto', ults: {bodyStyle: 'padding: 15px '}, items: [panel1, panel2, panel3, panel4]}); auto. show ();/*** 2 anchor layout (displayed by percentage) */var panel5 = Ext. create ('ext. panel. panel ', {title: 'panel5', html: '000000', anchor: '000000'}); var panel6 = Ext. create ('ext. panel. panel ', {title: 'panel6', html: '000000', anchor: '000000'}); var panel7 = Ext. create ('ext. panel. panel ', {title: 'panel7', html: '000000', anchor: '000000'}); var panel8 = Ext. create ('ext. panel. panel ', {title: 'panel8', html: '000000', anchor: '000000'}); var anchor = Ext. create ('ext. window. window ', {title: 'anchor Layout', width: 250, height: 300, layout: 'anchor ', ults: {bodyStyle: 'padding: 10px'}, items: [panel5, panel6, panel7, panel8]}); anchor. show ();/*** 3 HBox layout (horizontal) */var pp1 = Ext. create ('ext. panel. panel ', {title: 'pp1', html: 'pp1', flex: 1}); var pp2 = Ext. create ('ext. panel. panel ', {title: 'pp2', html: 'pp2', flex: 2 // set the display width ratio of pp1 to pp2 to}); var hbox = Ext. create ('ext. window. window ', {title: 'hbox Layout', width: 300, height: 100, layout: {type: 'hbox', align: 'Stretch '// horizontal stretch }, defaults: {bodyStyle: 'padding: 10px '}, items: [pp1, pp2]}); hbox. show ();/*** 4. VBox layout (vertical) */var p1 = Ext. create ('ext. panel. panel ', {title: 'p1', html: 'p1', flex: 2}); var p2 = Ext. create ('ext. panel. panel ', {title: 'p2', html: 'p2', flex: 1}); var vbox = Ext. create ('ext. window. window ', {title: 'vbox Layout', width: 82, height: 300, layout: {type: 'vbox', align: 'Stretch '}, ults: {bodyStyle: 'padding: 15px '}, items: [p1, p2]}); vbox. show ();/*** 5. accordion (fold layout) */var pa1 = Ext. create ('ext. panel. panel ', {title: 'pa1', html :' Pa1'}); Var pa2 = Ext. create ('ext. panel. Panel', {title: 'pa1', html :' Pa2'}); Var pa3 = Ext. create ('ext. panel. Panel', {title: 'pa3', html :' Pa3'}); Var pa4 = Ext. create ('ext. panel. Panel', {title: 'pa4', html :' Pa4'}); Var pa5 = Ext. create ('ext. panel. Panel', {title: 'pa5', html :' Pa5'}); Var accordion = Ext. create ('ext. window. window ', {title: 'accordion Layout', margins: '5 0 5 5', split: true, width: 210, height: 250, layout: 'accordion', ults: {bodyStyle: 'padding: 35 15 0 50'}, items: [pa1, pa2, pa3, pa4, pa5]}); accordion. show ();/*** 6. fit layout (display a separate component on a container and fill the container space) **/var pan1 = Ext. create ('ext. panel. panel ', {title: 'pan1', bodyStyle: 'padding: 15px', html: 'fit content'}); var Fit = Ext. create ('ext. window. window ', {title: 'fit layout', width: 100, height: 150, layout: 'fit', items: [pan1]}); fit. show ();/*** border Layout */var border = Ext. create ('ext. window. window ', {width: 700, height: 400, title: 'border Layout', layout: 'border', ults: {xtype: 'panel '}, items: [{title: 'North Region is resizable', region: 'north', height: 100, split: true}, {title: 'South Region is resizable', region: 'south', height: 100, split: true}, {title: 'West Region is collapsible ', region: 'west', width: 200, collapsible: true, layout: 'fit '}, {title: 'East Region is collapsible', region: 'east', width: 200, collapsible: true, layout: 'fit '}, {title: 'center region', Region: 'center', layout: 'fit '}]}); border. show ();/*** tools Layout */var tp = Ext. create ('ext. panel. panel ', {width: 500, renderTo: 'toolid', html: 'ffffff', title: 'tools -- head', Tools: [{type: 'close', tooltip: 'Close the window', handler: function () {}}, {type: 'collapse', tooltip: 'collapse the window', handler: function (){}}, {type: 'low', tooltip: 'close the window', handler: function () {}}, {type: 'expand', tooltip: 'close the window ', handler: function () {}}, {type: 'gear ', tooltip: 'close the window', handler: function () {}}, {type: 'help ', tooltip: 'close the window', handler: function () {}}, {type: 'left', tooltip: 'close the window', handler: function () {}}, {type: 'maximize', tooltip: 'close the window', handler: function () {}}, {type: 'imize', tooltip: 'Close the window', handler: function () {}}, {type: 'minus', tooltip: 'close the window', handler: function (){}}, {type: 'Next', tooltip: 'close the window', handler: function () {}}, {type: 'pin', tooltip: 'close the window ', handler: function () {}}, {type: 'gal', tooltip: 'close the window', handler: function () {}}, {type: 'prev ', tooltip: 'close the window', handler: function () {}}, {type: 'print ', tooltip: 'close the window', handler: function () {}}, {type: 'refresh', tooltip: 'close the window', handler: function () {}}, {type: 'restore', tooltip: 'Close the window', handler: function () {}}, {type: 'right', tooltip: 'close the window', handler: function (){}}, {type: 'save', tooltip: 'close the window', handler: function () {}}, {type: 'search', tooltip: 'close the window ', handler: function () {}}, {type: 'toggle ', tooltip: 'close the window', handler: function () {}}, {type: 'unpin ', tooltip: 'close the window', handler: function () {}}, {type: 'up', tooltip: 'close the window', handler: function () {}}]}) ;}); share: