一.首先我們看看官方給出的外掛的解釋：

一個檔案上傳表單項具有自定義的樣式，並且可以控制按鈕的文字和 像文字表單的空文字類似的其他特性。 它使用一個隱藏的檔案輸入元素，並在使用者選擇檔案後 在form提交的同時執行實際的檔案上傳。

因為沒有安全的跨瀏覽器以程式設計的方式對file表單項設值的方式, 所以標準表單項的 setValue 方法是無效的。 getvalue方法的返回值取決於使用何種瀏覽器; 一些僅僅返回檔名, 一些返回一個完整的檔案路徑, 一些則返回檔案的虛擬路徑。

二.在我看來這個外掛就是在使用Ext的時候需要用到上傳檔案時的最好選擇，能夠做出效果，實現功能就是王道。

三.下面我們就看看實際運用的程式碼，我會在在難懂的地方做出解釋，希望對大家的理解有所幫助。

uploadEvent:function(){ //自定義點選“上傳”時觸發的事件。
        var me =this;
        var uploadArea = Ext.create('Ext.form.Panel', {
            title : '',
            width : 350,height:105,
            bodyPadding : 10,
            margin:'-15 0 0 -20',
            frame : false,
            fileUpload: true,
            items : [{
                xtype : 'filefield',
                name : 'file',
                id:'fileinput',
                margin:'5 0 0 0',
                fieldLabel : '檔案路徑',
                labelWidth : 60,
                msgTarget : 'side',
                allowBlank : false,
                anchor : '100%',
                buttonText : '請選擇檔案'
            }],

            buttons : [{
                text : '上傳',margin:'0 10 25 0',           
                handler : function() {
                    var url = me.getUrl('flow_check/flow_new');
                    var form = uploadArea.getForm();
                    Ext.MessageBox.show({   //顯示上傳的提示資訊的視窗，有了此方法，下面的Ext.MessageBox.updateProgress函式才能使用
                       title: '請稍等',   
                       msg: '正在上傳...',   
                       progressText: '',   
                       width:300,   
                       progress:true,   //這個也是和Ext.MessageBox.updateProgress函式想對應的，必須設定為true
                       closable:false,   
                       animEl: 'loding'
                     });

                     var updateProgress = function (progress) {
                       if (progress >= 1) {
                            Ext.MessageBox.updateProgress(1, "處理完成");
                            return;
                       }

                       Ext.MessageBox.updateProgress(progress,         Math.round(progress * 100) + "%");//動態在進度條顯示百分比
                       Ext.defer(function () {//延遲500毫秒執行一次下面的函式。
                            updateProgress(progress + 0.1);
                       }, 500);
                     }

                    form.submit({//表單提交，ajax請求，配置上傳成功與失敗的函式事件。
                        url: url,
                        method: 'POST',
                        success: function(f,a) {
                            var result = Ext.JSON.decode(a.response.responseText);
                            if(result.success == true){
                                me.fileName = result.data.filename;
                                me.fileUrl = result.data.url;
                                Ext.getCmp('uploadWindow').destroy();
                                Ext.getCmp('txt_filename').setText(me.fileName);
                            }
                            Ext.MessageBox.alert("提示：",result.msg);
                        },
                        error: function() {

                        }
                    });
                }
            }]
        });

        Ext.create('Ext.Window', {//建立彈出的視窗，items設定為上面定義的uploadArea。
            title: '上傳檔案',
            id:'uploadWindow',
            width:350,
            height:140,
            autoShow: true, 
            modal: true,
            y: 200,
            bodyCls: 'um-create-form',
            items: uploadArea,
            animateTarget: event.target
        });
    }    

這樣就能夠實現一個帶進度條的extjs上傳檔案的控制元件了。

效果圖如下圖所示：