【ExtJS】简单布局应用

　　前几天学习了ExtJS的各种布局后，以下就是各种实践，从简单做起。

---

　　实现目的：

　　　　一个提交表单页，一个显示信息页，表单为个人基本资料输入，显示页为基本信息展示。

　　内容：

　　　　总体布局为border布局，展示页为west,提交表单为center。展示页可折叠,默认为折叠状态。

---

　　　　1、展示页用一个panel展示。可折叠，默认为折叠状态。点击提交后展示，点击关闭后关闭。　

    var show = Ext.create('Ext.panel.Panel',{
        region: 'west',
        title: 'Show',
         150,
        margin: '5 2 5 5',
        collapsible: true,
        collapsed: true,
    });

　　　　collapsed默认为折叠状态。

            

---

　　　2、表单页。内容有:姓名输入、性别选择、出生日期、职务、备注。分别用到5种组件。

　　　　(1) 姓名输入:组件选择Textfield。　　

    var form_name = Ext.create('Ext.form.TextField',{
        id: 'form_name',
        name: 'name',
        fieldLabel: 'Name',
        labelWidth: 60
    });

　　　　(2) 性别选择:组件选择RadioGroup.　　

    var form_sex = Ext.create('Ext.form.RadioGroup',{
        name: 'sex',
        fieldLabel: 'Sex',
        columns: 2,
        vertical: true,
        labelWidth: 60,
        items: [
            {boxLabel: 'Man', id: 'man', name: 'sex', inputValue: '1'},
            {boxLabel: 'Woman', id: 'woman', name: 'sex', inputValue: '2'}
        ]    
    });

　　　　(3) 出生日期:组件选择Date.

    var form_dateTime = Ext.create('Ext.form.Date',{
        id: 'form_date',
        name: 'dateTime',
        fieldLabel: 'DateTime',
        labelWidth: 60,
        editable: false,
        maxValue: new Date()
    });    

　　　　(4) 职务:组件选择ComboBox.

    var form_work = Ext.create('Ext.form.ComboBox',{
        id: 'form_work',
        name: 'work',
        fieldLabel: 'Work',
        labelWidth: 60,
        editable: false,
        store: new Ext.data.Store({
            fields: ['position','value'],
            data: [
                {'position': 'Engineer', 'value': '1'},
                {'position': 'Boss', 'value': '2'},
                {'position': 'director', 'value': '3'}
            ]
        }),
        queryMode: 'local',
        displayField: 'position',
        valueField: 'value'
    });

　　　　(5) 备注:组件选择TextArea.

    var form_remark = Ext.create('Ext.form.TextArea',{
        id: 'form_remark',
        name: 'remark',
        fieldLabel: 'Remark',
        labelWidth: 60,
        flex: 1
    });

---

 　　　　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] )方法更新。

    var form = Ext.create('Ext.form.Panel',{
        title: 'Form',
        region: 'center',
        border: true,
        id: 'formId',
        margin: '5 2 5 5',
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [form_name,form_sex,form_dateTime,form_work,form_remark],
        buttons: [{
            text: 'Save',
            handler: function(){
                var name = Ext.getCmp('form_name').getValue();
                var sex = Ext.getCmp('man').getValue() ? 'man' : 'woman';
                var dateTime = Ext.getCmp('form_date').getValue();
                var work = Ext.getCmp('form_work').getRawValue();
                var remark = Ext.getCmp('form_remark').getValue();
                
                show.update('<p1>name: </p1>' + name + '<br />' + 'Sex: ' + sex + '<br />' + 'DateTime: ' + Ext.Date.format(dateTime, 'Y-m-d') + '<br />' + 'Work: ' + work + '<br />' + 'remark: ' + remark);
            }
        },{
            text: 'Cancel',
            handler: function(){
                show.update();
            }
        }]
    });

　　　　最后将两个结合起来:

    var message = Ext.create('Ext.panel.Panel',{
        title: 'Message Layout',
        titleAlign: 'center',
        layout: 'border',
         500,
        height: 400,
        border: true,
        renderTo: Ext.getBody(),
        items: [show,form]
    });

　　　　效果: