Extjs自学笔记--gridpanel

已经关注extjs有一段时间了，今天把gridpanel的学习记录一下，供以后参考。
首先有几个概念:fields,store,CheckboxSelectionModel,columnModel,RowSelectionModel
1、首先你需要数据源
数据的生成这个可以后台生成json格式的数据，然后通过proxy填充到ext.data.store，所以概念中的store就是作为grid的数据源的。fields应该是对应的列名。load就是获取到的数据按照开始行数，每页显示多少行加载到store中了。

 var myfields = ["id","name","pwd"];
 var mystore = new Ext.data.Store({
     proxy:new Ext.data.HttpProxy({url:"你的数据生成的地址",method:"POST"),
     reader:new Ext.data.JsonReader({
            fields:myfields,
            root:"data",
            id:"id",
            totalProperty:"totalCount"
     })
 );
 mystore.load({params:{start:0,limit:pageSize});

2、CheckboxSelectionModel就是在前面显示复选框，可以设置选中的是哪一行,columnModel设置每列的属性

    var usersm = new Ext.grid.CheckboxSelectionModel({
        dataIndex: "id"
    });
    var usercm = new Ext.grid.ColumnModel([
            usersm, { header: "工号",
                dataIndex: "id",
                tooltip: "工号",
                sortable: true
            }, { header: "姓名",
                dataIndex: "name",
                tooltip: "姓名",
                sortable: true
            }])

3、现在就可以new我们的grid了

var userGrid = new Ext.grid.GridPanel({
        id: "usergrid",
        store: UserInfoStore,
        sm: usersm,
        cm: usercm,

        autoHeight: true,
        autoWidth: true,
        loadMask: {msg:'正在加载数据，请稍侯……'},
        autoScorll: true,
        viewConfig: {
            columnsText: "显示/影藏列",
            sortAscText: "正序排列",
            sortDescText: "倒序排列",
            forceFit: true
        },
        tbar: [
            {
                text: "新增",
                tooltip: "新增员工信息",
                icolCls: "addicon"
                //handler:AddUserFn

            }, "", "|", "", {
                text: "编辑",
                tooltip: "编辑员工信息",
                icolCls: "editicon",
                handler:EditUserFn
            }, "", "|", "", {
                text: "删除",
                tooltip: "删除员工信息",
                icolCls: "deleteicon"
                //handler:DeleteUserFn
            }, "|", new Ext.Toolbar.Fill()
            ],
        listeners: {
            "contextmenu": function(e) {
                e.stopEvent();
            },
            "rowcontextmenu": function(grid, rowIndex, e) {
                e.stopEvent();
            }
        },
        bbar: [
            new Ext.PagingToolbar({
                store: UserInfoStore,
                pageSize: pageSize,
                emptyMsg: "无信息显示",
                prevText: "上一页",
                nextText: "下一页",
                refreshText: "刷新",
                lastText: "最后页",
                firstText: "第一页",
                beforePageText: "当前页",
                afterPageText: "共{0}页"
            }), new Ext.Toolbar.Fill()
            ]
    });