1.column Layout 列布局
在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。columnWidth表示使用百分比的形式指定列宽度。width则是使用绝对象素的方式指定列宽度,在实际应用中可以混合使用两种方式。
<!-- Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ --> Ext.onReady( function (){ var window = new Ext.Window({ layout: " column " , title: " Hello World " , id: " helloWorldWindow " , bodyStyle: " padding:10px; " , width: 550 , height: 300 , x: 100 , y: 100 , items: [ { columnWidth: . 6 , baseCls: " x-plain " , frame: true , layout: " form " , bodyStyle: " padding:5px; " , items: [ {xtype: " textfield " , fieldLabel: " UserName " }, {xtype: " textfield " , fieldLabel: " Age " } ] }, { columnWidth: . 3 , baseCls: " x-plain " , bodyStyle: " padding:5px; " , items: [ {xtype: " textarea " } ] }, { columnWidth: . 1 , baseCls: " x-plain " , bodyStyle: " padding:5px; " , layout: " form " , items: [ { xtype: " button " , text: " Ok " , handler: function () { alert( " OK " ); } }, { xtype: " button " , text: " Cancel " , handler: function () { alert( " Cancel " ); } } ] } ] }); window.render(Ext.getDom( " tt " )); window.show(); });
2.fit Layout
Ext.onReady( function (){ var win = new Ext.Window({ title: " Hello World " , renderTo: Ext.getDom( " tt " ), width: 400 , height: 250 , x: 150 , y: 50 , layout: " fit " , items: [ {xtype: " panel " , title: " O " }, {xtype: " panel " , title: " K " } ] }); win.show(); } );
3. border Layout
<!-- Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ --> Ext.onReady( function () { new Ext.Viewport({ layout: " border " , items:[ { region: " north " , height: 80 , xtype: " label " , // style: "border: 1px solid red;padding:1px;", frame: true , text: " cdred.net study club " }, { region: " south " , height: 20 , xtype: ' label ' , text: ' Status show zone.. ' }, { region: " center " , title: " 中央面板 " }, { region: " west " , width: 200 , title: " 系统栏目 " , collapsible: true }, { region: " east " , width: 150 , collapsed: true , collapsible: true , title: " 在线好友 " } ] }); } );
** 注意如果你是用 panel之类的 必须拥有 title:'' 属性
<!-- Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ --> Ext.onReady( function (){ var panel = new Ext.Panel({ title: " 人员信息 " , renderTo:Ext.getDom( " tt " ), frame: true , width: 250 , height: 300 , layout: " accordion " , layoutConfig: { animate: true }, items:[ {xtype: " panel " , title: " O " , html: " 这是子元素1中的内容 " }, {xtype: " panel " , title: " K " , html: " 这是子元素2中的内容 " }, {xtype: " panel " , title: " L " , html: " 这是子元素3中的内容 " } ] }); });
Form布局由类Ext.layout.FormLayout定义,名称为form,是一种专门用于管理表单中输入字段的布局,这种布局主要用于在程序中创建表单字段或表单元素等使用。
在实际应用中,Ext.form.FormPanel这个类默认布局使用的是Form布局,因此我们直接使用FormPanel即可。
<!-- Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ --> Ext.onReady( function () { var panel = new Ext.Panel({ layout: " form " , title: " HelloWorld " , renderTo:Ext.getDom( " tt " ), width: 400 , height: 250 , frame: true , hideLabel: true , collapsible: true , bodyStyle: " padding:20px; " , defaultType: " textfield " , items:[ {fieldLabel: " Hello " }, {fieldLabel: " World " } ] }); } );
<!-- Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ --> Ext.onReady(exe); function exe() { var panel = new Ext.Panel({ title: " Hello World " , layout: " table " , width: 500 , height: 300 , bodyStyle: ' padding:20px; ' , layoutConfig: { columns: 3 }, items: [ {xtype: " panel " , title: " hello " , html: " hello context " , rowspan: 2 , height: 100 }, {xtype: " panel " , title: " world " , html: " world context " , colspan: 2 }, {xtype: " panel " , title: " cheng " , html: " cheng context " }, {xtype: " panel " , title: " du " , html: " du context " } ] }); panel.render(Ext.getDom( " tt " )); }
<!-- Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ --> Ext.onReady( function () { var i = 0 ; var navHandler = function (direction){ i += direction; Ext.getCmp( " card " ).getLayout().setActiveItem(i); if (i == 2 ) { Ext.getCmp( " move-next " ).setDisabled( true ); } else if (i == 0 ) { Ext.getCmp( " move-prev " ).setDisabled( true ); } else { Ext.getCmp( " move-next " ).setDisabled( false ); Ext.getCmp( " move-prev " ).setDisabled( false ); } }; var card = new Ext.Panel({ id: " card " , title : ' Example Wizard ' , layout : ' card ' , activeItem : 0 , bodyStyle : ' padding:15px ' , defaults : { border : false }, bbar : [{ id : ' move-prev ' , text : ' Back ' , handler : navHandler.createDelegate( this , [ - 1 ]), disabled : true }, ' -> ' , { id : ' move-next ' , text : ' Next ' , handler : navHandler.createDelegate( this , [ 1 ]) }], items : [{ id : ' card-0 ' , html : ' <h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p> ' }, { id : ' card-1 ' , html : ' <p>Step 2 of 3</p> ' }, { id : ' card-2 ' , html : ' <h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p> ' }] }); card.render(Ext.getDom( " tt " )); });
8 absolute Layout
<!-- Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ --> Ext.onReady(exe); function exe() { var form = new Ext.form.FormPanel({ title : ' Absolute Layout ' , frame : true , layout : ' absolute ' , x: 100 , y: 40 , height: 500 , layoutConfig : { extraCls : ' x-abs-layout-item ' }, defaultType : ' textfield ' , items : [{ x : 0 , y : 5 , xtype : ' label ' , text : ' Send To: ' }, { x : 60 , y : 0 , name : ' to ' , anchor : ' 100% ' }, { x : 0 , y : 35 , xtype : ' label ' , text : ' Subject: ' }, { x : 60 , y : 30 , name : ' subject ' , anchor : ' 100% ' }, { x : 0 , y : 60 , xtype : ' textarea ' , name : ' msg ' , anchor : ' 100% 100% ' }] }); form.render(Ext.getDom( " tt " )); }