關於Ext3.0中按條件查詢並重新加載Grid中的數據的實現過程及store.load的分析

　　這個問題一直困擾了我好久，前后大概持續有一個月的時間，因為是完全自學Ext，如果請教他人估計早就解決了，但慶幸的是今天終於被我解決了！

剛開始學習Ext完全是看視頻跟着敲，看完了自己想試着做點什么？原來做了個簡單的《收入支出管理》，就把他改成Ext元素的吧，開始動手，大概是一個多月前吧，別的都好說，就是到了這個通過時間段查詢並重新加載grid中的數據的時候卡住了，原來好像想使用ComboBox嵌入Ajax,找了好久沒找着，而且后來發現那個ComboBox並不合適，后來就沒有再弄下去了，當然這個加載問題也一直存在……1天、2天、3天、、、過年了……

　　過年來了，到了實習單位，還是沒事干，那就還是自己找點事兒吧，感覺上次看的那些Ext視頻早忘的差不多了，后來就決定重新深層次學習一把，《深入淺出ExtJS(第2版)》，！

看了四章，感覺也能做點東西了，於是乎、想起了去年沒完成的那個小項目，但是這次感覺用那個ComboBox並不好，還是使用時間控件比較好，而且時間格式固定方便選擇，開動！

先寫后台，增加了按條件查詢的接口，可以傳遞條件參數和分頁參數，剛開始是布局，然后就是加載數據，這些都很快實現了，又到了那個查詢重新加載的難題，各種嘗試，又是添加監聽器時間久有時添加baseParam屬性，但是找了好幾天網上還真沒具體的配置方法，但查到最后，還是感覺baseParam比較靠譜，然后就開始google “baseParam的配置”，最終在http://blog.sina.com.cn/s/blog_c3b8edc40101abm4.html中找到了答案，如下：

需要刷新數據，可以使用reload方法，其使用方法參考load方法。

在加載數據時，如果要修改提交參數，可使用baseParams屬性設置，其使用方法如下：

store.baseParams.page=1;

store.load();

也可以使用setBaseParam方法，其使用方法如下：

store.setBaseParam('page',1);

store.load();

當然，也可以直接在load方法里當參數傳遞，其使用方法請看前面的load方法介紹。，

這就明了多了，后來經過一番嘗試，終於實現了，具體的解析都放到對應的語句上邊了，那么……上代碼！

