【ExtJS】简单布局应用

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

---

　　实现目的：

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

　　内容：

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

---

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

     var show = Ext.create('Ext.panel.Panel',{
         region: 'west',
         title: 'Show',
         width: 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',
        width: 500,
        height: 400,
        border: true,
        renderTo: Ext.getBody(),
        items: [show,form]
    });

　　　　效果: