Ext Grid基础

<p>EXT Grid主要用于模拟表格形式的数据展示。
要使用Ext Grid，首先需要配置列模式和数据存储，然后可以加上顶部工具按钮和底部分页工具栏等。
一个典型的Ext Grid创建如下：

 

// 用于读取后台返回的JSON格式数据。格式类似：{"total":10, "results":[{},{}]}
    var reader = new Ext.data.JsonReader({
    	    totalProperty : "total", //表示json的total字段
    	    root : "results",       //表示json的result字段
    	    id : "id"
        }, Ext.data.Record.create([ {
    	    name : "id",
    	    type : "int"
        }, {
    	    name : "name",
    	    type : "string"
        }, {
            name : "cardnum",
            type : "int"
        }])
    );

    // 定义数据集对象
    var store = new Ext.data.Store({
    	autoLoad : false,
    	reader : reader,
    	proxy : new Ext.data.HttpProxy({
                //这里__path是request.getContextPath(),后面加上action
    		url : __path + "/yourNamespace/yourAction.do"
    	})
    });

    // Grid表格组件列内容的列模式
    var columns = new Ext.grid.ColumnModel({
    	defaults : {
    		sortable : true
    	},
    	columns : [ new Ext.grid.RowNumberer(), 
        {
    		header : "学号",
    		width : 80,
    		dataIndex : "id",
    		align : "left"
    	}, {
    		header : "姓名",
    		width : 40,
    		dataIndex : "name",
    		align : "left"
    	}, {
    		header : "卡号",
    		width : 60,
    		dataIndex : "cardnum",
    		align : "left"
    	}]
    });

    // 创建分页组件
    var pagingBar = new Ext.PagingToolbar({
        pageSize : 10,
        displayInfo : true,
        store : store
    });

    // 创建Grid
    var configGrid = new Ext.grid.GridPanel({
    	id : "grid",
    	name : "grid",
    	title : "信息表",
    	applyTo : "grid-div",    //指定映射的DIV
    	trackMouseOver : true,
    	disableSelection : false,
    	frame : true,                    //frame显示
    	bbar : pagingBar,                //底部分页工具
    	store : store,             //数据源
    	collapsible: false,               //自动展开折叠
    	columnLines : true,              //列分割标识
    	stripeRows : true,               //隔行颜色不同
    	enableHdMenu : false,            //取消隐藏列的功能
    	shim : true,
    	trackMouseOver : true,
    	loadMask : true,
    	// 设置页面的高度自适应，下方的工具栏和grid在一起
    	autoHeight : true,
    	autoScroll:true,
    	//如果有选择列，要设置选择模式
    	selModel : false,
    	minColumnWidth : 40,
    	viewConfig : {
    		forceFit : true,             //自动调整column的宽度
    		enableRowBody : false,
    		showPreview : false,
    		scrollOffset: -1             //去除右边的纵向滚动条空位
    	},
    	colModel : columns
    });

    store.load({
        params : {
            start : 0,
            limit : 10
        },
        add : false
    });