ExtJs4–表格--Grid

1、首先定义对象：

Ext.define('log',{
            extend:'Ext.data.Model',
            fields:[
                {name: 'id',mapping:'id'}, 
                {name: 'user'}, 
                {name: 'type'},
                {name: 'time'},
                {name: 'describe'}
            ]
        });
2、定义Store：

        var logStore=Ext.create('Ext.data.Store', {
            pageSize:rowNum,
            model:'log',//对象
            remoteSort:true,
            proxy: {
                type:'ajax',
                actionMethods:{read:'POST'},//提交方式。post和get
                url: 'log.htm?show',
                extraParams:{//提交时传递的参数 
                startTime:"",
                endTime:""
              },

               reader: {
                     totalProperty: 'totalRows',//分页数据，总条数
                     root: 'data'//分页list
                },
            simpleSortMode :true
            },
            sorters:[{
                property:'id',//排序
                direction:"ASC"
            }]
        });

3、定义grid：

var logGrid =  Ext.create('Ext.grid.Panel',{
            columnLines: true,
            width: '100%',
            id: 'logGrid',
            bbar:  Ext.create('Ext.PagingToolbar', {//分页工具栏
                store: logStore,
                id: 'pagger',
                displayInfo: true,
                displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
                emptyMsg: "没有数据"
            }),
            viewConfig: {
                stripeRows: true
            },
            tbar: [{}],
            columns:[//表头
                {xtype: 'rownumberer',text:'序号',width:35,align:'left'},
                {header: 'ID',width: 70,dataIndex: 'id',id: 'id',hidden: true,menuDisabled: true},
                {header: '类别',width: 200,dataIndex: 'type',id: 'type',menuDisabled: false},
                {header: '时间',width: 200,dataIndex: 'time',id: 'time',menuDisabled: true},
                {header: '操作人',width: 200,dataIndex: 'user',id: 'user',menuDisabled: true},
                {header: '描述',width: 200,dataIndex: 'describe',id: 'describe',menuDisabled: true}
            ],
             forceFit : true,//列自动扩展宽度
            store: logStore,
            autoScroll: true,
            stripeRows: true
        });
        
        logStore.load({params:{start:1,limit:10}});//加载数据
       //logStore.loadPage(1);//这样也行