首页 > 代码库 > 【ExtJS】简单布局应用
【ExtJS】简单布局应用
前几天学习了ExtJS的各种布局后，以下就是各种实践，从简单做起。
实现目的：
一个提交表单页，一个显示信息页，表单为个人基本资料输入，显示页为基本信息展示。
内容：
总体布局为border布局，展示页为west,提交表单为center。展示页可折叠,默认为折叠状态。
1、展示页用一个panel展示。可折叠，默认为折叠状态。点击提交后展示，点击关闭后关闭。
1 var show = Ext.create(‘Ext.panel.Panel‘,{2 region: ‘west‘,3 title: ‘Show‘,4 width: 150,5 margin: ‘5 2 5 5‘,6 collapsible: true,7 collapsed: true,8 });
collapsed默认为折叠状态。
2、表单页。内容有:姓名输入、性别选择、出生日期、职务、备注。分别用到5种组件。
(1) 姓名输入:组件选择Textfield。
1 var form_name = Ext.create(‘Ext.form.TextField‘,{2 id: ‘form_name‘,3 name: ‘name‘,4 fieldLabel: ‘Name‘,5 labelWidth: 606 });
(2) 性别选择:组件选择RadioGroup.
1 var form_sex = Ext.create(‘Ext.form.RadioGroup‘,{ 2 name: ‘sex‘, 3 fieldLabel: ‘Sex‘, 4 columns: 2, 5 vertical: true, 6 labelWidth: 60, 7 items: [ 8 {boxLabel: ‘Man‘, id: ‘man‘, name: ‘sex‘, inputValue: ‘1‘}, 9 {boxLabel: ‘Woman‘, id: ‘woman‘, name: ‘sex‘, inputValue: ‘2‘}10 ] 11 });
(3) 出生日期:组件选择Date.
1 var form_dateTime = Ext.create(‘Ext.form.Date‘,{2 id: ‘form_date‘,3 name: ‘dateTime‘,4 fieldLabel: ‘DateTime‘,5 labelWidth: 60,6 editable: false,7 maxValue: new Date()8 });
(4) 职务:组件选择ComboBox.
1 var form_work = Ext.create(‘Ext.form.ComboBox‘,{ 2 id: ‘form_work‘, 3 name: ‘work‘, 4 fieldLabel: ‘Work‘, 5 labelWidth: 60, 6 editable: false, 7 store: new Ext.data.Store({ 8 fields: [‘position‘,‘value‘], 9 data: [10 {‘position‘: ‘Engineer‘, ‘value‘: ‘1‘},11 {‘position‘: ‘Boss‘, ‘value‘: ‘2‘},12 {‘position‘: ‘director‘, ‘value‘: ‘3‘}13 ]14 }),15 queryMode: ‘local‘,16 displayField: ‘position‘,17 valueField: ‘value‘18 });
(5) 备注:组件选择TextArea.
1 var form_remark = Ext.create(‘Ext.form.TextArea‘,{2 id: ‘form_remark‘,3 name: ‘remark‘,4 fieldLabel: ‘Remark‘,5 labelWidth: 60,6 flex: 17 });
Form其子组件布局选择为vbox，vbox配置控件宽度与父组件宽度一样。
下面加2个按钮，按钮位置可以设置buttonAlign来定位，这里默认设置靠右。
关于控件值的获取，通过各自id来获取控件，然后通过getValue()获取值，其中RadioGroup控件通过各自id获取控件，获取的值为true和false，采用三目运算符进行转换输出。最后comboBox组件获取值为getRawValue().
除了最后备注控件，其他控件高度为默认高度，将textArea加个属性flex: 1，表示剩余高度由textArea填满。
信息的展示使用update( String/Object htmlOrData, [Boolean loadScripts], [Function callback] )方法更新。
1 var form = Ext.create(‘Ext.form.Panel‘,{ 2 title: ‘Form‘, 3 region: ‘center‘, 4 border: true, 5 id: ‘formId‘, 6 margin: ‘5 2 5 5‘, 7 layout: { 8 type: ‘vbox‘, 9 align: ‘stretch‘10 },11 items: [form_name,form_sex,form_dateTime,form_work,form_remark],12 buttons: [{13 text: ‘Save‘,14 handler: function(){15 var name = Ext.getCmp(‘form_name‘).getValue();16 var sex = Ext.getCmp(‘man‘).getValue() ? ‘man‘ : ‘woman‘;17 var dateTime = Ext.getCmp(‘form_date‘).getValue();18 var work = Ext.getCmp(‘form_work‘).getRawValue();19 var remark = Ext.getCmp(‘form_remark‘).getValue();20 21 show.update(‘<p1>name: </p1>‘ + name + ‘<br />‘ + ‘Sex: ‘ + sex + ‘<br />‘ + ‘DateTime: ‘ + Ext.Date.format(dateTime, ‘Y-m-d‘) + ‘<br />‘ + ‘Work: ‘ + work + ‘<br />‘ + ‘remark: ‘ + remark);22 }23 },{24 text: ‘Cancel‘,25 handler: function(){26 show.update();27 }28 }]29 });
最后将两个结合起来:
var message = Ext.create(‘Ext.panel.Panel‘,{ title: ‘Message Layout‘, titleAlign: ‘center‘, layout: ‘border‘, width: 500, height: 400, border: true, renderTo: Ext.getBody(), items: [show,form] });
效果:
【ExtJS】简单布局应用