extjs gridpanel例子很实用

/**
 *模拟map
 */
Map = function(){
    var mapAddM = {
        /**
         * entry函数
         * @param {Object} key
         * @param {Object} val
         */
        entry: function(key, val, flag){
            this.key = key;
            this.value = val;
            this.flag = flag;
        },
        //put方法
        put: function(key, val, flag){
            this.store[this.store.length] = new this.entry(key, val, flag);
        },
        //get方法
        get: function(key){
            for (var i = 0; i < this.store.length; i++) {
                if (this.store[i].key === key) 
                    return this.store[i].value;
            }
        },
        //get方法
        getFlag: function(key){
            for (var i = 0; i < this.store.length; i++) {
                if (this.store[i].key === key) 
                    return this.store[i].flag;
            }
        },
        //remove方法
        remove: function(key){
            for (var i = 0; i < this.store.length; i++) {
                this.store[i].key === key && this.store.splice(i, 1);
            }
        },
        //keyset
        keySet: function(){
            var keyset = new Array;
            for (var i = 0; i < this.store.length; i++) 
                keyset.push(this.store[i].key);
            return keyset;
        },
        //valset
        valSet: function(){
            var valSet = new Array;
            for (var i = 0; i < this.store.length; i++) 
                valSet.push(this.store[i].value);
            return valSet;
        },
        //flagSet
        flagSet: function(){
            var flagSet = new Array;
            for (var i = 0; i < this.store.length; i++) 
                flagSet.push(this.store[i].flag);
            return flagSet;
        },
        //clear
        clear: function(){
            this.store.length = 0;
        },
        //size 
        size: function(){
            return this.store.length;
        },
        /**
         *  迭代子
         */
        iterator: function(){
            //TODO 待实现
            var obj = this.keySet();//所有的key集合
            var idx = 0;
            var me = {
                /**
                 * 当前key
                 */
                current: function(){
                    return obj[idx - 1];
                },
                /**
                 * 第一个key
                 */
                first: function(){
                    return obj[0];
                },
                /**
                 * 最后一个key
                 */
                last: function(){
                    return obj[obj.length - 1];
                },
                /**
                 * 是否还有下一个元素
                 */
                hasNext: function(){
                    idx++;
                    if (idx > obj.length || null == obj[obj.length - 1]) 
                        return false;
                    return true;
                }
            };
            return me;
        }
    };
    for (var method in mapAddM) {
        this.store = new Array;
        Map.prototype[method] = mapAddM[method];
    }
}

/**
 * 生成column
 * @param {Object} map
 */
function createColumns(map){
    var columns = [];
    var i = 0;
    for (var it = map.iterator(); it.hasNext();) {
        var currentKey = it.current();//本次循环的key
        var currentVal = map.get(currentKey);//当前value
        var currentFlag = map.getFlag(currentKey);//判断是否隐藏该列
        var columni = {};
        columni.dataIndex = currentKey;
        columni.header = currentVal;
        columni.sortable = true;
        columni.width = 115;
        if ((currentFlag && (currentFlag == "hide"))) {
            columni.hidden = true;
        }
        columns.push(columni);
        i++;
    }
    return columns;
}

/**
 * 生成keyset集合
 * @param {Object} map
 */
function createReaderColumns(map){
    var columns = [];
    var i = 0;
    for (var it = map.iterator(); it.hasNext();) {
        var currentKey = it.current();//本次循环的key
        var columni = {};
        columni.name = currentKey;
        columns.push(columni);
        i++;
    }
    return columns;
}

/**
 * 渲染extgrid
 */
var _pageSize = 10;
function rendExtGrid(_url, _params, renderDiv, map){
    jQuery("#" + renderDiv).html("");//清空已经存在的数据
    /**
     * 读取数据代理
     */
    var proxy = new Ext.data.HttpProxy({
        url: _url,
        method: "POST"
    });
    
    /**
     * 记录
     */
    var record = Ext.data.Record.create(createReaderColumns(map));
    
    /**
     * 解析数据的reader
     */
    var reader = new Ext.data.JsonReader({
        totalProperty: "Total",
        root: "Rows",
    }, record);
    
    /**
     * 数据源
     */
    var store = new Ext.data.Store({
        proxy: proxy,
        reader: reader,
        baseParams: {
            method: "POST",
            searchParam: JSON.stringify(_params) //查詢參數
        }
    });
    
    /**
     * 遮罩
     */
    var loadMarsk = new Ext.LoadMask(document.body, {
        msg: '正在加载数据……',
        disabled: false,
        store: store
    });
    
    //分页工具栏 
    var pagingToolbar = new Ext.PagingToolbar({
        pageSize: _pageSize,
        store: store,
        displayInfo: true,
        displayMsg: '第{0}-第{1}条，一共{2}条',
        emptyMsg: "无数据",
        hideBorders: true,
		cls:"pageBar",//自定义样式
        items: ['-', {
            pressed: false,
            enableToggle: true,
            cls: 'x-btn-text-icon details',
            toggleHandler: function(btn, pressed){
                var view = grid.getView();
                view.showPreview = pressed;
                view.refresh();
            }
        }]
    });
    //创建grid  
    var grid = new Ext.grid.GridPanel({
        store: store,
        region: 'center',
		border:false,
        mode: "remote",
        viewConfig: {
            layout: function(){
                if (!this.mainBody) {
                    return;
                }
                var g = this.grid;
                var c = g.getGridEl();
                var csize = c.getSize(true);
                var vw = csize.width;
                if (!g.hideHeaders && (vw < 20 || csize.height < 20)) {
                    return;
                }
                if (g.autoHeight) {
                    if (this.innerHd) {
                        this.innerHd.style.width = (vw) + 'px';
                    }
                }
                else {
                    this.el.setSize(csize.width, csize.height);
                    var hdHeight = this.mainHd.getHeight();
                    var vh = csize.height - (hdHeight);
                    this.scroller.setSize(vw, vh);
                    if (this.innerHd) {
                        this.innerHd.style.width = (vw) + 'px';
                    }
                }
                if (this.forceFit) {
                    if (this.lastViewWidth != vw) {
                        this.fitColumns(false, false);
                        this.lastViewWidth = vw;
                    }
                }
                else {
                    this.autoExpand();
                    this.syncHeaderScroll();
                }
                this.onLayout(vw, vh);
            }
        },
        columns: createColumns(map),
        frame: false, //表格外加边框   
        collapsible: true,
        animCollapse: false,
        autoHeight: true,
        autoWidth: true,
        autoScroll: true,
        height: 250,
		
        sm: new Ext.grid.RowSelectionModel({
            singleSelect: true
        }),
        iconCls: 'icon-grid'
    
    });
	store.load({ params: { start: 0, limit: _pageSize} });
    /**
     * 容器：为了能宽高自适应
     */
    var viewPort = new Ext.Panel({
        layout: 'fit',
		renderTo: renderDiv,
		autoScroll: false,
		height:400,
		bbar: pagingToolbar,
        items: [grid]
    });
    
    
}