Ext.onReady(function(){
    // Ext.Msg.alert("提示","hello world！！！")
    Ext.define("MyGridPanel",{
        /*靜態資料，可以從後臺獲取*/
        gridData:[
            {id:"1001",name:"wind",tel:"18603071234"},
            {id:"1002",name:"小月",tel:"18603073578"},
            {id:"1003",name:"冷清雪",tel:"18603073569"},
            {id:
 
"1004",name:"布隆",tel:"18603073214"},
            {id:"1005",name:"莫甘娜",tel:"18603072568"},
            {id:"1006",name:"阿里",tel:"18603073247"},
            {id:"1001",name:"阿卡麗",tel:"18603071563"},
            {id:"1001",name:"卡特",tel:"18603074758"},
            {id:"1001",name:"死歌",tel:"18603072354"},
        ], //儲存資料

        totalCount:
 
0, //資料總條數
        pageSize:5,  //每頁顯示的條數
        mystore:null, // 建立的store資料物件
        myGridPanel: null , //GridPanel物件
        gridFilds:[], //資料列模型

        /* 構建一個GridPanel元件 */
        CreateGridPanel:function(){
            /* 建立列資料 */
            var gridColumn = [{
                header: "使用者ID",
                dataIndex: 
 
"id",
                width:100,
                hideable: false,
                sortable: true,
                draggable: false,
            }, {
                header: "使用者名稱",
                width: 180, 
                dataIndex: "name",
                hideable: false,  
                sortable: true,
                draggable: false, 
            }, {
                header: "手機號",
                flex:1, 
                dataIndex: "tel",  
            }];
            
            var me = this;
            for (var i = 0; i < gridColumn.length; i++) {
                me.gridFilds.push(gridColumn[i].dataIndex);
            }

            /* 構建一個store資料 */
            me.totalCount = me.gridData.length;
            me.mystore = Ext.create("Ext.data.Store", {
                fields: me.gridFilds,
                pageSize: me.pageSize, // 指定每頁顯示2條記錄
                autoLoad: true,
                data: me.gridData,
                proxy: {
                    type: 'pagingmemory',
                    reader: {
                        type: 'json',
                        totalProperty:'total'
                    }
                }
            });

            var picker = Ext.create("Ext.grid.Panel", { 
                store: me.mystore,
                columns: gridColumn,
                layout:"fit", 
                height:350,
                enableColumnHide: false,
                sortableColumns: false, 
                autoScroll: true,
                columnLines: true,  
                noDefaultSelect: true, //不預設選擇第一行
                viewConfig:{
                    stripeRows:true,//在表格中顯示斑馬線 
                },
                dockedItems: [{
                    xtype: 'pagingtoolbar',
                    store: me.mystore,
                    dock: 'bottom',
                    cls: "smallPagingToolBar",
                    inputItemWidth: 50, 
                    displayInfo: true,
                    doRefresh: function () { 
                        me.refresh();
                    }
                }, {
                    xtype: "toolbar",
                    dock: "top",
                    height: 40,
                    style: "padding-bottom:0;border-bottom:1px solid #ddd !important",
                    items: [{
                        xtype: 'textfield',
                        name: 'fastKey',
                        fieldLabel: '查詢',
                        labelWidth: 40,
                        labelAlign: "right",
                        emptyText: "沒有查詢到資料",  // 分頁沒有資料時，分頁右側顯示的內容
                        width: 230,
                        listeners: {
                            change: function (a) {
                                /*過濾查詢*/
                                me.filterData();
                            }
                        }
                    }, {
                        xtype: "displayfield",
                        value: "可選擇資訊("
                    }, {
                        xtype: 'label',
                        style: "color:red",
                        text: me.totalCount,
                        name: "totalCount"
                    }, {
                        xtype: "displayfield",
                        value: ")條"
                    }, "->"]
                }]
            });

            return picker; 
        },

        refresh:function(){
            //清空篩選輸入框的資料,
            var fastKey = this.myGridPanel.query("[name='fastKey']")[0];
            fastKey.setValue("");
            /*重新載入資料*/
            this.filterData(); 
        },

        /*篩選資料*/
        filterData: function () {
            var me = this;
            var fastKey = me.myGridPanel.query("[name='fastKey']")[0];
            var searchValue = fastKey.getValue().toString().toLowerCase(),
                newData = [];  //newData儲存篩選出來的資料
            if (searchValue == "") { 
                newData = me.gridData;
            } else {
                for (var i = 0, len = me.gridData.length; i < len; i++) {
                    for (var j = 1, jlen = me.gridFilds.length; j < jlen; j++) {
                        if (me.gridData[i][me.gridFilds[j]] && me.gridData[i][me.gridFilds[j]].toString().toLowerCase().indexOf(searchValue) >= 0) {
                            newData.push(me.gridData[i]);
                            break;
                        }
                    }
                }
            } 
            /*重新載入資料*/
            me.myGridPanel.store.loadData(newData);
            me.myGridPanel.store.getProxy().data = newData; //更新在快取的資料
            me.myGridPanel.store.loadPage(1); //重新重新整理
            me.myGridPanel.query("[name='totalCount']")[0].setText(newData.length);
        },

        /*建立窗體*/
        CreateWindow:function(){
            /*構建gridpanel元件*/
            var me = this;
            me.myGridPanel = me.CreateGridPanel();
            var win = Ext.create("Ext.window.Window",{
                title:"Grid前端分頁",
                width:500,
                height:400,
                id:"MyWindow", 
                renderTo:Ext.getBody(),
                items:me.myGridPanel
            });
            win.show();
        }
    });
    var mygridpanel = Ext.create("MyGridPanel");
    mygridpanel.CreateWindow();

});