Ext.onReady(function() {
    var cm = new Ext.grid.ColumnModel([ {
        header : '收入類型',
        dataIndex : 'income_code'
    },// sortable為true設置按列排序
    {
        header : '時間',
        dataIndex : 'income_date',
        sortable : true,
        type : 'date',
        width : 200,
        renderer : Ext.util.Format.dateRenderer('Y年m月d日')
    },

    {
        header : '人員',
        dataIndex : 'income_person'
    },
    // 定義表格中顯示時間格式
    {
        id : 'income_money',
        header : '金額',
        dataIndex : 'income_money',
        sortable : true
    },
    {
        id : 'income_content',
        header : '備注',
        dataIndex : 'income_content',
        width : 200
    } ]
    );
    
    var store = new Ext.data.Store({
        proxy : new Ext.data.HttpProxy({
            url : 'SelectIncomeForJson',
        }),
        /*baseParams: {
            start:0,
            limit:10,
               starttime: '',
               endtime: ''
            },*///baseParams   這個配置不是必須的，只要在重新加載或加載前設置即可
        reader : new Ext.data.JsonReader({
            totalProperty : 'totalProperty',
            root : 'incomeList'
        }, [ {
            name : 'income_code'
        }, {
            name : 'income_date'
        }, {
            name : 'income_person'
        }, {
            name : 'income_money'
        }, {
            name : 'income_content'
        } ])
            /*,//這個事件監聽也沒有必要，因為在點擊查詢按鈕時手動設置了store的參數
        listener:function(){
            this.store.on('beforeload', function(store,options)
                    {
                    var new_params = {
                    start : 0,
                    limit : 20,
                    starttime : starttime,
                    endtime : endtime
                };
                Ext.apply(options.params, new_params);
            });
        }*/
    });
    
    var form = null;
    var grid=null;
    grid= new Ext.grid.GridPanel({
        title : 'ArrayGrid',
        store : store,
        cm : cm,
        renderTo : 'grid',
        stripeRows : true,// 設置斑馬線表格
        frame : true,// 設置表格為panel中的一個frame
        autoHeight : true,
        width : 700,

        tbar : [ {
            text : '回到頂部',
            handler : function() {
                grid.getView().scrollToTop();
            }
        }, {} ],
        bbar : [ new Ext.PagingToolbar({
            pageSize : 10,
            store : store,
            displayInfo : true,
            displayMsg : '顯示第{0}條到第{1}條',
            emptyMsg : "沒有記錄"
        }) ],

        item : [ form = new Ext.form.FormPanel({
            labelAlign : 'left',
            labelWidth : 50,
            method : 'post',
            //url : 'SelectIncomeForJson?start=0&limit=10',
            width : 700,
            renderTo : 'form',
            frame : true,
            items : [ {
                // layout : 'column',
                items : [ {
                    columnWidth : 1,
                    /*
                     * 此處兩個屬性構造一個field集合，使用邊框圍起來，若不使用則是一個普通面板標題，應用中很常用
                     */
                    xtype : 'fieldset',
                    checkboxToggle : true,
                    title : '篩選條件',
                    autoHeight : true,
                    defaults : {
                        width : 600
                    },
                    // defaultType : 'textfield',//該type為全局，而單個item中的xtype便是局部變量
                    items : [ {
                        xtype : 'datefield',
                        id:'starttime',
                        fieldLabel : '起始：',
                        name : 'starttime',
                        width : 150,
                        emptyText : '請選擇',//若希望不選擇時間時單擊按鈕不會產生空列表，則需將該配置去掉,或者在action中添加判斷
                        format : ('Y-m-d')
                    }, {
                        xtype : 'datefield',
                        id:'endtime',
                        fieldLabel : '截止：',
                        name : 'endtime',
                        width : 150,
                        emptyText : '請選擇',
                        format : ('Y-m-d')
                    }, {
                        xtype : 'button',
                        width : 150,
                        text : '查詢',
                        handler : function() {
                            //form.getForm().submit();//這個提交操作沒有起作用，但是只需要下邊的組合就可以完成刷新數據的功能
                            // alert("變量starttime"+starttimeparam);
                            
                            grid.getStore().baseParams.starttime=starttime.value;
                            
                            //grid.getStore().setBaseParam('starttime',starttime.value);//starttime為控件的id值，可以嘗試注釋id后，將無法獲得
                            grid.getStore().setBaseParam('endtime',endtime.value);
                            /*
                             * 以上設置暫且沒有找到組合設置的方法，只能單個了
                             * */
                            /*此處為組合配置，但是應該需要在創建store時聲明，沒有看到想要的結果
                             * grid.getStore().baseParams = {
                                    start:0,
                                    limit:10,
                                    startime:starttime.value,
                                    endtime:endtime.value//name為之前定義的變量
                                };*/
                            
                            grid.getStore().reload();//此處可以寫成reload，也可寫成load()
                            /*如果寫成reload，那么則會重新提交原來store中的url請求，當然load也是，不管你form中有沒有定義新的url，而使用submit則會調用配置的url
                             * 對於reload來說，仍然保留原來Param中配置的參數，但是使用load的話，將不會保留，
                             * (比如我在創建時都不聲明，但是在第一次加載時配置params，那么在此處使用reload則會保留params,但在使用load時，將會清楚該params，)
                             * 而且在store的創建函數中定義baseParam與否並不影響重載時自己重新設置新的參數，也就是說不用提前聲明，直接設定即可，
                             * 無論使用哪種方法只要'有'即可
                             * */
                            // alert("starttime"+starttime.value);
                        }
                    } ]
                } ],

            } ]
        }) ]
    });
    store.load({
        params : {
            start : 0,
            limit : 10/*,//該處命令是在初次加載頁面時加載的參數和reload時的參數，因為沒有查詢參數，故將其注銷，實現無條件查詢，
            //添加以后也不能正常顯示無條件結果，因為此處並不能夠讀取到starttime，
            starttime:starttime.value,
            endtime:endtime.value*/
        }
    });

});

最終結果：選擇起始終止時間，點擊查詢，ok!