《Extjs中布局的组合使用.docx》由会员分享，可在线阅读，更多相关《Extjs中布局的组合使用.docx（13页珍藏版）》请在金锄头文库上搜索。
1、Extjs4.1中布局的组合使用Extjs4.1中布局很经典，也很好用，关键是如何组合布局，组合布局，不仅要达到我们想要的界面效果，还要注意因为布局所付出的渲染代价。下面是我经过反复调试，总结的最常用也很高效的几种组合布局，废话不多说，先看其中一个效果图：因为Extjs布局本身并没有难度，我也没必要在这浪费口舌说些没用的知识点，下面是详细代码，复制粘贴就可以直接运行（注意引入extjs的包）.相信效果会吓你一跳。HTML代码：无标题文档$(document).ready(function()Ext.onReady(function()Ext.require( /Ext.form.*, /Ext
2、.layout.container.Column, /Ext.tab.Panel *);Ext.onReady(function() Ext.QuickTips.init(); var bd = Ext.getBody(); /* * = Simple form = */ bd.createChild(tag: h2, html: Form 1 - Very Simple); var required = *; var simple = Ext.widget(form, layout: form, collapsible: true, id: simpleForm, url: save-for
3、m.php, frame: true, title: Simple Form, bodyPadding: 5 5 0, width: 350, fieldDefaults: msgTarget: side, labelWidth: 75 , defaultType: textfield, items: fieldLabel: First Name, afterLabelTextTpl: required, name: first, allowBlank: false , fieldLabel: Last Name, afterLabelTextTpl: required, name: last
4、, allowBlank: false , fieldLabel: Company, name: company , fieldLabel: Email, afterLabelTextTpl: required, name: email, allowBlank: false, vtype:email , fieldLabel: DOB, name: dob, xtype: datefield , fieldLabel: Age, name: age, xtype: numberfield, minValue: 0, maxValue: 100 , xtype: timefield, field
5、Label: Time, name: time, minValue: 8:00am, maxValue: 6:00pm , buttons: text: Save, handler: function() this.up(form).getForm().isValid(); , text: Cancel, handler: function() this.up(form).getForm().reset(); ); simple.render(document.body); /* * = Form 2 = */ bd.createChild(tag: h2, html: Form 2 - Ad
6、ding fieldsets); var fsf = Ext.widget( xtype: form, id: fieldSetForm, collapsible: true, url: save-form.php, frame: true, title: Simple Form with FieldSets, bodyPadding: 5 5 0,layout: anchor, width: 350, fieldDefaults: msgTarget: side, labelWidth: 75 , defaults: anchor: 100% , items: xtype:fieldset,
7、 checkboxToggle:true, title: User Information, defaultType: textfield, collapsed: true, layout: anchor, defaults: anchor: 100% , items : fieldLabel: First Name, afterLabelTextTpl: required, name: first, allowBlank:false , fieldLabel: Last Name, afterLabelTextTpl: required, name: last , fieldLabel: C
8、ompany, name: company , fieldLabel: Email, afterLabelTextTpl: required, name: email, vtype:email , xtype:fieldset, title: Phone Number, collapsible: true, defaultType: textfield, layout: anchor, defaults: anchor: 100% , items : fieldLabel: Home, name: home, value: (888) 555-1212 , fieldLabel: Business, name: business
