ExtJs----Ext支持的控件

基本输入控件Ext.form.Field
    Ext.form.Field是所有表单输入控件的基类，其他的输入控件都是基于它扩展的来的。其定义了输入控件通用的属性和功能函数，这些通用的属性和功能函数大致分为3大类：页面显示样式、控件参数配置和数据有效性校验。
    页面显示样式：clearCls, cls, fieldClass, focusClass, itemCls, invalidClass, labelStyle等属性，他们分贝用来定义不同状态下输入框采用的样式。
    控件参数配置：autoCreate, disabled, fieldLabel, hideLabel, inputType, labelSeparator, name, readOnly, tabIndex, value等属性。
   数据有效性检验：invalidText, msgFx, msgTarget, validateOnBlue, validateDelay, validateEvent等属性。

    下列示例展现了空间可以使用的校验显示方式：

 1 Ext.QuickTips.init();
 2
 3 var  field1  =   new  Ext.form.Field( {
 4    fieldLabel:'qtip',
 5    msgTarget:'qtip'
 6} );
 7 var  field2  =   new  Ext.form.Field( {
 8    fieldLabel:'title',
 9    msgTarget:'title'
10} );
11 var  field3  =   new  Ext.form.Field( {
12    fieldLabel:'side',
13    msgTarget:'side'
14} );
15 var  field4  =   new  Ext.form.Field( {
16    fieldLabel:'under',
17    msgTarget:'under'
18} );
19
20 var  form  =   new  Ext.form.FormPanel( {
21    title:'form',
22    items:[field1,field2,field3,field4],
23    renderTo:'form'
24} );
25
26 field1.markInvalid();
27 field2.markInvalid();
28 field3.markInvalid();
29 field4.markInvalid();
30

下拉输入框Ext.form.TriggerField
    Ext.form.TriggerField是ComboBox, DateField和TimeField的父类，它既可以通过手工录入数据，也可以通过选择录入数据。为了显示下拉选择的功能，需要覆写它的onTriggerClick()函数以实现弹出窗口。

 1 var  triggerField  =   new  Ext.form.TriggerField( {
 2    fieldLabel:'选择',
 3    name:'name',
 4    onSelect:function(record){},
 5    onTriggerClick:function(){
 6        if (this.menu == null) {
 7            this.menu = selectMenu;  //selectMenu是一个预先创建的一个Ext.menu.Menu实例，实例中可以放按钮，表格等控件。
 8        }
 9        this.menu.show(this.el,"tl-bl?");  //tl-bl?标示弹出的菜单的左上角或左下角与Ext.form.TriggerField对齐
10    }
11} );

使用表单提交数据

 1 Ext.onReady( function () {
 2    var form = new Ext.form.FormPanel({
 3        defaultType:'textfield',
 4        labelAlign:'right',
 5        title:'form',
 6        labelWidth:50,
 7        frame:true,
 8        width:220,
 9        url:'04_01.jsp',
10        items:[{
11            fieldLabel:'文本框',
12            name:'text'
13        }],
14        buttons:[{
15            text:'按钮',
16            handler:function(){
17                form.getForm().submit({
18                    success:function(form,action){
19                        Ext.Msg.alert('信息',action.result.msg);
20                    },
21                    failure:function(){
22                        Ext.Msg.alert('错误','操作失败!');
23                    }
24                });
25            }
26        }]
27    })
28} );

    在Ext.lib.Ajax中，判断究竟是调用success还是failure的条件与业务无关。如果Http响应成功，就执行success;如果出现404或500错误，就执行failure。
    form中的success和failure则是与业务相关的，只有后台响应为true或响应的JSON中包含success:true时，才执行success()函数。不过，这样一来failure()函数就复杂了，如何判断是连接失败，还是业务上出现问题呢？为了区分它们，EXT默认规定：如果响应的JSON中success不是true，并且响应的JSON中包含errors:{}，那么就认为是业务错误；如果不包含errors:{}，就认为是连接失败。当业务错误时，用this.failureType=Ext.form.Action.SERVER_INVALID;标记，可以通过action.failureType进行判断。

使用HTML原始的提交形式

1 handler: function () {
2    form.getForm().getEl().dom.action = '04_01.jsp';
3    form.getForm().getEl().com.submit();
4}

