【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]

    });

　　　　效果:

巴特西

【ExtJS】简单布局应用

最新文章

热门文章