Extjs layout 总结
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
一、Border布局由类Ext.layout.BorderLayout定义，布局名称为border。该布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置。<!--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:"在线好友" } ] }); });?
4.accordion Layout?
** 注意如果你是用 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中的内容"} ] });});?
?
5 form LayoutForm布局由类Ext.layout.FormLayout定义，名称为form，是一种专门用于管理表单中输入字段的布局，这种布局主要用于在程序中创建表单字段或表单元素等使用。
hideLabels：tru表示隐藏标签，默认为false。在实际应用中，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"} ] }); });?
?
6 table Layout?
Table布局由类Ext.layout.TableLayout定义，类以于html中的table，可以对行或列进行合并。<!--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"));}?
7 card Layout<!--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"));}