单纯Ajax

 1 Ext.lib.Ajax.request(
 2     'POST',
 3     '04_01.jsp',
 4      {
 5        success:function(response){
 6            var result = Ext.decode(response.responseText);
 7            Ext.Msg.alert('信息',result.msg);
 8        },
 9        failure:function(){}
10    }
11 )

表单布局----默认的平铺布局

1 items: {
2    {fieldLabel:'俩字'},
3    {fieldLabel:'三个字'},
4    {fieldLabel:'四个汉字'},
5}

    Form中的标签默认使用左对齐的方式，一共有left, top, right三个值可以选，我们可以通过配置labelAlign : 'right'使得右对齐。标签文字的宽度也可以设置，labelWidth : 60。如果标签过长，文字会自动换行。按钮位置也可以设置，有left, center, right3种选择，默认是right。

表单布局----平行分列布局

    先使用layout : 'column'来说明下面要使用的是列布局，然后在items指定的每列中使用columnWidth指定每列所占总宽度的百分比。
    如果使用了分列布局，就不能在表单中直接使用defaultType指定默认的xtype了，否则会影响布局结果。每一列中也必须手动指定使用layout : 'form'，这样才能在每列中正常显示输入框和对应标签。layout : 'form'其实就是FormPanel默认使用的布局方式，即自上而下一次排列。

 1         items:[ {
 2            layout:'column',
 3            items:[{
 4                columnWidth:.33,
 5                layout : 'form',
 6                items:[{xtype:'textfield',fieldLabel:'俩字'}]
 7            },{
 8                columnWidth:.33,
 9                layout : 'form',
10                items:[{xtype:'textfield',fieldLabel:'三个字'}]            
11            },{
12                columnWidth:.33,
13                layout : 'form',
14                items:[{xtype:'textfield',fieldLabel:'四个字'}]
15            }]
16        } ],

表单布局----在布局中使用fieldset

 1 items:[ {
 2    layout:'column',
 3    items:[{
 4            columnWidth:.5,
 5            layout : 'form',
 6            xtype:'fieldset',
 7            title:'俩字',
 8            autoHeight:true,
 9            defaultType:'textfield',
10            items:[{fieldLabel:'俩字'},{fieldLabel:'俩字'}]
11        },{
12            columnWidth:.5,
13            layout : 'form',
14            xtype:'fieldset',
15            title:'三个字',
16            autoHeight:true,
17            defaultType:'textfield',
18            items:[{fieldLabel:'三个字'},{fieldLabel:'三个字'},{fieldLabel:'三个字'}]
19        }]
20    } , {
21        xtype:'fieldset',
22        title:'四个汉字',
23        autoHeight:true,
24        items:[{width:345,height:100,xtype:'textarea',fieldLabel:'四个字'}]
25} ]

自定义布局：在表单中加入图片

1 items:[
2      {fieldLabel:'三个字'} ,
3      {fieldLabel:'三个字'} ,
4      {fieldLabel:'三个字'} ,
5      {xtype:'panel',html:'<center><img src="user_female.png"/></center>'}
6 ]

复选框和单选框

 1 {
 2    xtype:'fieldset',
 3    title:'多选',
 4    defaultType:'checkbox',
 5    hideLabels:true,
 6    items:[{boxLabel:'多选一',inputValue:'1',checked:true},{boxLabel:'多选二',inputValue:'2'},{boxLabel:'多选三',inputValue:'3'}]
 7} , {
 8    xtype:'fieldset',
 9    title:'单选',
10    defaultType:'radio',
11    hideLabels:true,
12    items:[{boxLabel:'单选一',name:'radio',inputValue:'1',checked:true},{boxLabel:'单选二',name:'radio',inputValue:'2'},{boxLabel:'单选三',name:'radio',inputValue:'3'}]        
13}

文件上传
1）首先，给form添加fileUpload ：true参数，如：

1 var  form  =   new  Ext.form.FormPanel( {
2    labelAlign:'right',
3    title:'form',
4    labelWidth:50,
5    frame:true,
6    fielUpload:true,
7    url:'09_01.jsp',
8    width:280
9} )

2)其次，给form添加一个field，并为它设置inputType : 'file'，如：

1 items:[ {
2    xtype:'textfield',
3    fieldLabel:'文本框',
4    name:'file',
5    inputType:'file'
6} ]