itFarmer

在 Ext 中抓資料，我習慣用 JsonStore，一來 JsonStore 資料量少，二來現在已有很豐富的API將 Java Object 轉成 JSON 格式，後端要準備 JSON 格式資料已經非常方便了。

去後端抓資料，免不了需要依據前端查詢條件動態組合 SQL，此時 JsonStore 就需要把 form 的輸入資料透過 Http Request一併送到後端，在 JsonStore 我們可以用 baseParams 設定，例如:

var store=new Ext.data.JsonStore({

        root: 'data',

        totalProperty: 'size',

        baseParams:{

           voucherNo:"A000092"

        }

}

這個是寫死的，但誰也知道參數一定是動態組出來的，而且這件事都是在使用者輸入完查詢條件後再按下「查詢」鈕後才會觸發，所以都需配合 javascript 寫個 function bind 在【查詢】鈕上。

<input type="button" value="查詢" onclick="query()">

<script>
// 在裡面需要將 form 所有輸入欄位塞到 JsonStore 的 baseParams 中
function query() {
     store.baseParams={voucherNo:xxxx, empNo:yyyy}
}
</script>

上面的 voucherNo:xxxx, empNo:yyyy 是動態的，我們需要把 form 的所有欄位集結成這個 object，
這裡我借用了 jQuery 做這做事，也許 Ext 也有類似的功能，不過要手工打造一些東西時，簡潔有力的 jQuery 還是我的最愛。

用 jQuery 將 form 資料轉換成 javascript object，透過 selector "form :input" 找出所有輸入型欄位(textarea, radio, text, checkbox)，眾多輸入欄位就 radio及checkbox 最囉嗦，所以需額外針對有打勾資料篩選var param={}

                var param={}

                $("form :input").each(function(){

                        if(this.type&&this.type=="radio"&&!this.checked){

                                return;

                        }

                        if(this.type&&this.type=="checkbox"){

                                if(!this.checked) return;

                                if( param[this.name]==null) {

                                        param[this.name]=[];

                                }

                                param[this.name].push(this.value); // checkbox 可複選，所以需用個陣列來放

                                return ;

                        }

                        var me=$(this) ;

                        param[me.attr("name")]=me.val() ;

                })      

上面程式跑完後，form的所有資料就轉到 param 裡了，最後一關，就是將這個 param 放到 JsonStore，
 
store.baseParams=params;
// 最要執行 reload() ，不是 load(...)，也不是 reload(..)，這個 JsonStore 放了很多非常相似的方法，害我找半天...
store.reload() ; 

So....... 大功告成 !