【ExtJS】简单布局应用

浏览数：38 / 时间：2015年06月09日

　　前几天学习了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: 60
6     });

　　　　(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: 1
7     });

　　　　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]
    });

　　　　效果: