ExtJs Form的相关操作常用技巧

1、Ext.FormPanel load(自动加载) 时的json格式手工映射
    {root:[{id:'id'},{code:'code'}]}，则读取时需要在Ext.FormPanel里添加reader属性: 

     reader: new Ext.data.JsonReader({
         root: 'root'  
    },[   
           {name:'userId',mapping:'id'},   
           {name:'code'}   
    ])
    上面的例子是使得Form里面的id或name为userId的控件显示root下id的值。而id或name为code的这映射到code。

2、Form组件不显示或显示不正常
    id冲突，这个问题经常由重用引起的
    布局，form组件只有在'form'布局才显示正常，应添加layout:'form'

3、Ext中显示图片
    a、用html的方式：
        {xtype:'panel',border:true,html:'<img src="图片地址"/>'}
    b、用autoCreate的方式：
        {   
        fieldLabel: '图片',   
        autoCreate:{   
            tag: "input",   
            type: "image",   
            src: "图片地址",   
            width: 150,   
            height: 200,   
            autocomplete: "off"  
    } 

4、Ext中事件的几种方式
    以下例子都是以panel作为句柄，假设在panel上增加事件。
    a、使用addListeners：
        addListener( ​​String eventName, ​​​​Function fn, ​​​​Object scope, ​​​​Object options ​​​) 
        panel.addListeners('click',function(){alert('点击事件')},this);

    b、使用addEvents自定义事件:
        addEvents(Object o)
        panel.addEvents({"eventName":true}) 

        激活事件
        fireEvent( ​​String eventName, ​​​​Object... args ​​​) 
 : Boolean
        panel.fireEvent("eventName",this);

    c、使用on：
        on( ​​String eventName, ​​​​Function handler, ​​​​Object scope, ​​​​Object options ​​​) 
        panel.on('click',function(){alert('点击事件')},this);

    d、使用listeners属性：
        listaners : {'click' : function(){alert('点击事件')}}
    
    e、使用handler属性（此属性不一定是所有控件都有）：
        handler : function(){/*事件处理*/}

5、reset() 无法刷新inputType:file的值：
    使用Dom的刷新：formPanel.form.getEl().dom.reset();