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、今すぐ私たちのgridをnewできるようになりました

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()
            ]
    });