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();